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

---
 locales/ja-JP.yml                             |  2 ++
 .../app/common/views/components/theme.vue     | 24 ++++++++++++++++---
 src/client/theme/dark.json5                   |  1 +
 src/client/theme/light.json5                  |  1 +
 4 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 99c865e2b..f9cc57d37 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -288,6 +288,8 @@ common/views/components/media-banner.vue:
 common/views/components/theme.vue:
   light-theme: "非ダークモード時に使用するテーマ"
   dark-theme: "ダークモード時に使用するテーマ"
+  light-themes: "明るいテーマ"
+  dark-themes: "暗いテーマ"
   install-a-theme: "テーマのインストール"
   theme-code: "テーマコード"
   install: "インストール"
diff --git a/src/client/app/common/views/components/theme.vue b/src/client/app/common/views/components/theme.vue
index 4b0e6da24..9eda3c579 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 f993e5ef1..4fa38a3ae 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 db851b66c..9f17a63dd 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',