From fee953b0dfe095a5a2ab513d87beb0a6389a11c0 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 9 Jan 2021 22:02:26 +0900
Subject: [PATCH] Improve theme editor
---
src/client/pages/theme-editor.vue | 17 ++++++++++-------
1 file changed, 10 insertions(+), 7 deletions(-)
diff --git a/src/client/pages/theme-editor.vue b/src/client/pages/theme-editor.vue
index 02a21d9d67..6cc6b560c1 100644
--- a/src/client/pages/theme-editor.vue
+++ b/src/client/pages/theme-editor.vue
@@ -4,12 +4,12 @@
<div class="_formLabel">{{ $ts.backgroundColor }}</div>
<div class="_formPanel colors">
<div class="row">
- <button v-for="color in bgColors.filter(x => x.kind === 'light')" :key="color.color" @click="bgColor = color" class="color _button" :class="{ active: bgColor.color === color.color }">
+ <button v-for="color in bgColors.filter(x => x.kind === 'light')" :key="color.color" @click="bgColor = color" class="color _button" :class="{ active: bgColor?.color === color.color }">
<div class="preview" :style="{ background: color.forPreview }"></div>
</button>
</div>
<div class="row">
- <button v-for="color in bgColors.filter(x => x.kind === 'dark')" :key="color.color" @click="bgColor = color" class="color _button" :class="{ active: bgColor.color === color.color }">
+ <button v-for="color in bgColors.filter(x => x.kind === 'dark')" :key="color.color" @click="bgColor = color" class="color _button" :class="{ active: bgColor?.color === color.color }">
<div class="preview" :style="{ background: color.forPreview }"></div>
</button>
</div>
@@ -30,7 +30,7 @@
<div class="_formPanel colors">
<div class="row">
<button v-for="color in fgColors" :key="color" @click="fgColor = color" class="color char _button" :class="{ active: fgColor === color }">
- <div class="preview" :style="{ color: color.forPreview ? color.forPreview : bgColor.kind === 'light' ? '#5f5f5f' : '#dadada' }">A</div>
+ <div class="preview" :style="{ color: color.forPreview ? color.forPreview : bgColor?.kind === 'light' ? '#5f5f5f' : '#dadada' }">A</div>
</button>
</div>
</div>
@@ -112,18 +112,17 @@ export default defineComponent({
created() {
const currentBgColor = getComputedStyle(document.documentElement).getPropertyValue('--bg');
const matchedBgColor = this.bgColors.find(x => tinycolor(x.color).toRgbString() === tinycolor(currentBgColor).toRgbString());
- this.bgColor = matchedBgColor ? matchedBgColor : this.bgColors[0];
+ if (matchedBgColor) this.bgColor = matchedBgColor;
const currentAccentColor = getComputedStyle(document.documentElement).getPropertyValue('--accent');
const matchedAccentColor = this.accentColors.find(x => tinycolor(x).toRgbString() === tinycolor(currentAccentColor).toRgbString());
- this.accentColor = matchedAccentColor ? matchedAccentColor : this.accentColors[0];
+ if (matchedAccentColor) this.accentColor = matchedAccentColor;
const currentFgColor = getComputedStyle(document.documentElement).getPropertyValue('--fg');
const matchedFgColor = this.fgColors.find(x => [tinycolor(x.forLight).toRgbString(), tinycolor(x.forDark).toRgbString()].includes(tinycolor(currentFgColor).toRgbString()));
- this.fgColor = matchedFgColor ? matchedFgColor : this.fgColors[0];
+ if (matchedFgColor) this.fgColor = matchedFgColor;
this.$watch('bgColor', this.apply);
this.$watch('accentColor', this.apply);
this.$watch('fgColor', this.apply);
- this.apply();
},
methods: {
@@ -141,6 +140,10 @@ export default defineComponent({
},
apply() {
+ if (this.bgColor == null) this.bgColor = this.bgColors[0];
+ if (this.accentColor == null) this.accentColor = this.accentColors[0];
+ if (this.fgColor == null) this.fgColor = this.fgColors[0];
+
const theme = this.convert();
applyTheme(theme, true);