From 567cedc7cc82057d47e2891b8f19e32f2d584d7b Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 8 Oct 2018 15:23:10 +0900
Subject: Improve usability

---
 src/client/app/common/views/components/theme.vue | 24 +++++++++++++++++++++---
 src/client/theme/dark.json5                      |  1 +
 src/client/theme/light.json5                     |  1 +
 3 files changed, 23 insertions(+), 3 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/theme.vue b/src/client/app/common/views/components/theme.vue
index 4b0e6da24c..9eda3c5796 100644
--- a/src/client/app/common/views/components/theme.vue
+++ b/src/client/app/common/views/components/theme.vue
@@ -3,14 +3,24 @@
 	<label>
 		<span>%i18n:@light-theme%</span>
 		<ui-select v-model="light" placeholder="%i18n:@light-theme%">
-			<option v-for="x in themes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			<optgroup label="%i18n:@light-themes%">
+				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+			<optgroup label="%i18n:@dark-themes%">
+				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
 		</ui-select>
 	</label>
 
 	<label>
 		<span>%i18n:@dark-theme%</span>
 		<ui-select v-model="dark" placeholder="%i18n:@dark-theme%">
-			<option v-for="x in themes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			<optgroup label="%i18n:@dark-themes%">
+				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+			<optgroup label="%i18n:@light-themes%">
+				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
 		</ui-select>
 	</label>
 
@@ -120,7 +130,15 @@ export default Vue.extend({
 
 	computed: {
 		themes(): Theme[] {
-			return this.$store.state.device.themes.concat(builtinThemes);
+			return builtinThemes.concat(this.$store.state.device.themes);
+		},
+
+		darkThemes(): Theme[] {
+			return this.themes.filter(t => t.base == 'dark' || t.kind == 'dark');
+		},
+
+		lightThemes(): Theme[] {
+			return this.themes.filter(t => t.base == 'light' || t.kind == 'light');
 		},
 
 		installedThemes(): Theme[] {
diff --git a/src/client/theme/dark.json5 b/src/client/theme/dark.json5
index f993e5ef1f..4fa38a3ae0 100644
--- a/src/client/theme/dark.json5
+++ b/src/client/theme/dark.json5
@@ -4,6 +4,7 @@
 	name: 'Dark',
 	author: 'syuilo',
 	desc: 'Default dark theme',
+	kind: 'dark',
 
 	vars: {
 		primary: '#fb4e4e',
diff --git a/src/client/theme/light.json5 b/src/client/theme/light.json5
index db851b66c4..9f17a63dda 100644
--- a/src/client/theme/light.json5
+++ b/src/client/theme/light.json5
@@ -4,6 +4,7 @@
 	name: 'Light',
 	author: 'syuilo',
 	desc: 'Default light theme',
+	kind: 'light',
 
 	vars: {
 		primary: '#fb4e4e',
-- 
cgit v1.2.3-freya