From e4a819a0e2ed9c57dc2191428d86a33bb5918862 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 22 May 2024 19:54:19 +0300
Subject: initial Appearance Tab implementation, added text size/UI scale
 option

---
 src/components/settings_modal/tabs/general_tab.vue | 15 ---------------
 1 file changed, 15 deletions(-)

(limited to 'src/components/settings_modal/tabs/general_tab.vue')

diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 208c49ee..240c0762 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -15,11 +15,6 @@
             {{ $t('settings.hide_isp') }}
           </BooleanSetting>
         </li>
-        <li v-if="instanceWallpaperUsed">
-          <BooleanSetting path="hideInstanceWallpaper">
-            {{ $t('settings.hide_wallpaper') }}
-          </BooleanSetting>
-        </li>
         <li>
           <BooleanSetting path="stopGifs">
             {{ $t('settings.stop_gifs') }}
@@ -101,16 +96,6 @@
         <li>
           <h3>{{ $t('settings.columns') }}</h3>
         </li>
-        <li>
-          <BooleanSetting path="disableStickyHeaders">
-            {{ $t('settings.disable_sticky_headers') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="showScrollbars">
-            {{ $t('settings.show_scrollbars') }}
-          </BooleanSetting>
-        </li>
         <li>
           <BooleanSetting path="sidebarRight">
             {{ $t('settings.right_sidebar') }}
-- 
cgit v1.2.3-70-g09d2


From 6343b91abf7fbad1cdd8b4648d1fc825d8e9b03c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 13 Jun 2024 02:22:47 +0300
Subject: more scaling options

---
 src/App.scss                                       |   5 +-
 src/components/emoji_reactions/emoji_reactions.vue |   2 +-
 .../settings_modal/tabs/appearance_tab.js          |  32 +++++-
 .../settings_modal/tabs/appearance_tab.vue         | 116 ++++++++++++++++++---
 src/components/settings_modal/tabs/general_tab.js  |  33 +-----
 src/components/settings_modal/tabs/general_tab.vue |  60 -----------
 src/i18n/en.json                                   |   4 +
 src/modules/config.js                              |   5 +
 src/modules/instance.js                            |   3 +
 src/panel.scss                                     |   6 +-
 src/services/style_setter/style_setter.js          |  20 ++--
 11 files changed, 165 insertions(+), 121 deletions(-)

(limited to 'src/components/settings_modal/tabs/general_tab.vue')

diff --git a/src/App.scss b/src/App.scss
index 32ca9189..a2710436 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -5,7 +5,7 @@
 :root {
   --fontSize: 14px;
   --status-margin: 0.75em;
-  --navbar-height: 3.5rem;
+  --navbar-height: var(--navbarSize, 3.5rem);
   --post-line-height: 1.4;
   // Z-Index stuff
   --ZI_media_modal: 9000;
@@ -21,6 +21,9 @@
 
 html {
   font-size: var(--textSize);
+
+  --navbar-height: var(--navbarSize, 3.5rem);
+  --emoji-size: var(--emojiSize, 32px);
   // overflow-x: clip causes my browser's tab to crash with SIGILL lul
 }
 
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index ad4a3c0b..3ab4c125 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -79,7 +79,7 @@
   margin-top: 0.25em;
   flex-wrap: wrap;
 
-  --emoji-size: calc(1.25em * var(--emojiReactionsScale, 1));
+  --emoji-size: calc(var(--emojiSize, 1.25em) * var(--emojiReactionsScale, 1));
 
   .emoji-reaction-container {
     display: flex;
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index b96106bd..542ab0c1 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -2,7 +2,7 @@ import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
-import UnitSetting from '../helpers/unit_setting.vue'
+import UnitSetting, { defaultHorizontalUnits } from '../helpers/unit_setting.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
@@ -17,7 +17,13 @@ library.add(
 
 const AppearanceTab = {
   data () {
-    return {}
+    return {
+      thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.third_column_mode_${mode}`)
+      }))
+    }
   },
   components: {
     BooleanSetting,
@@ -28,10 +34,32 @@ const AppearanceTab = {
     ProfileSettingIndicator
   },
   computed: {
+    horizontalUnits () {
+      return defaultHorizontalUnits
+    },
+    columns () {
+      const mode = this.$store.getters.mergedConfig.thirdColumnMode
+
+      const notif = mode === 'none' ? [] : ['notifs']
+
+      if (this.$store.getters.mergedConfig.sidebarRight || mode === 'postform') {
+        return [...notif, 'content', 'sidebar']
+      } else {
+        return ['sidebar', 'content', ...notif]
+      }
+    },
+    instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
     instanceWallpaperUsed () {
       return this.$store.state.instance.background &&
         !this.$store.state.users.currentUser.background_image
     },
+    instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
+    language: {
+      get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
+      set: function (val) {
+        this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
+      }
+    },
     ...SharedComputedObject()
   }
 }
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index 7730b701..75126df7 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -1,23 +1,8 @@
 <template>
   <div :label="$t('settings.general')">
     <div class="setting-item">
-      <h2>{{ $t('settings.interface') }}</h2>
+      <h2>{{ $t('settings.scale_and_layout') }}</h2>
       <ul class="setting-list">
-        <li v-if="instanceWallpaperUsed">
-          <BooleanSetting path="hideInstanceWallpaper">
-            {{ $t('settings.hide_wallpaper') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="disableStickyHeaders">
-            {{ $t('settings.disable_sticky_headers') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="showScrollbars">
-            {{ $t('settings.show_scrollbars') }}
-          </BooleanSetting>
-        </li>
         <li>
           <UnitSetting
             path="textSize"
@@ -49,6 +34,105 @@
             </small>
           </div>
         </li>
+        <li>
+          <UnitSetting
+            path="emojiSize"
+            step="0.1"
+            :units="['px', 'rem']"
+            :reset-default="{ 'px': 32, 'rem': 2.2 }"
+          >
+            {{ $t('settings.emoji_size') }}
+          </UnitSetting>
+          <ul
+            class="setting-list suboptions"
+          >
+            <li>
+              <FloatSetting
+                v-if="user"
+                path="emojiReactionsScale"
+                expert="1"
+              >
+                {{ $t('settings.emoji_reactions_scale') }}
+              </FloatSetting>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <UnitSetting
+            path="navbarSize"
+            step="0.1"
+            :units="['px', 'rem']"
+            :reset-default="{ 'px': 64, 'rem': 3.5 }"
+          >
+            {{ $t('settings.navbar_size') }}
+          </UnitSetting>
+        </li>
+        <h3>{{ $t('settings.columns') }}</h3>
+        <li>
+          <UnitSetting
+            path="panelHeaderSize"
+            step="0.1"
+            :units="['px', 'rem']"
+            :reset-default="{ 'px': 64, 'rem': 3.2 }"
+            timed-apply-mode
+          >
+            {{ $t('settings.panel_header_size') }}
+          </UnitSetting>
+        </li>
+        <li>
+          <BooleanSetting path="sidebarRight">
+            {{ $t('settings.right_sidebar') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="navbarColumnStretch">
+            {{ $t('settings.navbar_column_stretch') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <ChoiceSetting
+            v-if="user"
+            id="thirdColumnMode"
+            path="thirdColumnMode"
+            :options="thirdColumnModeOptions"
+          >
+            {{ $t('settings.third_column_mode') }}
+          </ChoiceSetting>
+        </li>
+        <li v-if="expertLevel > 0">
+          {{ $t('settings.column_sizes') }}
+          <div class="column-settings">
+            <UnitSetting
+              v-for="column in columns"
+              :key="column"
+              :path="column + 'ColumnWidth'"
+              :units="horizontalUnits"
+              expert="1"
+            >
+              {{ $t('settings.column_sizes_' + column) }}
+            </UnitSetting>
+          </div>
+        </li>
+        <li>
+          <BooleanSetting path="disableStickyHeaders">
+            {{ $t('settings.disable_sticky_headers') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="showScrollbars">
+            {{ $t('settings.show_scrollbars') }}
+          </BooleanSetting>
+        </li>
+      </ul>
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.visual_tweaks') }}</h2>
+      <ul class="setting-list">
+        <li v-if="instanceWallpaperUsed">
+          <BooleanSetting path="hideInstanceWallpaper">
+            {{ $t('settings.hide_wallpaper') }}
+          </BooleanSetting>
+        </li>
       </ul>
     </div>
   </div>
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 7d701d34..96caab07 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -3,7 +3,7 @@ import ChoiceSetting from '../helpers/choice_setting.vue'
 import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
-import UnitSetting, { defaultHorizontalUnits } from '../helpers/unit_setting.vue'
+import UnitSetting from '../helpers/unit_setting.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
@@ -40,11 +40,6 @@ const GeneralTab = {
         value: mode,
         label: this.$t(`settings.mention_link_display_${mode}`)
       })),
-      thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({
-        key: mode,
-        value: mode,
-        label: this.$t(`settings.third_column_mode_${mode}`)
-      })),
       userPopoverAvatarActionOptions: ['close', 'zoom', 'open'].map(mode => ({
         key: mode,
         value: mode,
@@ -70,9 +65,6 @@ const GeneralTab = {
     ProfileSettingIndicator
   },
   computed: {
-    horizontalUnits () {
-      return defaultHorizontalUnits
-    },
     postFormats () {
       return this.$store.state.instance.postFormats || []
     },
@@ -83,29 +75,6 @@ const GeneralTab = {
         label: this.$t(`post_status.content_type["${format}"]`)
       }))
     },
-    columns () {
-      const mode = this.$store.getters.mergedConfig.thirdColumnMode
-
-      const notif = mode === 'none' ? [] : ['notifs']
-
-      if (this.$store.getters.mergedConfig.sidebarRight || mode === 'postform') {
-        return [...notif, 'content', 'sidebar']
-      } else {
-        return ['sidebar', 'content', ...notif]
-      }
-    },
-    instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
-    instanceWallpaperUsed () {
-      return this.$store.state.instance.background &&
-        !this.$store.state.users.currentUser.background_image
-    },
-    instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
-    language: {
-      get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
-      set: function (val) {
-        this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
-      }
-    },
     ...SharedComputedObject()
   },
   methods: {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 240c0762..496d0d56 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -93,43 +93,6 @@
             {{ $t('settings.hide_shoutbox') }}
           </BooleanSetting>
         </li>
-        <li>
-          <h3>{{ $t('settings.columns') }}</h3>
-        </li>
-        <li>
-          <BooleanSetting path="sidebarRight">
-            {{ $t('settings.right_sidebar') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="navbarColumnStretch">
-            {{ $t('settings.navbar_column_stretch') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <ChoiceSetting
-            v-if="user"
-            id="thirdColumnMode"
-            path="thirdColumnMode"
-            :options="thirdColumnModeOptions"
-          >
-            {{ $t('settings.third_column_mode') }}
-          </ChoiceSetting>
-        </li>
-        <li v-if="expertLevel > 0">
-          {{ $t('settings.column_sizes') }}
-          <div class="column-settings">
-            <UnitSetting
-              v-for="column in columns"
-              :key="column"
-              :path="column + 'ColumnWidth'"
-              :units="horizontalUnits"
-              expert="1"
-            >
-              {{ $t('settings.column_sizes_' + column) }}
-            </UnitSetting>
-          </div>
-        </li>
         <li class="select-multiple">
           <span class="label">{{ $t('settings.confirm_dialogs') }}</span>
           <ul class="option-list">
@@ -262,15 +225,6 @@
             {{ $t('settings.no_rich_text_description') }}
           </BooleanSetting>
         </li>
-        <li>
-          <FloatSetting
-            v-if="user"
-            path="emojiReactionsScale"
-            expert="1"
-          >
-            {{ $t('settings.emoji_reactions_scale') }}
-          </FloatSetting>
-        </li>
         <h3>{{ $t('settings.attachments') }}</h3>
         <li>
           <BooleanSetting
@@ -513,17 +467,3 @@
 </template>
 
 <script src="./general_tab.js"></script>
-
-<style lang="scss">
-.column-settings {
-  display: flex;
-  justify-content: space-evenly;
-  flex-wrap: wrap;
-}
-
-.column-settings .size-label {
-  display: block;
-  margin-bottom: 0.5em;
-  margin-top: 0.5em;
-}
-</style>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 0c3f26b9..8d66ea0a 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -382,6 +382,10 @@
     "text_size": "Text and interface size",
     "text_size_tip": "Use {0} for absolute values, {1} will scale with browser default text size.",
     "text_size_tip2": "Values other than {0} might break some things and themes",
+    "emoji_size": "Emoji size",
+    "navbar_size": "Top bar size",
+    "panel_header_size": "Panel header size",
+    "visual_tweaks": "Minor visual tweaks",
     "mfa": {
       "otp": "OTP",
       "setup_otp": "Setup OTP",
diff --git a/src/modules/config.js b/src/modules/config.js
index 4d5e8efc..90d3353a 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -117,6 +117,8 @@ export const defaultState = {
   notifsColumnWidth: '25rem',
   emojiReactionsScale: undefined,
   textSize: undefined, // instance default
+  emojiSize: undefined, // instance default
+  navbarSize: undefined, // instance default
   navbarColumnStretch: false,
   greentext: undefined, // instance default
   useAtIcon: undefined, // instance default
@@ -262,6 +264,9 @@ const config = {
           case 'contentColumnWidth':
           case 'notifsColumnWidth':
           case 'textSize':
+          case 'navbarSize':
+          case 'panelHeaderSize':
+          case 'emojiSize':
           case 'emojiReactionsScale':
             applyConfig(state)
             break
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 4a75d948..ecfa299f 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -100,6 +100,9 @@ const defaultState = {
   theme: 'pleroma-dark',
   emojiReactionsScale: 1.0,
   textSize: '14px',
+  emojiSize: '2.2em',
+  navbarSize: '3.5em',
+  panelHeaderSize: '3.2em',
   virtualScrolling: true,
   sensitiveByDefault: false,
   conversationDisplay: 'linear',
diff --git a/src/panel.scss b/src/panel.scss
index 833e4208..7b38cca8 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -60,9 +60,9 @@
 
 .panel-heading,
 .panel-footer {
-  --panel-heading-height-padding: 0.6em;
-  --__panel-heading-gap: 0.5em;
-  --__panel-heading-height: 3.2em;
+  --panel-heading-height-padding: calc(var(--panelHeaderSize) * 0.15);
+  --__panel-heading-gap: calc(var(--panelHeaderSize) * 0.1);
+  --__panel-heading-height: var(--panelHeaderSize, 3.2em);
   --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));
 
   backdrop-filter: var(--__panel-backdrop-filter);
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index a98456d3..7cf4af11 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -148,26 +148,34 @@ export const applyTheme = async (input, onFinish = (data) => {}) => {
   return Promise.resolve()
 }
 
-const configColumns = ({
+const extractStyleConfig = ({
   sidebarColumnWidth,
   contentColumnWidth,
   notifsColumnWidth,
   emojiReactionsScale,
+  roundnessOverride,
+  emojiSize,
+  navbarSize,
+  panelHeaderSize,
   textSize
 }) => ({
   sidebarColumnWidth,
   contentColumnWidth,
   notifsColumnWidth,
   emojiReactionsScale,
+  roundnessOverride,
+  emojiSize,
+  navbarSize,
+  panelHeaderSize,
   textSize
 })
 
-const defaultConfigColumns = configColumns(defaultState)
+const defaultStyleConfig = extractStyleConfig(defaultState)
 
-export const applyConfig = (config) => {
-  const columns = configColumns(config)
+export const applyConfig = (input) => {
+  const config = extractStyleConfig(input)
 
-  if (columns === defaultConfigColumns) {
+  if (config === defaultStyleConfig) {
     return
   }
 
@@ -176,7 +184,7 @@ export const applyConfig = (config) => {
   body.classList.add('hidden')
 
   const rules = Object
-    .entries(columns)
+    .entries(config)
     .filter(([k, v]) => v)
     .map(([k, v]) => `--${k}: ${v}`).join(';')
 
-- 
cgit v1.2.3-70-g09d2


From f9e407de639ce4d20beacd3eca3501639ae161bd Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 21 Jun 2024 23:28:24 +0300
Subject: made theme debug easier by making it an actual option

---
 src/boot/after_store.js                               | 10 ++++++----
 src/components/settings_modal/tabs/appearance_tab.vue | 16 ++++++++++++++++
 src/components/settings_modal/tabs/general_tab.vue    |  8 --------
 src/i18n/en.json                                      |  1 +
 src/modules/config.js                                 | 12 ++++++++++--
 src/modules/instance.js                               |  6 +++---
 src/services/style_setter/style_setter.js             | 17 +++++++++++------
 src/services/theme_data/css_utils.js                  | 12 +++++-------
 src/services/theme_data/theme_data_3.service.js       |  2 +-
 9 files changed, 53 insertions(+), 31 deletions(-)

(limited to 'src/components/settings_modal/tabs/general_tab.vue')

diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index bcab7a66..b93e28a3 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -353,18 +353,20 @@ const afterStoreSetup = async ({ store, i18n }) => {
 
   await setConfig({ store })
 
-  const { customTheme, customThemeSource, forceThemeRecompilation } = store.state.config
+  const { customTheme, customThemeSource, forceThemeRecompilation, themeDebug } = store.state.config
   const { theme } = store.state.instance
   const customThemePresent = customThemeSource || customTheme
 
-  if (!forceThemeRecompilation && tryLoadCache()) {
+  console.log('DEBUG INITIAL', themeDebug, forceThemeRecompilation)
+
+  if (!forceThemeRecompilation && !themeDebug && tryLoadCache()) {
     store.commit('setThemeApplied')
   } else {
     if (customThemePresent) {
       if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
-        applyTheme(customThemeSource)
+        applyTheme(customThemeSource, () => {}, themeDebug)
       } else {
-        applyTheme(customTheme)
+        applyTheme(customTheme, () => {}, themeDebug)
       }
       store.commit('setThemeApplied')
     } else if (theme) {
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index dd9e8070..5356292e 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -142,6 +142,22 @@
             {{ $t('settings.hide_wallpaper') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting
+            path="forceThemeRecompilation"
+            :expert="1"
+          >
+            {{ $t('settings.force_theme_recompilation_debug') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="themeDebug"
+            :expert="1"
+          >
+            {{ $t('settings.theme_debug') }}
+          </BooleanSetting>
+        </li>
       </ul>
     </div>
   </div>
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 496d0d56..4ece6cf4 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -148,14 +148,6 @@
     <div class="setting-item">
       <h2>{{ $t('settings.post_look_feel') }}</h2>
       <ul class="setting-list">
-        <li>
-          <BooleanSetting
-            path="forceThemeRecompilation"
-            :expert="1"
-          >
-            {{ $t('settings.force_theme_recompilation_debug') }}
-          </BooleanSetting>
-        </li>
         <li>
           <ChoiceSetting
             id="conversationDisplay"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 628be1bf..3116843d 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -391,6 +391,7 @@
     "forced_roundness_mode_sharp": "Force sharp edges",
     "forced_roundness_mode_nonsharp": "Force not-so-sharp (1px roundness) edges",
     "forced_roundness_mode_round": "Force round edges",
+    "theme_debug": "Show what background theme engine assumes when dealing with transparancy (DEBUG)",
     "scale_and_layout": "Interface scale and layout",
     "mfa": {
       "otp": "OTP",
diff --git a/src/modules/config.js b/src/modules/config.js
index 2623bc26..a977c9c5 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -147,6 +147,7 @@ export const defaultState = {
   maxDepthInThread: undefined, // instance default
   autocompleteSelect: undefined, // instance default
   closingDrawerMarksAsSeen: undefined, // instance default
+  themeDebug: false,
   unseenAtTop: undefined, // instance default
   ignoreInactionableSeen: undefined // instance default
 }
@@ -274,9 +275,16 @@ const config = {
             applyConfig(state)
             break
           case 'customTheme':
-          case 'customThemeSource':
-            applyTheme(value)
+          case 'customThemeSource': {
+            const { themeDebug } = state
+            applyTheme(value, () => {}, themeDebug)
             break
+          }
+          case 'themeDebug': {
+            const { customTheme, customThemeSource } = state
+            applyTheme(customTheme || customThemeSource, () => {}, value)
+            break
+          }
           case 'interfaceLanguage':
             messages.setLanguage(this.getters.i18n, value)
             dispatch('loadUnicodeEmojiData', value)
diff --git a/src/modules/instance.js b/src/modules/instance.js
index e28837b3..6997e75d 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -383,16 +383,16 @@ const instance = {
         .then(themeData => {
           commit('setInstanceOption', { name: 'themeData', value: themeData })
           // No need to apply theme if there's user theme already
-          const { customTheme } = rootState.config
+          const { customTheme, themeDebug } = rootState.config
           const { themeApplied } = rootState.interface
           if (customTheme || themeApplied) return
 
           // New theme presets don't have 'theme' property, they use 'source'
           const themeSource = themeData.source
           if (!themeData.theme || (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION)) {
-            applyTheme(themeSource)
+            applyTheme(themeSource, null, themeDebug)
           } else {
-            applyTheme(themeData.theme)
+            applyTheme(themeData.theme, null, themeDebug)
           }
           commit('setThemeApplied')
         })
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index ee0f8607..126b6946 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -6,7 +6,7 @@ import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from '../../modules/config.js'
 import { chunk } from 'lodash'
 
-export const generateTheme = async (input, callbacks) => {
+export const generateTheme = async (input, callbacks, debug) => {
   const {
     onNewRule = (rule, isLazy) => {},
     onLazyFinished = () => {},
@@ -22,9 +22,11 @@ export const generateTheme = async (input, callbacks) => {
   }
 
   // Assuming that "worst case scenario background" is panel background since it's the most likely one
-  const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim())
+  const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim(), debug)
 
-  getCssRules(themes3.eager, themes3.staticVars).forEach(rule => {
+  console.log('DEBUG 2 IS', debug)
+
+  getCssRules(themes3.eager, debug).forEach(rule => {
     // Hacks to support multiple selectors on same component
     if (rule.match(/::-webkit-scrollbar-button/)) {
       const parts = rule.split(/[{}]/g)
@@ -54,7 +56,7 @@ export const generateTheme = async (input, callbacks) => {
   const processChunk = () => {
     const chunk = chunks[counter]
     Promise.all(chunk.map(x => x())).then(result => {
-      getCssRules(result.filter(x => x), themes3.staticVars).forEach(rule => {
+      getCssRules(result.filter(x => x), debug).forEach(rule => {
         if (rule.match(/\.modal-view/)) {
           const parts = rule.split(/[{}]/g)
           const newRule = [
@@ -113,12 +115,14 @@ export const tryLoadCache = () => {
   }
 }
 
-export const applyTheme = async (input, onFinish = (data) => {}) => {
+export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
   const styleSheet = new CSSStyleSheet()
   const styleArray = []
   const lazyStyleSheet = new CSSStyleSheet()
   const lazyStyleArray = []
 
+  console.log('DEBUG IS', debug)
+
   const { lazyProcessFunc } = await generateTheme(
     input,
     {
@@ -140,7 +144,8 @@ export const applyTheme = async (input, onFinish = (data) => {}) => {
         onFinish(cache)
         localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
       }
-    }
+    },
+    debug
   )
 
   setTimeout(lazyProcessFunc, 0)
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
index a89eac3b..8423e8ac 100644
--- a/src/services/theme_data/css_utils.js
+++ b/src/services/theme_data/css_utils.js
@@ -2,11 +2,6 @@ import { convert } from 'chromatism'
 
 import { hex2rgb, rgba2css } from '../color_convert/color_convert.js'
 
-// This changes what backgrounds are used to "stacked" solid colors so you can see
-// what theme engine "thinks" is actual background color is for purposes of text color
-// generation and for when --stacked variable is used
-const DEBUG = false
-
 export const parseCssShadow = (text) => {
   const dimensions = /(\d[a-z]*\s?){2,4}/.exec(text)?.[0]
   const inset = /inset/.exec(text)?.[0]
@@ -66,7 +61,10 @@ export const getCssShadowFilter = (input) => {
     .join(' ')
 }
 
-export const getCssRules = (rules) => rules.map(rule => {
+// `debug` changes what backgrounds are used to "stacked" solid colors so you can see
+// what theme engine "thinks" is actual background color is for purposes of text color
+// generation and for when --stacked variable is used
+export const getCssRules = (rules, debug) => rules.map(rule => {
   let selector = rule.selector
   if (!selector) {
     selector = 'html'
@@ -93,7 +91,7 @@ export const getCssRules = (rules) => rules.map(rule => {
         ].join(';\n  ')
       }
       case 'background': {
-        if (DEBUG) {
+        if (debug) {
           return `
             --background: ${getCssColorString(rule.dynamicVars.stacked)};
             background-color: ${getCssColorString(rule.dynamicVars.stacked)};
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 15b4493e..51ecc051 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -149,7 +149,7 @@ const ruleToSelector = genericRuleToSelector(components)
 
 export const getEngineChecksum = () => engineChecksum
 
-export const init = (extraRuleset, ultimateBackgroundColor) => {
+export const init = (extraRuleset, ultimateBackgroundColor, debug) => {
   const staticVars = {}
   const stacked = {}
   const computed = {}
-- 
cgit v1.2.3-70-g09d2

