commit: 8a41313bb4957471b2c5577661ae388300097f12
parent 80cbf29bdf7c6cd3695d1e4cf49a8e38bff847ed
Author: Henry Jameson <me@hjkos.com>
Date: Thu, 4 Jul 2024 03:20:26 +0300
"fix" theme preview
Diffstat:
6 files changed, 175 insertions(+), 133 deletions(-)
diff --git a/preview.style.js b/preview.style.js
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -1,7 +1,8 @@
import {
rgb2hex,
hex2rgb,
- getContrastRatioLayers
+ getContrastRatioLayers,
+ relativeLuminance
} from 'src/services/color_convert/color_convert.js'
import {
getThemes
@@ -23,10 +24,14 @@ import {
generateShadows,
generateRadii,
generateFonts,
- composePreset,
shadows2to3,
colors2to3
} from 'src/services/theme_data/theme_data.service.js'
+
+import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
+import { init } from 'src/services/theme_data/theme_data_3.service.js'
+import { getCssRules } from 'src/services/theme_data/css_utils.js'
+
import ColorInput from 'src/components/color_input/color_input.vue'
import RangeInput from 'src/components/range_input/range_input.vue'
import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
@@ -62,6 +67,7 @@ const colorConvert = (color) => {
export default {
data () {
return {
+ themeV3Preview: [],
themeImporter: newImporter({
validator: this.importValidator,
onImport: this.onImport,
@@ -78,10 +84,7 @@ export default {
tempImportFile: undefined,
engineVersion: 0,
- previewShadows: {},
- previewColors: {},
- previewRadii: {},
- previewFonts: {},
+ previewTheme: {},
shadowsInvalid: true,
colorsInvalid: true,
@@ -232,13 +235,6 @@ export default {
chatMessage: this.chatMessageRadiusLocal
}
},
- preview () {
- return composePreset(this.previewColors, this.previewRadii, this.previewShadows, this.previewFonts)
- },
- previewTheme () {
- if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {}, fonts: {} }
- return this.preview.theme
- },
// This needs optimization maybe
previewContrast () {
try {
@@ -306,14 +302,6 @@ export default {
return {}
}
},
- previewRules () {
- if (!this.preview.rules) return ''
- return [
- ...Object.values(this.preview.rules),
- 'color: var(--text)',
- 'font-family: var(--interfaceFont, sans-serif)'
- ].join(';')
- },
shadowsAvailable () {
return Object.keys(DEFAULT_SHADOWS).sort()
},
@@ -532,16 +520,24 @@ export default {
}
})
},
- updatePreviewColorsAndShadows () {
- this.previewColors = generateColors({
+ updatePreviewColors () {
+ const result = generateColors({
opacity: this.currentOpacity,
colors: this.currentColors
})
- this.previewShadows = generateShadows(
- { shadows: this.shadowsLocal, opacity: this.previewTheme.opacity, themeEngineVersion: this.engineVersion },
- this.previewColors.theme.colors,
- this.previewColors.mod
- )
+ this.previewTheme.colors = result.theme.colors
+ this.previewTheme.opacity = result.theme.opacity
+ },
+ updatePreviewShadows () {
+ this.previewTheme.shadows = generateShadows(
+ {
+ shadows: this.shadowsLocal,
+ opacity: this.previewTheme.opacity,
+ themeEngineVersion: this.engineVersion
+ },
+ this.previewTheme.colors,
+ relativeLuminance(this.previewTheme.colors.bg) < 0.5 ? 1 : -1
+ ).theme.shadows
},
importTheme () { this.themeImporter.importData() },
exportTheme () { this.themeExporter.exportData() },
@@ -692,6 +688,8 @@ export default {
} else {
this.shadowsLocal = shadows
}
+ this.updatePreviewColors()
+ this.updatePreviewShadows()
this.shadowSelected = this.shadowsAvailable[0]
}
@@ -699,12 +697,32 @@ export default {
this.clearFonts()
this.fontsLocal = fonts
}
+ },
+ updateTheme3Preview () {
+ console.log(this.previewTheme)
+ const theme2 = convertTheme2To3(this.previewTheme)
+ const theme3 = init({
+ extraRuleset: theme2,
+ ultimateBackgroundColor: '#000000',
+ liteMode: true
+ })
+ this.themeV3Preview = getCssRules(theme3.eager)
+ .map(x => {
+ if (x.startsWith('html')) {
+ return x.replace('html', '#theme-preview')
+ } else if (x.startsWith('#content')) {
+ return x.replace('#content', '#theme-preview')
+ } else {
+ return '#theme-preview > ' + x
+ }
+ })
+ .join('\n')
}
},
watch: {
currentRadii () {
try {
- this.previewRadii = generateRadii({ radii: this.currentRadii })
+ this.previewTheme.radii = generateRadii({ radii: this.currentRadii }).theme
this.radiiInvalid = false
} catch (e) {
this.radiiInvalid = true
@@ -713,9 +731,8 @@ export default {
},
shadowsLocal: {
handler () {
- if (Object.getOwnPropertyNames(this.previewColors).length === 1) return
try {
- this.updatePreviewColorsAndShadows()
+ this.updatePreviewShadows()
this.shadowsInvalid = false
} catch (e) {
this.shadowsInvalid = true
@@ -727,7 +744,7 @@ export default {
fontsLocal: {
handler () {
try {
- this.previewFonts = generateFonts({ fonts: this.fontsLocal })
+ this.previewTheme.fonts = generateFonts({ fonts: this.fontsLocal }).theme
this.fontsInvalid = false
} catch (e) {
this.fontsInvalid = true
@@ -738,18 +755,16 @@ export default {
},
currentColors () {
try {
- this.updatePreviewColorsAndShadows()
+ this.updatePreviewColors()
this.colorsInvalid = false
- this.shadowsInvalid = false
} catch (e) {
this.colorsInvalid = true
- this.shadowsInvalid = true
console.warn(e)
}
},
currentOpacity () {
try {
- this.updatePreviewColorsAndShadows()
+ this.updatePreviewColors()
} catch (e) {
console.warn(e)
}
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -1,5 +1,8 @@
<template>
<div class="theme-tab">
+ <div class="alert warning">
+ {{ $t("settings.style.themes2_outdated") }}
+ </div>
<div class="presets-container">
<div class="save-load">
<div
@@ -120,7 +123,19 @@
</div>
</div>
- <preview :style="previewRules" />
+ <!-- eslint-disable vue/no-v-text-v-html-on-component -->
+ <component :is="'style'" v-html="themeV3Preview"/>
+ <!-- eslint-enable vue/no-v-text-v-html-on-component -->
+ <preview id="theme-preview"/>
+
+ <div>
+ <button
+ class="btn button-default"
+ @click="updateTheme3Preview"
+ >
+ {{ $t("settings.style.update_preview") }}
+ </button>
+ </div>
<keep-alive>
<tab-switcher key="style-tweak">
@@ -156,7 +171,7 @@
<OpacityInput
v-model="bgOpacityLocal"
name="bgOpacity"
- :fallback="previewTheme.opacity.bg"
+ :fallback="previewTheme.opacity?.bg"
/>
<ColorInput
v-model="textColorLocal"
@@ -167,14 +182,14 @@
<ColorInput
v-model="accentColorLocal"
name="accentColor"
- :fallback="previewTheme.colors.link"
+ :fallback="previewTheme.colors?.link"
:label="$t('settings.accent')"
:show-optional-tickbox="typeof linkColorLocal !== 'undefined'"
/>
<ColorInput
v-model="linkColorLocal"
name="linkColor"
- :fallback="previewTheme.colors.accent"
+ :fallback="previewTheme.colors?.accent"
:label="$t('settings.links')"
:show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
/>
@@ -190,13 +205,13 @@
v-model="fgTextColorLocal"
name="fgTextColor"
:label="$t('settings.text')"
- :fallback="previewTheme.colors.fgText"
+ :fallback="previewTheme.colors?.fgText"
/>
<ColorInput
v-model="fgLinkColorLocal"
name="fgLinkColor"
:label="$t('settings.links')"
- :fallback="previewTheme.colors.fgLink"
+ :fallback="previewTheme.colors?.fgLink"
/>
<p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
</div>
@@ -256,14 +271,14 @@
<ColorInput
v-model="postLinkColorLocal"
name="postLinkColor"
- :fallback="previewTheme.colors.accent"
+ :fallback="previewTheme.colors?.accent"
:label="$t('settings.links')"
/>
<ContrastRatio :contrast="previewContrast.postLink" />
<ColorInput
v-model="postGreentextColorLocal"
name="postGreentextColor"
- :fallback="previewTheme.colors.cGreen"
+ :fallback="previewTheme.colors?.cGreen"
:label="$t('settings.greentext')"
/>
<ContrastRatio :contrast="previewContrast.postGreentext" />
@@ -272,13 +287,13 @@
v-model="alertErrorColorLocal"
name="alertError"
:label="$t('settings.style.advanced_colors.alert_error')"
- :fallback="previewTheme.colors.alertError"
+ :fallback="previewTheme.colors?.alertError"
/>
<ColorInput
v-model="alertErrorTextColorLocal"
name="alertErrorText"
:label="$t('settings.text')"
- :fallback="previewTheme.colors.alertErrorText"
+ :fallback="previewTheme.colors?.alertErrorText"
/>
<ContrastRatio
:contrast="previewContrast.alertErrorText"
@@ -288,13 +303,13 @@
v-model="alertWarningColorLocal"
name="alertWarning"
:label="$t('settings.style.advanced_colors.alert_warning')"
- :fallback="previewTheme.colors.alertWarning"
+ :fallback="previewTheme.colors?.alertWarning"
/>
<ColorInput
v-model="alertWarningTextColorLocal"
name="alertWarningText"
:label="$t('settings.text')"
- :fallback="previewTheme.colors.alertWarningText"
+ :fallback="previewTheme.colors?.alertWarningText"
/>
<ContrastRatio
:contrast="previewContrast.alertWarningText"
@@ -304,13 +319,13 @@
v-model="alertNeutralColorLocal"
name="alertNeutral"
:label="$t('settings.style.advanced_colors.alert_neutral')"
- :fallback="previewTheme.colors.alertNeutral"
+ :fallback="previewTheme.colors?.alertNeutral"
/>
<ColorInput
v-model="alertNeutralTextColorLocal"
name="alertNeutralText"
:label="$t('settings.text')"
- :fallback="previewTheme.colors.alertNeutralText"
+ :fallback="previewTheme.colors?.alertNeutralText"
/>
<ContrastRatio
:contrast="previewContrast.alertNeutralText"
@@ -319,7 +334,7 @@
<OpacityInput
v-model="alertOpacityLocal"
name="alertOpacity"
- :fallback="previewTheme.opacity.alert"
+ :fallback="previewTheme.opacity?.alert"
/>
</div>
<div class="color-item">
@@ -328,13 +343,13 @@
v-model="badgeNotificationColorLocal"
name="badgeNotification"
:label="$t('settings.style.advanced_colors.badge_notification')"
- :fallback="previewTheme.colors.badgeNotification"
+ :fallback="previewTheme.colors?.badgeNotification"
/>
<ColorInput
v-model="badgeNotificationTextColorLocal"
name="badgeNotificationText"
:label="$t('settings.text')"
- :fallback="previewTheme.colors.badgeNotificationText"
+ :fallback="previewTheme.colors?.badgeNotificationText"
/>
<ContrastRatio
:contrast="previewContrast.badgeNotificationText"
@@ -346,19 +361,19 @@
<ColorInput
v-model="panelColorLocal"
name="panelColor"
- :fallback="previewTheme.colors.panel"
+ :fallback="previewTheme.colors?.panel"
:label="$t('settings.background')"
/>
<OpacityInput
v-model="panelOpacityLocal"
name="panelOpacity"
- :fallback="previewTheme.opacity.panel"
+ :fallback="previewTheme.opacity?.panel"
:disabled="panelColorLocal === 'transparent'"
/>
<ColorInput
v-model="panelTextColorLocal"
name="panelTextColor"
- :fallback="previewTheme.colors.panelText"
+ :fallback="previewTheme.colors?.panelText"
:label="$t('settings.text')"
/>
<ContrastRatio
@@ -368,7 +383,7 @@
<ColorInput
v-model="panelLinkColorLocal"
name="panelLinkColor"
- :fallback="previewTheme.colors.panelLink"
+ :fallback="previewTheme.colors?.panelLink"
:label="$t('settings.links')"
/>
<ContrastRatio
@@ -381,20 +396,20 @@
<ColorInput
v-model="topBarColorLocal"
name="topBarColor"
- :fallback="previewTheme.colors.topBar"
+ :fallback="previewTheme.colors?.topBar"
:label="$t('settings.background')"
/>
<ColorInput
v-model="topBarTextColorLocal"
name="topBarTextColor"
- :fallback="previewTheme.colors.topBarText"
+ :fallback="previewTheme.colors?.topBarText"
:label="$t('settings.text')"
/>
<ContrastRatio :contrast="previewContrast.topBarText" />
<ColorInput
v-model="topBarLinkColorLocal"
name="topBarLinkColor"
- :fallback="previewTheme.colors.topBarLink"
+ :fallback="previewTheme.colors?.topBarLink"
:label="$t('settings.links')"
/>
<ContrastRatio :contrast="previewContrast.topBarLink" />
@@ -404,19 +419,19 @@
<ColorInput
v-model="inputColorLocal"
name="inputColor"
- :fallback="previewTheme.colors.input"
+ :fallback="previewTheme.colors?.input"
:label="$t('settings.background')"
/>
<OpacityInput
v-model="inputOpacityLocal"
name="inputOpacity"
- :fallback="previewTheme.opacity.input"
+ :fallback="previewTheme.opacity?.input"
:disabled="inputColorLocal === 'transparent'"
/>
<ColorInput
v-model="inputTextColorLocal"
name="inputTextColor"
- :fallback="previewTheme.colors.inputText"
+ :fallback="previewTheme.colors?.inputText"
:label="$t('settings.text')"
/>
<ContrastRatio :contrast="previewContrast.inputText" />
@@ -426,33 +441,33 @@
<ColorInput
v-model="btnColorLocal"
name="btnColor"
- :fallback="previewTheme.colors.btn"
+ :fallback="previewTheme.colors?.btn"
:label="$t('settings.background')"
/>
<OpacityInput
v-model="btnOpacityLocal"
name="btnOpacity"
- :fallback="previewTheme.opacity.btn"
+ :fallback="previewTheme.opacity?.btn"
:disabled="btnColorLocal === 'transparent'"
/>
<ColorInput
v-model="btnTextColorLocal"
name="btnTextColor"
- :fallback="previewTheme.colors.btnText"
+ :fallback="previewTheme.colors?.btnText"
:label="$t('settings.text')"
/>
<ContrastRatio :contrast="previewContrast.btnText" />
<ColorInput
v-model="btnPanelTextColorLocal"
name="btnPanelTextColor"
- :fallback="previewTheme.colors.btnPanelText"
+ :fallback="previewTheme.colors?.btnPanelText"
:label="$t('settings.style.advanced_colors.panel_header')"
/>
<ContrastRatio :contrast="previewContrast.btnPanelText" />
<ColorInput
v-model="btnTopBarTextColorLocal"
name="btnTopBarTextColor"
- :fallback="previewTheme.colors.btnTopBarText"
+ :fallback="previewTheme.colors?.btnTopBarText"
:label="$t('settings.style.advanced_colors.top_bar')"
/>
<ContrastRatio :contrast="previewContrast.btnTopBarText" />
@@ -460,27 +475,27 @@
<ColorInput
v-model="btnPressedColorLocal"
name="btnPressedColor"
- :fallback="previewTheme.colors.btnPressed"
+ :fallback="previewTheme.colors?.btnPressed"
:label="$t('settings.background')"
/>
<ColorInput
v-model="btnPressedTextColorLocal"
name="btnPressedTextColor"
- :fallback="previewTheme.colors.btnPressedText"
+ :fallback="previewTheme.colors?.btnPressedText"
:label="$t('settings.text')"
/>
<ContrastRatio :contrast="previewContrast.btnPressedText" />
<ColorInput
v-model="btnPressedPanelTextColorLocal"
name="btnPressedPanelTextColor"
- :fallback="previewTheme.colors.btnPressedPanelText"
+ :fallback="previewTheme.colors?.btnPressedPanelText"
:label="$t('settings.style.advanced_colors.panel_header')"
/>
<ContrastRatio :contrast="previewContrast.btnPressedPanelText" />
<ColorInput
v-model="btnPressedTopBarTextColorLocal"
name="btnPressedTopBarTextColor"
- :fallback="previewTheme.colors.btnPressedTopBarText"
+ :fallback="previewTheme.colors?.btnPressedTopBarText"
:label="$t('settings.style.advanced_colors.top_bar')"
/>
<ContrastRatio :contrast="previewContrast.btnPressedTopBarText" />
@@ -488,52 +503,52 @@
<ColorInput
v-model="btnDisabledColorLocal"
name="btnDisabledColor"
- :fallback="previewTheme.colors.btnDisabled"
+ :fallback="previewTheme.colors?.btnDisabled"
:label="$t('settings.background')"
/>
<ColorInput
v-model="btnDisabledTextColorLocal"
name="btnDisabledTextColor"
- :fallback="previewTheme.colors.btnDisabledText"
+ :fallback="previewTheme.colors?.btnDisabledText"
:label="$t('settings.text')"
/>
<ColorInput
v-model="btnDisabledPanelTextColorLocal"
name="btnDisabledPanelTextColor"
- :fallback="previewTheme.colors.btnDisabledPanelText"
+ :fallback="previewTheme.colors?.btnDisabledPanelText"
:label="$t('settings.style.advanced_colors.panel_header')"
/>
<ColorInput
v-model="btnDisabledTopBarTextColorLocal"
name="btnDisabledTopBarTextColor"
- :fallback="previewTheme.colors.btnDisabledTopBarText"
+ :fallback="previewTheme.colors?.btnDisabledTopBarText"
:label="$t('settings.style.advanced_colors.top_bar')"
/>
<h5>{{ $t('settings.style.advanced_colors.toggled') }}</h5>
<ColorInput
v-model="btnToggledColorLocal"
name="btnToggledColor"
- :fallback="previewTheme.colors.btnToggled"
+ :fallback="previewTheme.colors?.btnToggled"
:label="$t('settings.background')"
/>
<ColorInput
v-model="btnToggledTextColorLocal"
name="btnToggledTextColor"
- :fallback="previewTheme.colors.btnToggledText"
+ :fallback="previewTheme.colors?.btnToggledText"
:label="$t('settings.text')"
/>
<ContrastRatio :contrast="previewContrast.btnToggledText" />
<ColorInput
v-model="btnToggledPanelTextColorLocal"
name="btnToggledPanelTextColor"
- :fallback="previewTheme.colors.btnToggledPanelText"
+ :fallback="previewTheme.colors?.btnToggledPanelText"
:label="$t('settings.style.advanced_colors.panel_header')"
/>
<ContrastRatio :contrast="previewContrast.btnToggledPanelText" />
<ColorInput
v-model="btnToggledTopBarTextColorLocal"
name="btnToggledTopBarTextColor"
- :fallback="previewTheme.colors.btnToggledTopBarText"
+ :fallback="previewTheme.colors?.btnToggledTopBarText"
:label="$t('settings.style.advanced_colors.top_bar')"
/>
<ContrastRatio :contrast="previewContrast.btnToggledTopBarText" />
@@ -543,20 +558,20 @@
<ColorInput
v-model="tabColorLocal"
name="tabColor"
- :fallback="previewTheme.colors.tab"
+ :fallback="previewTheme.colors?.tab"
:label="$t('settings.background')"
/>
<ColorInput
v-model="tabTextColorLocal"
name="tabTextColor"
- :fallback="previewTheme.colors.tabText"
+ :fallback="previewTheme.colors?.tabText"
:label="$t('settings.text')"
/>
<ContrastRatio :contrast="previewContrast.tabText" />
<ColorInput
v-model="tabActiveTextColorLocal"
name="tabActiveTextColor"
- :fallback="previewTheme.colors.tabActiveText"
+ :fallback="previewTheme.colors?.tabActiveText"
:label="$t('settings.text')"
/>
<ContrastRatio :contrast="previewContrast.tabActiveText" />
@@ -566,13 +581,13 @@
<ColorInput
v-model="borderColorLocal"
name="borderColor"
- :fallback="previewTheme.colors.border"
+ :fallback="previewTheme.colors?.border"
:label="$t('settings.style.common.color')"
/>
<OpacityInput
v-model="borderOpacityLocal"
name="borderOpacity"
- :fallback="previewTheme.opacity.border"
+ :fallback="previewTheme.opacity?.border"
:disabled="borderColorLocal === 'transparent'"
/>
</div>
@@ -581,25 +596,25 @@
<ColorInput
v-model="faintColorLocal"
name="faintColor"
- :fallback="previewTheme.colors.faint"
+ :fallback="previewTheme.colors?.faint"
:label="$t('settings.text')"
/>
<ColorInput
v-model="faintLinkColorLocal"
name="faintLinkColor"
- :fallback="previewTheme.colors.faintLink"
+ :fallback="previewTheme.colors?.faintLink"
:label="$t('settings.links')"
/>
<ColorInput
v-model="panelFaintColorLocal"
name="panelFaintColor"
- :fallback="previewTheme.colors.panelFaint"
+ :fallback="previewTheme.colors?.panelFaint"
:label="$t('settings.style.advanced_colors.panel_header')"
/>
<OpacityInput
v-model="faintOpacityLocal"
name="faintOpacity"
- :fallback="previewTheme.opacity.faint"
+ :fallback="previewTheme.opacity?.faint"
/>
</div>
<div class="color-item">
@@ -608,12 +623,12 @@
v-model="underlayColorLocal"
name="underlay"
:label="$t('settings.style.advanced_colors.underlay')"
- :fallback="previewTheme.colors.underlay"
+ :fallback="previewTheme.colors?.underlay"
/>
<OpacityInput
v-model="underlayOpacityLocal"
name="underlayOpacity"
- :fallback="previewTheme.opacity.underlay"
+ :fallback="previewTheme.opacity?.underlay"
:disabled="underlayOpacityLocal === 'transparent'"
/>
</div>
@@ -623,7 +638,7 @@
v-model="wallpaperColorLocal"
name="wallpaper"
:label="$t('settings.style.advanced_colors.wallpaper')"
- :fallback="previewTheme.colors.wallpaper"
+ :fallback="previewTheme.colors?.wallpaper"
/>
</div>
<div class="color-item">
@@ -632,13 +647,13 @@
v-model="pollColorLocal"
name="poll"
:label="$t('settings.background')"
- :fallback="previewTheme.colors.poll"
+ :fallback="previewTheme.colors?.poll"
/>
<ColorInput
v-model="pollTextColorLocal"
name="pollText"
:label="$t('settings.text')"
- :fallback="previewTheme.colors.pollText"
+ :fallback="previewTheme.colors?.pollText"
/>
</div>
<div class="color-item">
@@ -647,7 +662,7 @@
v-model="iconColorLocal"
name="icon"
:label="$t('settings.style.advanced_colors.icons')"
- :fallback="previewTheme.colors.icon"
+ :fallback="previewTheme.colors?.icon"
/>
</div>
<div class="color-item">
@@ -656,20 +671,20 @@
v-model="highlightColorLocal"
name="highlight"
:label="$t('settings.background')"
- :fallback="previewTheme.colors.highlight"
+ :fallback="previewTheme.colors?.highlight"
/>
<ColorInput
v-model="highlightTextColorLocal"
name="highlightText"
:label="$t('settings.text')"
- :fallback="previewTheme.colors.highlightText"
+ :fallback="previewTheme.colors?.highlightText"
/>
<ContrastRatio :contrast="previewContrast.highlightText" />
<ColorInput
v-model="highlightLinkColorLocal"
name="highlightLink"
:label="$t('settings.links')"
- :fallback="previewTheme.colors.highlightLink"
+ :fallback="previewTheme.colors?.highlightLink"
/>
<ContrastRatio :contrast="previewContrast.highlightLink" />
</div>
@@ -679,26 +694,26 @@
v-model="popoverColorLocal"
name="popover"
:label="$t('settings.background')"
- :fallback="previewTheme.colors.popover"
+ :fallback="previewTheme.colors?.popover"
/>
<OpacityInput
v-model="popoverOpacityLocal"
name="popoverOpacity"
- :fallback="previewTheme.opacity.popover"
+ :fallback="previewTheme.opacity?.popover"
:disabled="popoverOpacityLocal === 'transparent'"
/>
<ColorInput
v-model="popoverTextColorLocal"
name="popoverText"
:label="$t('settings.text')"
- :fallback="previewTheme.colors.popoverText"
+ :fallback="previewTheme.colors?.popoverText"
/>
<ContrastRatio :contrast="previewContrast.popoverText" />
<ColorInput
v-model="popoverLinkColorLocal"
name="popoverLink"
:label="$t('settings.links')"
- :fallback="previewTheme.colors.popoverLink"
+ :fallback="previewTheme.colors?.popoverLink"
/>
<ContrastRatio :contrast="previewContrast.popoverLink" />
</div>
@@ -708,20 +723,20 @@
v-model="selectedPostColorLocal"
name="selectedPost"
:label="$t('settings.background')"
- :fallback="previewTheme.colors.selectedPost"
+ :fallback="previewTheme.colors?.selectedPost"
/>
<ColorInput
v-model="selectedPostTextColorLocal"
name="selectedPostText"
:label="$t('settings.text')"
- :fallback="previewTheme.colors.selectedPostText"
+ :fallback="previewTheme.colors?.selectedPostText"
/>
<ContrastRatio :contrast="previewContrast.selectedPostText" />
<ColorInput
v-model="selectedPostLinkColorLocal"
name="selectedPostLink"
:label="$t('settings.links')"
- :fallback="previewTheme.colors.selectedPostLink"
+ :fallback="previewTheme.colors?.selectedPostLink"
/>
<ContrastRatio :contrast="previewContrast.selectedPostLink" />
</div>
@@ -731,20 +746,20 @@
v-model="selectedMenuColorLocal"
name="selectedMenu"
:label="$t('settings.background')"
- :fallback="previewTheme.colors.selectedMenu"
+ :fallback="previewTheme.colors?.selectedMenu"
/>
<ColorInput
v-model="selectedMenuTextColorLocal"
name="selectedMenuText"
:label="$t('settings.text')"
- :fallback="previewTheme.colors.selectedMenuText"
+ :fallback="previewTheme.colors?.selectedMenuText"
/>
<ContrastRatio :contrast="previewContrast.selectedMenuText" />
<ColorInput
v-model="selectedMenuLinkColorLocal"
name="selectedMenuLink"
:label="$t('settings.links')"
- :fallback="previewTheme.colors.selectedMenuLink"
+ :fallback="previewTheme.colors?.selectedMenuLink"
/>
<ContrastRatio :contrast="previewContrast.selectedMenuLink" />
</div>
@@ -753,57 +768,57 @@
<ColorInput
v-model="chatBgColorLocal"
name="chatBgColor"
- :fallback="previewTheme.colors.bg"
+ :fallback="previewTheme.colors?.bg"
:label="$t('settings.background')"
/>
<h5>{{ $t('settings.style.advanced_colors.chat.incoming') }}</h5>
<ColorInput
v-model="chatMessageIncomingBgColorLocal"
name="chatMessageIncomingBgColor"
- :fallback="previewTheme.colors.bg"
+ :fallback="previewTheme.colors?.bg"
:label="$t('settings.background')"
/>
<ColorInput
v-model="chatMessageIncomingTextColorLocal"
name="chatMessageIncomingTextColor"
- :fallback="previewTheme.colors.text"
+ :fallback="previewTheme.colors?.text"
:label="$t('settings.text')"
/>
<ColorInput
v-model="chatMessageIncomingLinkColorLocal"
name="chatMessageIncomingLinkColor"
- :fallback="previewTheme.colors.link"
+ :fallback="previewTheme.colors?.link"
:label="$t('settings.links')"
/>
<ColorInput
v-model="chatMessageIncomingBorderColorLocal"
name="chatMessageIncomingBorderLinkColor"
- :fallback="previewTheme.colors.fg"
+ :fallback="previewTheme.colors?.fg"
:label="$t('settings.style.advanced_colors.chat.border')"
/>
<h5>{{ $t('settings.style.advanced_colors.chat.outgoing') }}</h5>
<ColorInput
v-model="chatMessageOutgoingBgColorLocal"
name="chatMessageOutgoingBgColor"
- :fallback="previewTheme.colors.bg"
+ :fallback="previewTheme.colors?.bg"
:label="$t('settings.background')"
/>
<ColorInput
v-model="chatMessageOutgoingTextColorLocal"
name="chatMessageOutgoingTextColor"
- :fallback="previewTheme.colors.text"
+ :fallback="previewTheme.colors?.text"
:label="$t('settings.text')"
/>
<ColorInput
v-model="chatMessageOutgoingLinkColorLocal"
name="chatMessageOutgoingLinkColor"
- :fallback="previewTheme.colors.link"
+ :fallback="previewTheme.colors?.link"
:label="$t('settings.links')"
/>
<ColorInput
v-model="chatMessageOutgoingBorderColorLocal"
name="chatMessageOutgoingBorderLinkColor"
- :fallback="previewTheme.colors.bg"
+ :fallback="previewTheme.colors?.bg"
:label="$t('settings.style.advanced_colors.chat.border')"
/>
</div>
@@ -826,7 +841,7 @@
v-model="btnRadiusLocal"
name="btnRadius"
:label="$t('settings.btnRadius')"
- :fallback="previewTheme.radii.btn"
+ :fallback="previewTheme.radii?.btn"
max="16"
hard-min="0"
/>
@@ -834,7 +849,7 @@
v-model="inputRadiusLocal"
name="inputRadius"
:label="$t('settings.inputRadius')"
- :fallback="previewTheme.radii.input"
+ :fallback="previewTheme.radii?.input"
max="9"
hard-min="0"
/>
@@ -842,7 +857,7 @@
v-model="checkboxRadiusLocal"
name="checkboxRadius"
:label="$t('settings.checkboxRadius')"
- :fallback="previewTheme.radii.checkbox"
+ :fallback="previewTheme.radii?.checkbox"
max="16"
hard-min="0"
/>
@@ -850,7 +865,7 @@
v-model="panelRadiusLocal"
name="panelRadius"
:label="$t('settings.panelRadius')"
- :fallback="previewTheme.radii.panel"
+ :fallback="previewTheme.radii?.panel"
max="50"
hard-min="0"
/>
@@ -858,7 +873,7 @@
v-model="avatarRadiusLocal"
name="avatarRadius"
:label="$t('settings.avatarRadius')"
- :fallback="previewTheme.radii.avatar"
+ :fallback="previewTheme.radii?.avatar"
max="28"
hard-min="0"
/>
@@ -866,7 +881,7 @@
v-model="avatarAltRadiusLocal"
name="avatarAltRadius"
:label="$t('settings.avatarAltRadius')"
- :fallback="previewTheme.radii.avatarAlt"
+ :fallback="previewTheme.radii?.avatarAlt"
max="28"
hard-min="0"
/>
@@ -874,7 +889,7 @@
v-model="attachmentRadiusLocal"
name="attachmentRadius"
:label="$t('settings.attachmentRadius')"
- :fallback="previewTheme.radii.attachment"
+ :fallback="previewTheme.radii?.attachment"
max="50"
hard-min="0"
/>
@@ -882,7 +897,7 @@
v-model="tooltipRadiusLocal"
name="tooltipRadius"
:label="$t('settings.tooltipRadius')"
- :fallback="previewTheme.radii.tooltip"
+ :fallback="previewTheme.radii?.tooltip"
max="50"
hard-min="0"
/>
@@ -890,7 +905,7 @@
v-model="chatMessageRadiusLocal"
name="chatMessageRadius"
:label="$t('settings.chatMessageRadius')"
- :fallback="previewTheme.radii.chatMessage || 2"
+ :fallback="previewTheme.radii?.chatMessage || 2"
max="50"
hard-min="0"
/>
@@ -996,26 +1011,26 @@
v-model="fontsLocal.interface"
name="ui"
:label="$t('settings.style.fonts.components.interface')"
- :fallback="previewTheme.fonts.interface"
+ :fallback="previewTheme.fonts?.interface"
no-inherit="1"
/>
<FontControl
v-model="fontsLocal.input"
name="input"
:label="$t('settings.style.fonts.components.input')"
- :fallback="previewTheme.fonts.input"
+ :fallback="previewTheme.fonts?.input"
/>
<FontControl
v-model="fontsLocal.post"
name="post"
:label="$t('settings.style.fonts.components.post')"
- :fallback="previewTheme.fonts.post"
+ :fallback="previewTheme.fonts?.post"
/>
<FontControl
v-model="fontsLocal.postCode"
name="postCode"
:label="$t('settings.style.fonts.components.postCode')"
- :fallback="previewTheme.fonts.postCode"
+ :fallback="previewTheme.fonts?.postCode"
/>
</div>
</tab-switcher>
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -745,6 +745,8 @@
"enable_web_push_always_show_tip": "Some browsers (Chromium, Chrome) require that push messages always result in a notification, otherwise generic 'Website was updated in background' is shown, enable this to prevent this notification from showing, as Chrome seem to hide push notifications if tab is in focus. Can result in showing duplicate notifications on other browsers.",
"more_settings": "More settings",
"style": {
+ "themes2_outdated": "Editor for Themes V2 is no longer supported and presented here for sake of legacy.",
+ "update_preview": "Update preview",
"themes3": {
"define": "Override",
"font": {
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
@@ -61,7 +61,11 @@ export const generateTheme = async (input, callbacks, debug) => {
}
// 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(), debug)
+ const themes3 = init({
+ extraRules,
+ ultimateBackgroundColor: extraRules[0].directives['--bg'].split('|')[1].trim(),
+ debug
+ })
console.log('DEBUG 2 IS', debug)
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
@@ -149,7 +149,13 @@ const ruleToSelector = genericRuleToSelector(components)
export const getEngineChecksum = () => engineChecksum
-export const init = (extraRuleset, ultimateBackgroundColor, debug) => {
+export const init = ({
+ extraRuleset,
+ ultimateBackgroundColor,
+ debug = false,
+ liteMode = false,
+ rootComponentName = 'Root'
+}) => {
const staticVars = {}
const stacked = {}
const computed = {}
@@ -451,7 +457,7 @@ export const init = (extraRuleset, ultimateBackgroundColor, debug) => {
}
const t0 = performance.now()
- const combinations = processInnerComponent(components.Root)
+ const combinations = processInnerComponent(components[rootComponentName] ?? components.Root)
const t1 = performance.now()
console.debug('Tree traveral took ' + (t1 - t0) + ' ms')
