テーマリストでカラー

mei23 · Dec 17, 2020 · a3a4a02 · a3a4a02
1 parent 98773c7
commit a3a4a02
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/client/app/common/views/components/settings/theme.vue b/src/client/app/common/views/components/settings/theme.vue
@@ -25,10 +25,10 @@
 			<ui-select v-model="light" :placeholder="$t('light-theme')">
 				<template #label><fa :icon="faSun"/> {{ $t('light-theme') }}</template>
 				<optgroup :label="$t('light-themes')">
-					<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+					<option v-for="x in lightThemes" :value="x.id" :key="x.id" :style="getStyle(x)">{{ x.name }}</option>
 				</optgroup>
 				<optgroup :label="$t('dark-themes')">
-					<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+					<option v-for="x in darkThemes" :value="x.id" :key="x.id" :style="getStyle(x)">{{ x.name }}</option>
 				</optgroup>
 			</ui-select>
 		</label>
@@ -37,10 +37,10 @@
 			<ui-select v-model="dark" :placeholder="$t('dark-theme')">
 				<template #label><fa :icon="faMoon"/> {{ $t('dark-theme') }}</template>
 				<optgroup :label="$t('dark-themes')">
-					<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+					<option v-for="x in darkThemes" :value="x.id" :key="x.id" :style="getStyle(x)">{{ x.name }}</option>
 				</optgroup>
 				<optgroup :label="$t('light-themes')">
-					<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+					<option v-for="x in lightThemes" :value="x.id" :key="x.id" :style="getStyle(x)">{{ x.name }}</option>
 				</optgroup>
 			</ui-select>
 		</label>
@@ -353,6 +353,14 @@ export default Vue.extend({
 				type: 'success',
 				text: this.$t('saved')
 			});
+		},
+
+		getStyle(theme: Theme) {
+			if (theme.vars && theme.vars.primary && theme.vars.secondary) {
+				return `color: ${theme.vars.primary}; background-color: ${theme.vars.secondary}`;
+			} else {
+				return ''
+			}
 		}
 	}
 });

diff --git a/src/client/themes/future.json5 b/src/client/themes/future.json5
@@ -13,7 +13,7 @@
 		c2: 'rgb(99, 197, 210)',
 		c4: 'rgb(253, 254, 214)',
 		c3: 'rgb(204, 254, 253)',
-		primary: '$c1',
+		primary: 'rgb(255, 105, 78)',
 		secondary: '#191919',
 		text: '$c3',
 	},