commit: a378c999b78c9138abb8ea1982dca2f976381f10
parent e029732021f67e13ca20c1b80c1315c4935b9f2b
Author: Henry Jameson <me@hjkos.com>
Date: Tue, 16 Jul 2024 21:01:20 +0300
add ability to override underlay color/opacity regardless of theme
Diffstat:
6 files changed, 54 insertions(+), 16 deletions(-)
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
@@ -28,12 +28,12 @@ const AppearanceTab = {
forcedRoundnessOptions: ['disabled', 'sharp', 'nonsharp', 'round'].map((mode, i) => ({
key: mode,
value: i - 1,
- label: this.$t(`settings.forced_roundness_mode_${mode}`)
+ label: this.$t(`settings.style.themes3.hacks.forced_roundness_mode_${mode}`)
})),
underlayOverrideModes: ['none', 'opaque', 'transparent'].map((mode, i) => ({
key: mode,
value: mode,
- label: this.$t(`settings.underlay_override_mode_${mode}`)
+ label: this.$t(`settings.style.themes3.hacks.underlay_override_mode_${mode}`)
}))
}
},
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -179,7 +179,7 @@
path="forcedRoundness"
:options="forcedRoundnessOptions"
>
- {{ $t('settings.force_interface_roundness') }}
+ {{ $t('settings.style.themes3.hacks.force_interface_roundness') }}
</ChoiceSetting>
</li>
<li>
@@ -188,7 +188,7 @@
path="theme3hacks.underlay"
:options="underlayOverrideModes"
>
- {{ $t('settings.underlay_overrides') }}
+ {{ $t('settings.style.themes3.hacks.underlay_overrides') }}
</ChoiceSetting>
</li>
<li v-if="instanceWallpaperUsed">
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -386,11 +386,6 @@
"navbar_size": "Top bar size",
"panel_header_size": "Panel header size",
"visual_tweaks": "Minor visual tweaks",
- "force_interface_roundness": "Override interface roundness/sharpness",
- "forced_roundness_mode_disabled": "Use theme defaults",
- "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": {
@@ -749,6 +744,17 @@
"update_preview": "Update preview",
"themes3": {
"define": "Override",
+ "hacks": {
+ "underlay_overrides": "Change underlay",
+ "underlay_override_mode_none": "Theme default",
+ "underlay_override_mode_opaque": "Replace with solid color",
+ "underlay_override_mode_transparent": "Remove entirely (might break some themes)",
+ "force_interface_roundness": "Override interface roundness/sharpness",
+ "forced_roundness_mode_disabled": "Use theme defaults",
+ "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"
+ },
"font": {
"group-builtin": "Browser default fonts",
"builtin" : {
diff --git a/src/modules/config.js b/src/modules/config.js
@@ -282,12 +282,12 @@ const config = {
}
} else {
commit('setOption', { name, value })
- if (
- name.startsWith('theme3hacks') ||
- APPEARANCE_SETTINGS_KEYS.has(name)
- ) {
+ if (APPEARANCE_SETTINGS_KEYS.has(name)) {
applyConfig(state)
}
+ if (name.startsWith('theme3hacks')) {
+ dispatch('setTheme', { recompile: true })
+ }
switch (name) {
case 'theme':
dispatch('setTheme', { themeName: value, recompile: true })
diff --git a/src/modules/interface.js b/src/modules/interface.js
@@ -221,7 +221,8 @@ const interfaceMod = {
customTheme: userThemeSnapshot,
customThemeSource: userThemeSource,
forceThemeRecompilation,
- themeDebug
+ themeDebug,
+ theme3hacks
} = rootState.config
const forceRecompile = forceThemeRecompilation || recompile
@@ -275,7 +276,36 @@ const interfaceMod = {
promise
.then(realThemeData => {
- const ruleset = convertTheme2To3(realThemeData)
+ const theme2ruleset = convertTheme2To3(realThemeData)
+ const hacks = []
+
+ Object.entries(theme3hacks).forEach(([key, value]) => {
+ switch (key) {
+ case 'underlay': {
+ if (value !== 'none') {
+ const newRule = {
+ component: 'Underlay',
+ directives: {}
+ }
+ if (value === 'opaque') {
+ newRule.directives.opacity = 1
+ newRule.directives.background = '--wallpaper'
+ }
+ if (value === 'transparent') {
+ newRule.directives.opacity = 0
+ }
+ console.log('NEW RULE', newRule)
+ hacks.push(newRule)
+ }
+ break
+ }
+ }
+ })
+
+ const ruleset = [
+ ...theme2ruleset,
+ ...hacks
+ ]
applyTheme(
ruleset,
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
@@ -12,7 +12,9 @@ export const basePaletteKeys = new Set([
'cBlue',
'cRed',
'cGreen',
- 'cOrange'
+ 'cOrange',
+
+ 'wallpaper'
])
export const fontsKeys = new Set([
