From 2b07b3a873e5693556b56dd310944bf744f7d103 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 26 Sep 2018 18:59:37 +0900
Subject: [PATCH 01/72] wip

---
 src/client/app/app.vue                 |  7 ++-
 src/client/app/boot.js                 | 17 ++++---
 src/client/app/common/scripts/theme.ts | 63 ++++++++++++++++++++++++++
 src/client/app/desktop/style.styl      | 27 +++--------
 src/client/app/init.ts                 | 39 ----------------
 src/client/theme/dark.json             | 10 ++++
 src/client/theme/light.json            | 10 ++++
 7 files changed, 103 insertions(+), 70 deletions(-)
 create mode 100644 src/client/app/common/scripts/theme.ts
 create mode 100644 src/client/theme/dark.json
 create mode 100644 src/client/theme/light.json

diff --git a/src/client/app/app.vue b/src/client/app/app.vue
index e639c9f9ac..d8cd4f0796 100644
--- a/src/client/app/app.vue
+++ b/src/client/app/app.vue
@@ -5,6 +5,8 @@
 <script lang="ts">
 import Vue from 'vue';
 import { url, lang } from './config';
+import applyTheme from './common/scripts/theme';
+import darkTheme from '../theme/dark.json';
 
 export default Vue.extend({
 	computed: {
@@ -22,10 +24,7 @@ export default Vue.extend({
 		},
 
 		dark() {
-			this.$store.commit('device/set', {
-				key: 'darkmode',
-				value: !this.$store.state.device.darkmode
-			});
+			applyTheme(darkTheme);
 		}
 	}
 });
diff --git a/src/client/app/boot.js b/src/client/app/boot.js
index 25aa26dd19..e122e0423a 100644
--- a/src/client/app/boot.js
+++ b/src/client/app/boot.js
@@ -20,6 +20,16 @@
 
 	const langs = LANGS;
 
+	//#region Apply theme
+	const theme = localStorage.getItem('theme');
+	if (theme) {
+		Object.entries(JSON.parse(theme)).forEach(([k, v]) => {
+			if (k == 'meta') return;
+			document.documentElement.style.setProperty(`--${k}`, v.toString());
+		});
+	}
+	//#endregion
+
 	//#region Load settings
 	let settings = null;
 	const vuex = localStorage.getItem('vuex');
@@ -84,13 +94,6 @@
 		app = isMobile ? 'mobile' : 'desktop';
 	}
 
-	// Dark/Light
-	if (settings) {
-		if (settings.device.darkmode) {
-			document.documentElement.setAttribute('data-darkmode', 'true');
-		}
-	}
-
 	// Script version
 	const ver = localStorage.getItem('v') || VERSION;
 
diff --git a/src/client/app/common/scripts/theme.ts b/src/client/app/common/scripts/theme.ts
new file mode 100644
index 0000000000..bc70223519
--- /dev/null
+++ b/src/client/app/common/scripts/theme.ts
@@ -0,0 +1,63 @@
+export default function(theme: { [key: string]: string }) {
+	const props = compile(theme);
+
+	Object.entries(props).forEach(([k, v]) => {
+		if (k == 'meta') return;
+		document.documentElement.style.setProperty(`--${k}`, v.toString());
+	});
+}
+
+function compile(theme: { [key: string]: string }): { [key: string]: string } {
+	function getRgba(code: string): number[] {
+		// ref
+		if (code[0] == '@') {
+			return getRgba(theme[code.substr(1)]);
+		}
+
+		let m;
+
+		//#region #RGB
+		m = code.match(/^#([0-9a-f]{3})$/i)[1];
+		if (m) {
+			return [
+				parseInt(m.charAt(0), 16) * 0x11,
+				parseInt(m.charAt(1), 16) * 0x11,
+				parseInt(m.charAt(2), 16) * 0x11,
+				255
+			];
+		}
+		//#endregion
+
+		//#region #RRGGBB
+		m = code.match(/^#([0-9a-f]{6})$/i)[1];
+		if (m) {
+			return [
+				parseInt(m.substr(0, 2), 16),
+				parseInt(m.substr(2, 2), 16),
+				parseInt(m.substr(4, 2), 16),
+				255
+			];
+		}
+		//#endregion
+
+		return [0, 0, 0, 255];
+	}
+
+	const props = {};
+
+	Object.entries(theme).forEach(([k, v]) => {
+		if (k == 'meta') return;
+		const [r, g, b, a] = getRgba(v);
+		props[k] = genValue(r, g, b, a);
+		props[`${k}-r`] = r;
+		props[`${k}-g`] = g;
+		props[`${k}-b`] = b;
+		props[`${k}-a`] = a;
+	});
+
+	return props;
+}
+
+function genValue(r: number, g: number, b: number, a: number): string {
+	return a != 255 ? `rgba(${r}, ${g}, ${b}, ${a})` : `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
+}
diff --git a/src/client/app/desktop/style.styl b/src/client/app/desktop/style.styl
index 3cd36482e4..626671fd25 100644
--- a/src/client/app/desktop/style.styl
+++ b/src/client/app/desktop/style.styl
@@ -11,34 +11,21 @@
 
 html
 	height 100%
-	background #f7f7f7
+	background var(--bg)
 
 	&, *
 		&::-webkit-scrollbar
 			width 6px
 			height 6px
 
+		&::-webkit-scrollbar-track
+			background var(--scrollbarTrack)
+
 		&::-webkit-scrollbar-thumb
-			background rgba(0, 0, 0, 0.2)
+			background var(--scrollbarHandle)
 
 			&:hover
-				background rgba(0, 0, 0, 0.4)
+				background var(--scrollbarHandleHover)
 
 			&:active
-				background $theme-color
-
-	&[data-darkmode]
-		background #191B22
-
-		&, *
-			&::-webkit-scrollbar-track
-				background-color #282C37
-
-			&::-webkit-scrollbar-thumb
-				background-color #454954
-
-				&:hover
-					background-color #535660
-
-				&:active
-					background-color $theme-color
+				background var(--primary)
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index 4e1d1b70c7..7468484b35 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -86,45 +86,6 @@ export default (callback: (launch: (router: VueRouter, api?: (os: MiOS) => API)
 		const launch = (router: VueRouter, api?: (os: MiOS) => API) => {
 			os.apis = api ? api(os) : null;
 
-			//#region Dark/Light
-			Vue.mixin({
-				data() {
-					return {
-						_unwatchDarkmode_: null
-					};
-				},
-				mounted() {
-					const apply = v => {
-						if (this.$el.setAttribute == null) return;
-						if (v) {
-							this.$el.setAttribute('data-darkmode', 'true');
-						} else {
-							this.$el.removeAttribute('data-darkmode');
-						}
-					};
-
-					apply(os.store.state.device.darkmode);
-
-					this._unwatchDarkmode_ = os.store.watch(s => {
-						return s.device.darkmode;
-					}, apply);
-				},
-				beforeDestroy() {
-					this._unwatchDarkmode_();
-				}
-			});
-
-			os.store.watch(s => {
-				return s.device.darkmode;
-			}, v => {
-				if (v) {
-					document.documentElement.setAttribute('data-darkmode', 'true');
-				} else {
-					document.documentElement.removeAttribute('data-darkmode');
-				}
-			});
-			//#endregion
-
 			//#region shadow
 			const shadow = '0 3px 8px rgba(0, 0, 0, 0.2)';
 			if (os.store.state.settings.useShadow) document.documentElement.style.setProperty('--shadow', shadow);
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
new file mode 100644
index 0000000000..4ea0a1a649
--- /dev/null
+++ b/src/client/theme/dark.json
@@ -0,0 +1,10 @@
+{
+	"meta": {
+		"name": "Dark"
+	},
+	"primary": "#fb4e4e",
+	"bg": "#191B22",
+	"scrollbarTrack": "#282C37",
+	"scrollbarHandle": "#454954",
+	"scrollbarHandleHover": "#535660"
+}
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
new file mode 100644
index 0000000000..00a74a53c5
--- /dev/null
+++ b/src/client/theme/light.json
@@ -0,0 +1,10 @@
+{
+	"meta": {
+		"name": "Light"
+	},
+	"primary": "#fb4e4e",
+	"bg": "#f7f7f7",
+	"scrollbarTrack": "#fff",
+	"scrollbarHandle": "#00000033",
+	"scrollbarHandleHover": "#00000066"
+}

From d2d3f7810eaa319fa562377436ad6c70e4736c06 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 26 Sep 2018 19:14:11 +0900
Subject: [PATCH 02/72] wip

---
 src/client/app/app.vue                 |  2 +-
 src/client/app/common/scripts/theme.ts | 18 ++++++++++--------
 src/client/app/init.ts                 |  8 +++++++-
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/client/app/app.vue b/src/client/app/app.vue
index d8cd4f0796..bb8377c237 100644
--- a/src/client/app/app.vue
+++ b/src/client/app/app.vue
@@ -6,7 +6,7 @@
 import Vue from 'vue';
 import { url, lang } from './config';
 import applyTheme from './common/scripts/theme';
-import darkTheme from '../theme/dark.json';
+const darkTheme = require('../theme/dark');
 
 export default Vue.extend({
 	computed: {
diff --git a/src/client/app/common/scripts/theme.ts b/src/client/app/common/scripts/theme.ts
index bc70223519..7fbac7f574 100644
--- a/src/client/app/common/scripts/theme.ts
+++ b/src/client/app/common/scripts/theme.ts
@@ -5,6 +5,8 @@ export default function(theme: { [key: string]: string }) {
 		if (k == 'meta') return;
 		document.documentElement.style.setProperty(`--${k}`, v.toString());
 	});
+
+	localStorage.setItem('theme', JSON.stringify(props));
 }
 
 function compile(theme: { [key: string]: string }): { [key: string]: string } {
@@ -17,24 +19,24 @@ function compile(theme: { [key: string]: string }): { [key: string]: string } {
 		let m;
 
 		//#region #RGB
-		m = code.match(/^#([0-9a-f]{3})$/i)[1];
+		m = code.match(/^#([0-9a-f]{3})$/i);
 		if (m) {
 			return [
-				parseInt(m.charAt(0), 16) * 0x11,
-				parseInt(m.charAt(1), 16) * 0x11,
-				parseInt(m.charAt(2), 16) * 0x11,
+				parseInt(m[1].charAt(0), 16) * 0x11,
+				parseInt(m[1].charAt(1), 16) * 0x11,
+				parseInt(m[1].charAt(2), 16) * 0x11,
 				255
 			];
 		}
 		//#endregion
 
 		//#region #RRGGBB
-		m = code.match(/^#([0-9a-f]{6})$/i)[1];
+		m = code.match(/^#([0-9a-f]{6})$/i);
 		if (m) {
 			return [
-				parseInt(m.substr(0, 2), 16),
-				parseInt(m.substr(2, 2), 16),
-				parseInt(m.substr(4, 2), 16),
+				parseInt(m[1].substr(0, 2), 16),
+				parseInt(m[1].substr(2, 2), 16),
+				parseInt(m[1].substr(4, 2), 16),
 				255
 			];
 		}
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index 7468484b35..8d430ad7ff 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -8,12 +8,18 @@ import VueRouter from 'vue-router';
 import * as TreeView from 'vue-json-tree-view';
 import VAnimateCss from 'v-animate-css';
 import VModal from 'vue-js-modal';
-import VueHotkey from './common/hotkey';
 
+import VueHotkey from './common/hotkey';
 import App from './app.vue';
 import checkForUpdate from './common/scripts/check-for-update';
 import MiOS, { API } from './mios';
 import { version, codename, lang } from './config';
+import applyTheme from './common/scripts/theme';
+const defaultTheme = require('../theme/light.json');
+
+if (localStorage.getItem('theme') == null) {
+	applyTheme(defaultTheme);
+}
 
 Vue.use(Vuex);
 Vue.use(VueRouter);

From 904114740b2f87743c332e029a4c6817ebb9e17d Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 26 Sep 2018 20:19:35 +0900
Subject: [PATCH 03/72] wip

---
 package.json                                  |  2 +
 src/client/app/app.styl                       |  8 +-
 src/client/app/common/scripts/theme.ts        | 67 +++++++---------
 .../common/views/components/autocomplete.vue  |  6 +-
 .../views/components/connect-failed.vue       | 12 +--
 .../app/common/views/components/forkit.vue    |  6 +-
 .../components/games/reversi/reversi.game.vue | 10 +--
 .../games/reversi/reversi.index.vue           |  4 +-
 .../components/games/reversi/reversi.room.vue |  4 +-
 .../components/games/reversi/reversi.vue      |  2 +-
 .../app/common/views/components/menu.vue      | 10 +--
 .../views/components/messaging-room.form.vue  | 10 +--
 .../components/messaging-room.message.vue     |  4 +-
 .../views/components/messaging-room.vue       | 10 +--
 .../app/common/views/components/messaging.vue | 10 +--
 .../common/views/components/note-header.vue   |  2 +-
 .../common/views/components/poll-editor.vue   | 22 ++---
 .../app/common/views/components/poll.vue      |  4 +-
 .../views/components/reaction-picker.vue      |  6 +-
 .../app/common/views/components/signin.vue    |  2 +-
 .../app/common/views/components/signup.vue    |  2 +-
 .../app/common/views/components/switch.vue    | 16 ++--
 .../app/common/views/components/ui/button.vue | 16 ++--
 .../app/common/views/components/ui/card.vue   |  2 +-
 .../app/common/views/components/ui/form.vue   |  2 +-
 .../views/components/ui/form/button.vue       | 28 +++----
 .../common/views/components/ui/form/radio.vue |  8 +-
 .../app/common/views/components/ui/input.vue  |  6 +-
 .../app/common/views/components/ui/radio.vue  |  6 +-
 .../app/common/views/components/ui/select.vue |  6 +-
 .../app/common/views/components/ui/switch.vue |  8 +-
 .../common/views/components/ui/textarea.vue   |  6 +-
 .../app/common/views/components/uploader.vue  | 30 +++----
 .../views/components/visibility-chooser.vue   |  6 +-
 src/client/app/common/views/pages/follow.vue  | 22 ++---
 .../app/common/views/widgets/analog-clock.vue |  2 +-
 .../app/common/views/widgets/calendar.vue     |  4 +-
 src/client/app/common/views/widgets/memo.vue  | 10 +--
 src/client/app/desktop/ui.styl                | 36 ++++-----
 .../app/desktop/views/components/calendar.vue | 10 +--
 .../app/desktop/views/components/charts.vue   |  4 +-
 .../choose-file-from-drive-window.vue         | 32 ++++----
 .../choose-folder-from-drive-window.vue       | 20 ++---
 .../views/components/context-menu.menu.vue    | 12 +--
 .../desktop/views/components/crop-window.vue  | 24 +++---
 .../app/desktop/views/components/dialog.vue   | 10 +--
 .../desktop/views/components/drive.file.vue   | 12 +--
 .../desktop/views/components/drive.folder.vue | 14 ++--
 .../app/desktop/views/components/drive.vue    |  8 +-
 .../views/components/follow-button.vue        | 18 ++---
 .../app/desktop/views/components/home.vue     | 10 +--
 .../desktop/views/components/input-dialog.vue | 30 +++----
 .../desktop/views/components/note-detail.vue  |  2 +-
 .../desktop/views/components/notes.note.vue   |  8 +-
 .../app/desktop/views/components/notes.vue    |  4 +-
 .../desktop/views/components/post-form.vue    | 80 +++++++++----------
 .../views/components/progress-dialog.vue      | 22 ++---
 .../desktop/views/components/renote-form.vue  |  4 +-
 .../app/desktop/views/components/settings.vue |  4 +-
 .../views/components/timeline.core.vue        |  2 +-
 .../app/desktop/views/components/timeline.vue | 12 +--
 .../views/components/ui.header.account.vue    | 12 +--
 .../views/components/ui.header.nav.vue        |  6 +-
 .../components/ui.header.notifications.vue    |  4 +-
 .../views/components/ui.header.post.vue       | 10 +--
 .../views/components/ui.header.search.vue     |  4 +-
 .../desktop/views/components/user-preview.vue |  4 +-
 .../desktop/views/components/users-list.vue   |  6 +-
 .../app/desktop/views/components/window.vue   |  6 +-
 .../views/pages/admin/admin.announcements.vue |  2 +-
 .../views/pages/admin/admin.dashboard.vue     |  4 +-
 .../views/pages/admin/admin.hashtags.vue      |  2 +-
 .../views/pages/admin/admin.suspend-user.vue  |  2 +-
 .../pages/admin/admin.unsuspend-user.vue      |  2 +-
 .../views/pages/admin/admin.unverify-user.vue |  2 +-
 .../views/pages/admin/admin.verify-user.vue   |  2 +-
 .../app/desktop/views/pages/admin/admin.vue   |  4 +-
 .../desktop/views/pages/deck/deck.column.vue  |  8 +-
 .../desktop/views/pages/deck/deck.note.vue    |  8 +-
 .../desktop/views/pages/deck/deck.notes.vue   |  2 +-
 .../app/desktop/views/pages/deck/deck.vue     |  2 +-
 .../views/pages/deck/deck.widgets-column.vue  |  2 +-
 .../app/desktop/views/pages/selectdrive.vue   | 32 ++++----
 .../app/desktop/views/pages/stats/stats.vue   |  4 +-
 .../desktop/views/pages/user/user.header.vue  |  4 +-
 .../views/pages/user/user.timeline.vue        |  6 +-
 .../app/desktop/views/pages/welcome.vue       |  6 +-
 .../app/desktop/views/widgets/post-form.vue   | 10 +--
 .../app/mobile/views/components/dialog.vue    | 10 +--
 .../mobile/views/components/drive.file.vue    |  4 +-
 .../mobile/views/components/follow-button.vue | 22 ++---
 .../mobile/views/components/mute-button.vue   | 24 +++---
 .../mobile/views/components/note-detail.vue   |  4 +-
 .../app/mobile/views/components/note.vue      |  8 +-
 .../app/mobile/views/components/notes.vue     |  2 +-
 .../app/mobile/views/components/post-form.vue |  6 +-
 .../app/mobile/views/components/ui.header.vue |  6 +-
 .../app/mobile/views/components/ui.nav.vue    | 10 +--
 .../mobile/views/components/users-list.vue    |  6 +-
 .../app/mobile/views/pages/favorites.vue      |  2 +-
 src/client/app/mobile/views/pages/home.vue    | 12 +--
 .../app/mobile/views/pages/notifications.vue  |  2 +-
 .../views/pages/received-follow-requests.vue  |  2 +-
 .../app/mobile/views/pages/user-list.vue      |  2 +-
 .../app/mobile/views/pages/user-lists.vue     |  2 +-
 src/client/app/mobile/views/pages/user.vue    |  6 +-
 src/client/const.styl                         |  4 -
 src/client/style.styl                         | 14 ++--
 src/client/theme/dark.json                    |  1 +
 src/client/theme/light.json                   |  1 +
 110 files changed, 529 insertions(+), 536 deletions(-)
 delete mode 100644 src/client/const.styl

diff --git a/package.json b/package.json
index 1b786d1a38..a3e3b56be4 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
 		"@types/single-line-log": "1.1.0",
 		"@types/speakeasy": "2.0.2",
 		"@types/systeminformation": "3.23.0",
+		"@types/tinycolor2": "1.4.1",
 		"@types/tmp": "0.0.33",
 		"@types/uuid": "3.4.4",
 		"@types/webpack": "4.4.12",
@@ -194,6 +195,7 @@
 		"systeminformation": "3.45.6",
 		"syuilo-password-strength": "0.0.1",
 		"textarea-caret": "3.1.0",
+		"tinycolor2": "1.4.1",
 		"tmp": "0.0.33",
 		"ts-loader": "4.4.1",
 		"ts-node": "7.0.1",
diff --git a/src/client/app/app.styl b/src/client/app/app.styl
index 3911f83a61..2f0095944c 100644
--- a/src/client/app/app.styl
+++ b/src/client/app/app.styl
@@ -27,7 +27,7 @@ body
 	z-index 65536
 
 	.bar
-		background $theme-color
+		background var(--primary)
 
 		position fixed
 		z-index 65537
@@ -44,7 +44,7 @@ body
 		right 0px
 		width 100px
 		height 100%
-		box-shadow 0 0 10px $theme-color, 0 0 5px $theme-color
+		box-shadow 0 0 10px var(--primary), 0 0 5px var(--primary)
 		opacity 1
 
 		transform rotate(3deg) translate(0px, -4px)
@@ -64,8 +64,8 @@ body
 		box-sizing border-box
 
 		border solid 2px transparent
-		border-top-color $theme-color
-		border-left-color $theme-color
+		border-top-color var(--primary)
+		border-left-color var(--primary)
 		border-radius 50%
 
 		animation progress-spinner 400ms linear infinite
diff --git a/src/client/app/common/scripts/theme.ts b/src/client/app/common/scripts/theme.ts
index 7fbac7f574..2cad547c01 100644
--- a/src/client/app/common/scripts/theme.ts
+++ b/src/client/app/common/scripts/theme.ts
@@ -1,3 +1,5 @@
+import * as tinycolor from 'tinycolor2';
+
 export default function(theme: { [key: string]: string }) {
 	const props = compile(theme);
 
@@ -10,56 +12,47 @@ export default function(theme: { [key: string]: string }) {
 }
 
 function compile(theme: { [key: string]: string }): { [key: string]: string } {
-	function getRgba(code: string): number[] {
+	function getColor(code: string): tinycolor.Instance {
 		// ref
 		if (code[0] == '@') {
-			return getRgba(theme[code.substr(1)]);
+			return getColor(theme[code.substr(1)]);
 		}
 
-		let m;
-
-		//#region #RGB
-		m = code.match(/^#([0-9a-f]{3})$/i);
-		if (m) {
-			return [
-				parseInt(m[1].charAt(0), 16) * 0x11,
-				parseInt(m[1].charAt(1), 16) * 0x11,
-				parseInt(m[1].charAt(2), 16) * 0x11,
-				255
-			];
-		}
-		//#endregion
-
-		//#region #RRGGBB
-		m = code.match(/^#([0-9a-f]{6})$/i);
-		if (m) {
-			return [
-				parseInt(m[1].substr(0, 2), 16),
-				parseInt(m[1].substr(2, 2), 16),
-				parseInt(m[1].substr(4, 2), 16),
-				255
-			];
-		}
-		//#endregion
-
-		return [0, 0, 0, 255];
+		return tinycolor(code);
 	}
 
 	const props = {};
 
 	Object.entries(theme).forEach(([k, v]) => {
 		if (k == 'meta') return;
-		const [r, g, b, a] = getRgba(v);
-		props[k] = genValue(r, g, b, a);
-		props[`${k}-r`] = r;
-		props[`${k}-g`] = g;
-		props[`${k}-b`] = b;
-		props[`${k}-a`] = a;
+		const c = getColor(v);
+		props[k] = genValue(c);
+		props[`${k}-r`] = c.toRgb().r;
+		props[`${k}-g`] = c.toRgb().g;
+		props[`${k}-b`] = c.toRgb().b;
+		props[`${k}-a`] = c.toRgb().a;
 	});
 
+	const primary = getColor(props['primary']);
+
+	for (let i = 1; i < 10; i++) {
+		const color = primary.clone().setAlpha(i / 10);
+		props['primaryAlpha0' + i] = genValue(color);
+	}
+
+	for (let i = 1; i < 100; i++) {
+		const color = primary.clone().lighten(i);
+		props['primaryLighten' + i] = genValue(color);
+	}
+
+	for (let i = 1; i < 100; i++) {
+		const color = primary.clone().darken(i);
+		props['primaryDarken' + i] = genValue(color);
+	}
+
 	return props;
 }
 
-function genValue(r: number, g: number, b: number, a: number): string {
-	return a != 255 ? `rgba(${r}, ${g}, ${b}, ${a})` : `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
+function genValue(c: tinycolor.Instance): string {
+	return c.toRgbString();
 }
diff --git a/src/client/app/common/views/components/autocomplete.vue b/src/client/app/common/views/components/autocomplete.vue
index ea05afd6dc..99a87520a4 100644
--- a/src/client/app/common/views/components/autocomplete.vue
+++ b/src/client/app/common/views/components/autocomplete.vue
@@ -259,7 +259,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	position fixed
@@ -302,13 +302,13 @@ root(isDark)
 				background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.1)
 
 			&[data-selected='true']
-				background $theme-color
+				background var(--primary)
 
 				&, *
 					color #fff !important
 
 			&:active
-				background darken($theme-color, 10%)
+				background var(--primaryDarken10)
 
 				&, *
 					color #fff !important
diff --git a/src/client/app/common/views/components/connect-failed.vue b/src/client/app/common/views/components/connect-failed.vue
index 0f686926b0..36cae05665 100644
--- a/src/client/app/common/views/components/connect-failed.vue
+++ b/src/client/app/common/views/components/connect-failed.vue
@@ -39,7 +39,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mk-connect-failed
 	width 100%
@@ -70,17 +70,17 @@ export default Vue.extend({
 		display block
 		margin 1em auto 0 auto
 		padding 8px 10px
-		color $theme-color-foreground
-		background $theme-color
+		color var(--primaryForeground)
+		background var(--primary)
 
 		&:focus
-			outline solid 3px rgba($theme-color, 0.3)
+			outline solid 3px var(--primaryAlpha03)
 
 		&:hover
-			background lighten($theme-color, 10%)
+			background var(--primaryLighten10)
 
 		&:active
-			background darken($theme-color, 10%)
+			background var(--primaryDarken10)
 
 	> .thanks
 		display block
diff --git a/src/client/app/common/views/components/forkit.vue b/src/client/app/common/views/components/forkit.vue
index de627181ef..b303b48b79 100644
--- a/src/client/app/common/views/components/forkit.vue
+++ b/src/client/app/common/views/components/forkit.vue
@@ -9,7 +9,7 @@
 </template>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .a
 	display block
@@ -18,8 +18,8 @@
 		display block
 		//fill #151513
 		//color #fff
-		fill $theme-color
-		color $theme-color-foreground
+		fill var(--primary)
+		color var(--primaryForeground)
 
 		.octo-arm
 			transform-origin 130px 106px
diff --git a/src/client/app/common/views/components/games/reversi/reversi.game.vue b/src/client/app/common/views/components/games/reversi/reversi.game.vue
index fea19d917e..bc230496a6 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.game.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.game.vue
@@ -304,7 +304,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	text-align center
@@ -399,14 +399,14 @@ root(isDark)
 							cursor pointer
 
 							&:hover
-								border-color darken($theme-color, 10%)
-								background $theme-color
+								border-color var(--primaryDarken10)
+								background var(--primary)
 
 							&:active
-								background darken($theme-color, 10%)
+								background var(--primaryDarken10)
 
 					&.prev
-						box-shadow 0 0 0 4px rgba($theme-color, 0.7)
+						box-shadow 0 0 0 4px var(--primaryAlpha07)
 
 					&.isEnded
 						border-color isDark ? #6a767f : #ddd
diff --git a/src/client/app/common/views/components/games/reversi/reversi.index.vue b/src/client/app/common/views/components/games/reversi/reversi.index.vue
index d23902aae7..f6c7f0e3c2 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.index.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.index.vue
@@ -138,7 +138,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	> h1
@@ -200,7 +200,7 @@ root(isDark)
 			user-select none
 
 		&:focus
-			border-color $theme-color
+			border-color var(--primary)
 
 		&:hover
 			background isDark ? #313543 : #f5f5f5
diff --git a/src/client/app/common/views/components/games/reversi/reversi.room.vue b/src/client/app/common/views/components/games/reversi/reversi.room.vue
index fef833d63e..d4b91ae7a7 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.room.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.room.vue
@@ -252,7 +252,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	text-align center
@@ -288,7 +288,7 @@ root(isDark)
 
 						&:focus
 						&:active
-							border-color $theme-color
+							border-color var(--primary)
 
 				> div
 					> .random
diff --git a/src/client/app/common/views/components/games/reversi/reversi.vue b/src/client/app/common/views/components/games/reversi/reversi.vue
index 223ec4597a..75d7d574c1 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.vue
@@ -156,7 +156,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	color isDark ? #fff : #677f84
diff --git a/src/client/app/common/views/components/menu.vue b/src/client/app/common/views/components/menu.vue
index ad5ec619ba..3b9f07d1ee 100644
--- a/src/client/app/common/views/components/menu.vue
+++ b/src/client/app/common/views/components/menu.vue
@@ -117,7 +117,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	$bg-color = isDark ? #2c303c : #fff
@@ -182,13 +182,13 @@ root(isDark)
 			color isDark ? #d6dce2 : #111
 
 			&:hover
-				color $theme-color-foreground
-				background $theme-color
+				color var(--primaryForeground)
+				background var(--primary)
 				text-decoration none
 
 			&:active
-				color $theme-color-foreground
-				background darken($theme-color, 10%)
+				color var(--primaryForeground)
+				background var(--primaryDarken10)
 
 		> div
 			margin 8px 0
diff --git a/src/client/app/common/views/components/messaging-room.form.vue b/src/client/app/common/views/components/messaging-room.form.vue
index f183749fad..90668aee6e 100644
--- a/src/client/app/common/views/components/messaging-room.form.vue
+++ b/src/client/app/common/views/components/messaging-room.form.vue
@@ -195,7 +195,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	> textarea
@@ -234,10 +234,10 @@ root(isDark)
 		transition color 0.1s ease
 
 		&:hover
-			color $theme-color
+			color var(--primary)
 
 		&:active
-			color darken($theme-color, 10%)
+			color var(--primaryDarken10)
 			transition color 0s ease
 
 	.files
@@ -293,10 +293,10 @@ root(isDark)
 		transition color 0.1s ease
 
 		&:hover
-			color $theme-color
+			color var(--primary)
 
 		&:active
-			color darken($theme-color, 10%)
+			color var(--primaryDarken10)
 			transition color 0s ease
 
 	input[type=file]
diff --git a/src/client/app/common/views/components/messaging-room.message.vue b/src/client/app/common/views/components/messaging-room.message.vue
index 648d0eee18..e0528d5432 100644
--- a/src/client/app/common/views/components/messaging-room.message.vue
+++ b/src/client/app/common/views/components/messaging-room.message.vue
@@ -59,10 +59,10 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
-	$me-balloon-color = $theme-color
+	$me-balloon-color = var(--primary)
 
 	padding 10px 12px 10px 12px
 	background-color transparent
diff --git a/src/client/app/common/views/components/messaging-room.vue b/src/client/app/common/views/components/messaging-room.vue
index 1de41855df..5bdf8b9034 100644
--- a/src/client/app/common/views/components/messaging-room.vue
+++ b/src/client/app/common/views/components/messaging-room.vue
@@ -262,7 +262,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display flex
@@ -386,15 +386,15 @@ root(isDark)
 				cursor pointer
 				line-height 32px
 				font-size 12px
-				color $theme-color-foreground
-				background $theme-color
+				color var(--primaryForeground)
+				background var(--primary)
 				border-radius 16px
 
 				&:hover
-					background lighten($theme-color, 10%)
+					background var(--primaryLighten10)
 
 				&:active
-					background darken($theme-color, 10%)
+					background var(--primaryDarken10)
 
 				> [data-fa]
 					position absolute
diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue
index 6abfc92dca..7181ddd01c 100644
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@@ -167,7 +167,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 
@@ -252,8 +252,8 @@ root(isDark)
 					transition border 0.2s ease
 
 				&:focus
-					color darken($theme-color, 20%)
-					border solid 1px $theme-color
+					color var(--primaryDarken20)
+					border solid 1px var(--primary)
 					transition color 0, border 0
 
 		> .result
@@ -287,7 +287,7 @@ root(isDark)
 					&:hover
 					&:focus
 						color #fff
-						background $theme-color
+						background var(--primary)
 
 						.name
 							color #fff
@@ -297,7 +297,7 @@ root(isDark)
 
 					&:active
 						color #fff
-						background darken($theme-color, 10%)
+						background var(--primaryDarken10)
 
 						.name
 							color #fff
diff --git a/src/client/app/common/views/components/note-header.vue b/src/client/app/common/views/components/note-header.vue
index d25bd430f2..f4a2f00876 100644
--- a/src/client/app/common/views/components/note-header.vue
+++ b/src/client/app/common/views/components/note-header.vue
@@ -42,7 +42,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display flex
diff --git a/src/client/app/common/views/components/poll-editor.vue b/src/client/app/common/views/components/poll-editor.vue
index 30d9799fec..219f0a7fd5 100644
--- a/src/client/app/common/views/components/poll-editor.vue
+++ b/src/client/app/common/views/components/poll-editor.vue
@@ -68,7 +68,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	padding 8px
@@ -105,42 +105,42 @@ root(isDark)
 				font-size 14px
 				color isDark ? #fff : #000
 				background isDark ? #191b22 : #fff
-				border solid 1px rgba($theme-color, 0.1)
+				border solid 1px var(--primaryAlpha01)
 				border-radius 4px
 
 				&:hover
-					border-color rgba($theme-color, 0.2)
+					border-color var(--primaryAlpha02)
 
 				&:focus
-					border-color rgba($theme-color, 0.5)
+					border-color var(--primaryAlpha05)
 
 			> button
 				padding 4px 8px
-				color rgba($theme-color, 0.4)
+				color var(--primaryAlpha04)
 
 				&:hover
-					color rgba($theme-color, 0.6)
+					color var(--primaryAlpha06)
 
 				&:active
-					color darken($theme-color, 30%)
+					color var(--primaryDarken30)
 
 	> .add
 		margin 8px 0 0 0
 		vertical-align top
-		color $theme-color
+		color var(--primary)
 
 	> .destroy
 		position absolute
 		top 0
 		right 0
 		padding 4px 8px
-		color rgba($theme-color, 0.4)
+		color var(--primaryAlpha04)
 
 		&:hover
-			color rgba($theme-color, 0.6)
+			color var(--primaryAlpha06)
 
 		&:active
-			color darken($theme-color, 30%)
+			color var(--primaryDarken30)
 
 .mk-poll-editor[data-darkmode]
 	root(true)
diff --git a/src/client/app/common/views/components/poll.vue b/src/client/app/common/views/components/poll.vue
index 4fe51d219b..0e60932796 100644
--- a/src/client/app/common/views/components/poll.vue
+++ b/src/client/app/common/views/components/poll.vue
@@ -67,7 +67,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 
@@ -99,7 +99,7 @@ root(isDark)
 				top 0
 				left 0
 				height 100%
-				background $theme-color
+				background var(--primary)
 				transition width 1s ease
 
 			> span
diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue
index f732e40b9d..a86850ac7c 100644
--- a/src/client/app/common/views/components/reaction-picker.vue
+++ b/src/client/app/common/views/components/reaction-picker.vue
@@ -210,7 +210,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 $border-color = rgba(27, 31, 35, 0.15)
 
@@ -301,7 +301,7 @@ root(isDark)
 						right 0
 						bottom 0
 						left 0
-						border 2px solid rgba($theme-color, 0.3)
+						border 2px solid var(--primaryAlpha03)
 						border-radius 4px
 
 			> button
@@ -315,7 +315,7 @@ root(isDark)
 					background isDark ? #252731 : #eee
 
 				&:active
-					background $theme-color
+					background var(--primary)
 					box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15)
 
 .mk-reaction-picker[data-darkmode]
diff --git a/src/client/app/common/views/components/signin.vue b/src/client/app/common/views/components/signin.vue
index b1c6782e93..e02af8154c 100644
--- a/src/client/app/common/views/components/signin.vue
+++ b/src/client/app/common/views/components/signin.vue
@@ -68,7 +68,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mk-signin
 	color #555
diff --git a/src/client/app/common/views/components/signup.vue b/src/client/app/common/views/components/signup.vue
index f603b9545c..e55d7ee3e3 100644
--- a/src/client/app/common/views/components/signup.vue
+++ b/src/client/app/common/views/components/signup.vue
@@ -151,7 +151,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mk-signup
 	min-width 302px
diff --git a/src/client/app/common/views/components/switch.vue b/src/client/app/common/views/components/switch.vue
index 32caab638a..aa60331cbc 100644
--- a/src/client/app/common/views/components/switch.vue
+++ b/src/client/app/common/views/components/switch.vue
@@ -85,7 +85,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display flex
@@ -102,21 +102,21 @@ root(isDark)
 
 	&.checked
 		> .button
-			background-color $theme-color
-			border-color $theme-color
+			background-color var(--primary)
+			border-color var(--primary)
 
 		> .label
 			> span
-				color $theme-color
+				color var(--primary)
 
 		&:hover
 			> .label
 				> span
-					color darken($theme-color, 10%)
+					color var(--primaryDarken10)
 
 			> .button
-				background darken($theme-color, 10%)
-				border-color darken($theme-color, 10%)
+				background var(--primaryDarken10)
+				border-color var(--primaryDarken10)
 
 	&:hover
 		> .label
@@ -144,7 +144,7 @@ root(isDark)
 				right -5px
 				bottom -5px
 				left -5px
-				border 2px solid rgba($theme-color, 0.3)
+				border 2px solid var(--primaryAlpha03)
 				border-radius 14px
 
 	> .button
diff --git a/src/client/app/common/views/components/ui/button.vue b/src/client/app/common/views/components/ui/button.vue
index e778750354..ae59214038 100644
--- a/src/client/app/common/views/components/ui/button.vue
+++ b/src/client/app/common/views/components/ui/button.vue
@@ -32,7 +32,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark, fill)
 	> button
@@ -49,23 +49,23 @@ root(isDark, fill)
 		box-shadow none
 
 		if fill
-			color $theme-color-foreground
-			background $theme-color
+			color var(--primaryForeground)
+			background var(--primary)
 
 			&:hover
-				background lighten($theme-color, 5%)
+				background var(--primaryLighten5)
 
 			&:active
-				background darken($theme-color, 5%)
+				background var(--primaryDarken5)
 		else
-			color $theme-color
+			color var(--primary)
 			background none
 
 			&:hover
-				color darken($theme-color, 5%)
+				color var(--primaryDarken5)
 
 			&:active
-				background rgba($theme-color, 0.3)
+				background var(--primaryAlpha03)
 
 .ui-button[data-darkmode]
 	&.fill
diff --git a/src/client/app/common/views/components/ui/card.vue b/src/client/app/common/views/components/ui/card.vue
index aa16b557e1..a9e0493810 100644
--- a/src/client/app/common/views/components/ui/card.vue
+++ b/src/client/app/common/views/components/ui/card.vue
@@ -20,7 +20,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	margin 16px
diff --git a/src/client/app/common/views/components/ui/form.vue b/src/client/app/common/views/components/ui/form.vue
index fc8fdad9c4..5c5bbd7256 100644
--- a/src/client/app/common/views/components/ui/form.vue
+++ b/src/client/app/common/views/components/ui/form.vue
@@ -19,7 +19,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .ui-form
 	> fieldset
diff --git a/src/client/app/common/views/components/ui/form/button.vue b/src/client/app/common/views/components/ui/form/button.vue
index 9c37b3118b..bccf36e52f 100644
--- a/src/client/app/common/views/components/ui/form/button.vue
+++ b/src/client/app/common/views/components/ui/form/button.vue
@@ -25,7 +25,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display inline-block
@@ -50,30 +50,30 @@ root(isDark)
 
 		&:hover
 		&:focus
-			color $theme-color
-			background rgba($theme-color, isDark ? 0.2 : 0.12)
-			border-color rgba($theme-color, isDark ? 0.5 : 0.3)
+			color var(--primary)
+			//background rgba(var(--primary-r), var(--primary-g), var(--primary-b), isDark ? 0.2 : 0.12)
+			//border-color rgba(var(--primary-r), var(--primary-g), var(--primary-b), isDark ? 0.5 : 0.3)
 
 		&:active
-			color darken($theme-color, 20%)
-			background rgba($theme-color, 0.12)
-			border-color $theme-color
+			color var(--primaryDarken20)
+			//background rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.12)
+			border-color var(--primary)
 			transition all 0s
 
 	&.primary
 		> button
-			border 1px solid $theme-color
-			background $theme-color
-			color $theme-color-foreground
+			border 1px solid var(--primary)
+			background var(--primary)
+			color var(--primaryForeground)
 
 			&:hover
 			&:focus
-				background lighten($theme-color, 20%)
-				border-color lighten($theme-color, 20%)
+				background var(--primaryLighten20)
+				border-color var(--primaryLighten20)
 
 			&:active
-				background darken($theme-color, 20%)
-				border-color darken($theme-color, 20%)
+				background var(--primaryDarken20)
+				border-color var(--primaryDarken20)
 				transition all 0s
 
 	&.round
diff --git a/src/client/app/common/views/components/ui/form/radio.vue b/src/client/app/common/views/components/ui/form/radio.vue
index 831981bb3e..13cabbdc04 100644
--- a/src/client/app/common/views/components/ui/form/radio.vue
+++ b/src/client/app/common/views/components/ui/form/radio.vue
@@ -49,7 +49,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display inline-flex
@@ -70,15 +70,15 @@ root(isDark)
 
 	&.checked
 		> .button
-			border-color $theme-color
+			border-color var(--primary)
 
 			&:after
-				background-color $theme-color
+				background-color var(--primary)
 				transform scale(1)
 				opacity 1
 
 		> .label
-			color $theme-color
+			color var(--primary)
 
 	> input
 		position absolute
diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue
index ce28bfb12a..98c9bf7f5a 100644
--- a/src/client/app/common/views/components/ui/input.vue
+++ b/src/client/app/common/views/components/ui/input.vue
@@ -155,7 +155,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark, fill)
 	margin 32px 0
@@ -193,7 +193,7 @@ root(isDark, fill)
 				left 0
 				right 0
 				height 2px
-				background $theme-color
+				background var(--primary)
 				opacity 0
 				transform scaleX(0.12)
 				transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)
@@ -325,7 +325,7 @@ root(isDark, fill)
 					transform scaleX(1)
 
 			> .label
-				color $theme-color
+				color var(--primary)
 
 	&.focused
 	&.filled
diff --git a/src/client/app/common/views/components/ui/radio.vue b/src/client/app/common/views/components/ui/radio.vue
index dcdda1cf0e..ded6b5650c 100644
--- a/src/client/app/common/views/components/ui/radio.vue
+++ b/src/client/app/common/views/components/ui/radio.vue
@@ -51,7 +51,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display inline-block
@@ -68,10 +68,10 @@ root(isDark)
 
 	&.checked
 		> .button
-			border-color $theme-color
+			border-color var(--primary)
 
 			&:after
-				background-color $theme-color
+				background-color var(--primary)
 				transform scale(1)
 				opacity 1
 
diff --git a/src/client/app/common/views/components/ui/select.vue b/src/client/app/common/views/components/ui/select.vue
index 4273a4a0de..c32865c690 100644
--- a/src/client/app/common/views/components/ui/select.vue
+++ b/src/client/app/common/views/components/ui/select.vue
@@ -70,7 +70,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark, fill)
 	margin 32px 0
@@ -113,7 +113,7 @@ root(isDark, fill)
 				left 0
 				right 0
 				height 2px
-				background $theme-color
+				background var(--primary)
 				opacity 0
 				transform scaleX(0.12)
 				transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)
@@ -190,7 +190,7 @@ root(isDark, fill)
 					transform scaleX(1)
 
 			> .label
-				color $theme-color
+				color var(--primary)
 
 	&.focused
 	&.filled
diff --git a/src/client/app/common/views/components/ui/switch.vue b/src/client/app/common/views/components/ui/switch.vue
index e88b867801..e358713d8f 100644
--- a/src/client/app/common/views/components/ui/switch.vue
+++ b/src/client/app/common/views/components/ui/switch.vue
@@ -56,7 +56,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display flex
@@ -79,11 +79,11 @@ root(isDark)
 
 	&.checked
 		> .button
-			background-color rgba($theme-color, 0.4)
-			border-color rgba($theme-color, 0.4)
+			background-color var(--primaryAlpha04)
+			border-color var(--primaryAlpha04)
 
 			> *
-				background-color $theme-color
+				background-color var(--primary)
 				transform translateX(14px)
 
 	> input
diff --git a/src/client/app/common/views/components/ui/textarea.vue b/src/client/app/common/views/components/ui/textarea.vue
index 60fe1cdd82..53b7dcaf8c 100644
--- a/src/client/app/common/views/components/ui/textarea.vue
+++ b/src/client/app/common/views/components/ui/textarea.vue
@@ -63,7 +63,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark, fill)
 	margin 42px 0 32px 0
@@ -97,7 +97,7 @@ root(isDark, fill)
 				left 0
 				right 0
 				background none
-				border solid 2px $theme-color
+				border solid 2px var(--primary)
 				border-radius 3px
 				opacity 0
 				transition opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)
@@ -149,7 +149,7 @@ root(isDark, fill)
 					opacity 1
 
 			> .label
-				color $theme-color
+				color var(--primary)
 
 	&.focused
 	&.filled
diff --git a/src/client/app/common/views/components/uploader.vue b/src/client/app/common/views/components/uploader.vue
index f4797d89f7..19b0d15708 100644
--- a/src/client/app/common/views/components/uploader.vue
+++ b/src/client/app/common/views/components/uploader.vue
@@ -81,7 +81,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mk-uploader
 	overflow auto
@@ -100,7 +100,7 @@ export default Vue.extend({
 			margin 8px 0 0 0
 			padding 0
 			height 36px
-			box-shadow 0 -1px 0 rgba($theme-color, 0.1)
+			box-shadow 0 -1px 0 var(--primaryAlpha01)
 			border-top solid 8px transparent
 
 			&:first-child
@@ -127,7 +127,7 @@ export default Vue.extend({
 				padding 0
 				max-width 256px
 				font-size 0.8em
-				color rgba($theme-color, 0.7)
+				color var(--primaryAlpha07)
 				white-space nowrap
 				text-overflow ellipsis
 				overflow hidden
@@ -145,17 +145,17 @@ export default Vue.extend({
 				font-size 0.8em
 
 				> .initing
-					color rgba($theme-color, 0.5)
+					color var(--primaryAlpha05)
 
 				> .kb
-					color rgba($theme-color, 0.5)
+					color var(--primaryAlpha05)
 
 				> .percentage
 					display inline-block
 					width 48px
 					text-align right
 
-					color rgba($theme-color, 0.7)
+					color var(--primaryAlpha07)
 
 					&:after
 						content '%'
@@ -174,10 +174,10 @@ export default Vue.extend({
 				overflow hidden
 
 				&::-webkit-progress-value
-					background $theme-color
+					background var(--primary)
 
 				&::-webkit-progress-bar
-					background rgba($theme-color, 0.1)
+					background var(--primaryAlpha01)
 
 			> .progress
 				display block
@@ -191,13 +191,13 @@ export default Vue.extend({
 				border-radius 4px
 				background linear-gradient(
 					45deg,
-					lighten($theme-color, 30%) 25%,
-					$theme-color               25%,
-					$theme-color               50%,
-					lighten($theme-color, 30%) 50%,
-					lighten($theme-color, 30%) 75%,
-					$theme-color               75%,
-					$theme-color
+					var(--primaryLighten30) 25%,
+					var(--primary)               25%,
+					var(--primary)               50%,
+					var(--primaryLighten30) 50%,
+					var(--primaryLighten30) 75%,
+					var(--primary)               75%,
+					var(--primary)
 				)
 				background-size 32px 32px
 				animation bg 1.5s linear infinite
diff --git a/src/client/app/common/views/components/visibility-chooser.vue b/src/client/app/common/views/components/visibility-chooser.vue
index 1830b1832e..d0a892fd56 100644
--- a/src/client/app/common/views/components/visibility-chooser.vue
+++ b/src/client/app/common/views/components/visibility-chooser.vue
@@ -127,7 +127,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 $border-color = rgba(27, 31, 35, 0.15)
 
@@ -199,8 +199,8 @@ root(isDark)
 				background isDark ? #21242b : #ddd
 
 			&.active
-				color $theme-color-foreground
-				background $theme-color
+				color var(--primaryForeground)
+				background var(--primary)
 
 			> *
 				user-select none
diff --git a/src/client/app/common/views/pages/follow.vue b/src/client/app/common/views/pages/follow.vue
index 80a870a257..d81e4c0820 100644
--- a/src/client/app/common/views/pages/follow.vue
+++ b/src/client/app/common/views/pages/follow.vue
@@ -107,7 +107,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	padding 32px
@@ -173,29 +173,29 @@ root(isDark)
 		min-width 150px
 		font-size 14px
 		font-weight bold
-		color $theme-color
+		color var(--primary)
 		background transparent
 		outline none
-		border solid 1px $theme-color
+		border solid 1px var(--primary)
 		border-radius 36px
 
 		&:hover
-			background rgba($theme-color, 0.1)
+			background var(--primaryAlpha01)
 
 		&:active
-			background rgba($theme-color, 0.2)
+			background var(--primaryAlpha02)
 
 		&.active
-			color $theme-color-foreground
-			background $theme-color
+			color var(--primaryForeground)
+			background var(--primary)
 
 			&:hover
-				background lighten($theme-color, 10%)
-				border-color lighten($theme-color, 10%)
+				background var(--primaryLighten10)
+				border-color var(--primaryLighten10)
 
 			&:active
-				background darken($theme-color, 10%)
-				border-color darken($theme-color, 10%)
+				background var(--primaryDarken10)
+				border-color var(--primaryDarken10)
 
 		&.wait
 			cursor wait !important
diff --git a/src/client/app/common/views/widgets/analog-clock.vue b/src/client/app/common/views/widgets/analog-clock.vue
index 04223f0d21..1725c2f1af 100644
--- a/src/client/app/common/views/widgets/analog-clock.vue
+++ b/src/client/app/common/views/widgets/analog-clock.vue
@@ -26,7 +26,7 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	.mkw-analog-clock--body
diff --git a/src/client/app/common/views/widgets/calendar.vue b/src/client/app/common/views/widgets/calendar.vue
index eb15030370..a24524d1c5 100644
--- a/src/client/app/common/views/widgets/calendar.vue
+++ b/src/client/app/common/views/widgets/calendar.vue
@@ -116,7 +116,7 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	&[data-special='on-new-years-day']
@@ -182,7 +182,7 @@ root(isDark)
 
 					> .val
 						height 4px
-						background $theme-color
+						background var(--primary)
 						transition width .3s cubic-bezier(0.23, 1, 0.32, 1)
 
 				&:nth-child(1)
diff --git a/src/client/app/common/views/widgets/memo.vue b/src/client/app/common/views/widgets/memo.vue
index 30f0d3b009..079522d39b 100644
--- a/src/client/app/common/views/widgets/memo.vue
+++ b/src/client/app/common/views/widgets/memo.vue
@@ -57,7 +57,7 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	.mkw-memo--body
@@ -83,8 +83,8 @@ root(isDark)
 			margin 0
 			padding 0 10px
 			height 28px
-			color $theme-color-foreground
-			background $theme-color !important
+			color var(--primaryForeground)
+			background var(--primary) !important
 			outline none
 			border none
 			border-radius 4px
@@ -92,10 +92,10 @@ root(isDark)
 			cursor pointer
 
 			&:hover
-				background lighten($theme-color, 10%) !important
+				background var(--primaryLighten10) !important
 
 			&:active
-				background darken($theme-color, 10%) !important
+				background var(--primaryDarken10) !important
 				transition background 0s ease
 
 			&:disabled
diff --git a/src/client/app/desktop/ui.styl b/src/client/app/desktop/ui.styl
index b66c8f4025..3ab5d79c5d 100644
--- a/src/client/app/desktop/ui.styl
+++ b/src/client/app/desktop/ui.styl
@@ -1,5 +1,3 @@
-@import "../../const"
-
 button
 	font-family sans-serif
 
@@ -34,7 +32,7 @@ button.ui
 			right -5px
 			bottom -5px
 			left -5px
-			border 2px solid rgba($theme-color, 0.3)
+			border 2px solid var(--primaryAlpha03)
 			border-radius 8px
 
 	&:disabled
@@ -50,20 +48,20 @@ button.ui
 		border-color #dcdcdc
 
 	&.primary
-		color $theme-color-foreground
-		background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
-		border solid 1px lighten($theme-color, 15%)
+		color var(--primaryForeground)
+		//background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+		border solid 1px var(--primaryLighten15)
 
 		&:not(:disabled)
 			font-weight bold
 
 		&:hover:not(:disabled)
-			background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-			border-color $theme-color
+			//background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+			border-color var(--primary)
 
 		&:active:not(:disabled)
-			background $theme-color
-			border-color $theme-color
+			background var(--primary)
+			border-color var(--primary)
 
 input:not([type]).ui
 input[type='text'].ui
@@ -86,7 +84,7 @@ textarea.ui
 		border-color #b0b0b0
 
 	&:focus
-		border-color $theme-color
+		border-color var(--primary)
 
 textarea.ui
 	min-width 100%
@@ -140,17 +138,17 @@ html[data-darkmode]
 			border-color #151a1d
 
 		&.primary
-			color $theme-color-foreground
-			background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
-			border solid 1px lighten($theme-color, 15%)
+			color var(--primaryForeground)
+			//background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+			border solid 1px var(--primaryLighten15)
 
 			&:hover:not(:disabled)
-				background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-				border-color $theme-color
+				//background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+				border-color var(--primary)
 
 			&:active:not(:disabled)
-				background $theme-color
-				border-color $theme-color
+				background var(--primary)
+				border-color var(--primary)
 
 	input:not([type]).ui
 	input[type='text'].ui
@@ -174,7 +172,7 @@ html[data-darkmode]
 			border-color #b0b0b0
 
 		&:focus
-			border-color $theme-color
+			border-color var(--primary)
 
 	.ui.from.group
 		> p:first-child
diff --git a/src/client/app/desktop/views/components/calendar.vue b/src/client/app/desktop/views/components/calendar.vue
index e71983f821..2414ced0c9 100644
--- a/src/client/app/desktop/views/components/calendar.vue
+++ b/src/client/app/desktop/views/components/calendar.vue
@@ -128,7 +128,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	color isDark ? #c5ced6 : #777
@@ -241,14 +241,14 @@ root(isDark)
 
 				&[data-today]
 					> div
-						color $theme-color-foreground
-						background $theme-color
+						color var(--primaryForeground)
+						background var(--primary)
 
 					&:hover > div
-						background lighten($theme-color, 10%)
+						background var(--primaryLighten10)
 
 					&:active > div
-						background darken($theme-color, 10%)
+						background var(--primaryDarken10)
 
 .mk-calendar[data-darkmode]
 	root(true)
diff --git a/src/client/app/desktop/views/components/charts.vue b/src/client/app/desktop/views/components/charts.vue
index e401095363..6d6f3a3596 100644
--- a/src/client/app/desktop/views/components/charts.vue
+++ b/src/client/app/desktop/views/components/charts.vue
@@ -649,7 +649,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .gkgckalzgidaygcxnugepioremxvxvpt
 	padding 32px
@@ -675,7 +675,7 @@ export default Vue.extend({
 
 			*
 				&:not(.active)
-					color $theme-color
+					color var(--primary)
 					cursor pointer
 
 	> div
diff --git a/src/client/app/desktop/views/components/choose-file-from-drive-window.vue b/src/client/app/desktop/views/components/choose-file-from-drive-window.vue
index 933d31f299..806f7f5c3f 100644
--- a/src/client/app/desktop/views/components/choose-file-from-drive-window.vue
+++ b/src/client/app/desktop/views/components/choose-file-from-drive-window.vue
@@ -59,7 +59,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" module>
-@import '~const.styl'
+
 
 .title
 	> [data-fa]
@@ -74,7 +74,7 @@ export default Vue.extend({
 
 .footer
 	height 72px
-	background lighten($theme-color, 95%)
+	background var(--primaryLighten95)
 
 .upload
 	display inline-block
@@ -87,7 +87,7 @@ export default Vue.extend({
 	width 40px
 	height 40px
 	font-size 1em
-	color rgba($theme-color, 0.5)
+	color var(--primaryAlpha05)
 	background transparent
 	outline none
 	border solid 1px transparent
@@ -95,13 +95,13 @@ export default Vue.extend({
 
 	&:hover
 		background transparent
-		border-color rgba($theme-color, 0.3)
+		border-color var(--primaryAlpha03)
 
 	&:active
-		color rgba($theme-color, 0.6)
+		color var(--primaryAlpha06)
 		background transparent
-		border-color rgba($theme-color, 0.5)
-		box-shadow 0 2px 4px rgba(darken($theme-color, 50%), 0.15) inset
+		border-color var(--primaryAlpha05)
+		//box-shadow 0 2px 4px rgba(var(--primaryDarken50), 0.15) inset
 
 	&:focus
 		&:after
@@ -112,7 +112,7 @@ export default Vue.extend({
 			right -5px
 			bottom -5px
 			left -5px
-			border 2px solid rgba($theme-color, 0.3)
+			border 2px solid var(--primaryAlpha03)
 			border-radius 8px
 
 .ok
@@ -138,7 +138,7 @@ export default Vue.extend({
 			right -5px
 			bottom -5px
 			left -5px
-			border 2px solid rgba($theme-color, 0.3)
+			border 2px solid var(--primaryAlpha03)
 			border-radius 8px
 
 	&:disabled
@@ -147,20 +147,20 @@ export default Vue.extend({
 
 .ok
 	right 16px
-	color $theme-color-foreground
-	background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
-	border solid 1px lighten($theme-color, 15%)
+	color var(--primaryForeground)
+	background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+	border solid 1px var(--primaryLighten15)
 
 	&:not(:disabled)
 		font-weight bold
 
 	&:hover:not(:disabled)
-		background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-		border-color $theme-color
+		background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+		border-color var(--primary)
 
 	&:active:not(:disabled)
-		background $theme-color
-		border-color $theme-color
+		background var(--primary)
+		border-color var(--primary)
 
 .cancel
 	right 148px
diff --git a/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue b/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
index 03d6fd1636..b970218e58 100644
--- a/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
+++ b/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
@@ -37,7 +37,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" module>
-@import '~const.styl'
+
 
 .title
 	> [data-fa]
@@ -48,7 +48,7 @@ export default Vue.extend({
 
 .footer
 	height 72px
-	background lighten($theme-color, 95%)
+	background var(--primaryLighten95)
 
 .ok
 .cancel
@@ -73,7 +73,7 @@ export default Vue.extend({
 			right -5px
 			bottom -5px
 			left -5px
-			border 2px solid rgba($theme-color, 0.3)
+			border 2px solid var(--primaryAlpha03)
 			border-radius 8px
 
 	&:disabled
@@ -82,20 +82,20 @@ export default Vue.extend({
 
 .ok
 	right 16px
-	color $theme-color-foreground
-	background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
-	border solid 1px lighten($theme-color, 15%)
+	color var(--primaryForeground)
+	background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+	border solid 1px var(--primaryLighten15)
 
 	&:not(:disabled)
 		font-weight bold
 
 	&:hover:not(:disabled)
-		background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-		border-color $theme-color
+		background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+		border-color var(--primary)
 
 	&:active:not(:disabled)
-		background $theme-color
-		border-color $theme-color
+		background var(--primary)
+		border-color var(--primary)
 
 .cancel
 	right 148px
diff --git a/src/client/app/desktop/views/components/context-menu.menu.vue b/src/client/app/desktop/views/components/context-menu.menu.vue
index e7deec675e..b65a8e1dea 100644
--- a/src/client/app/desktop/views/components/context-menu.menu.vue
+++ b/src/client/app/desktop/views/components/context-menu.menu.vue
@@ -31,7 +31,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	$width = 240px
@@ -69,7 +69,7 @@ root(isDark)
 
 			&:active
 				> p, a
-					background $theme-color
+					background var(--primary)
 
 		> p, a
 			display block
@@ -90,14 +90,14 @@ root(isDark)
 		&:hover
 			> p, a
 				text-decoration none
-				background $theme-color
-				color $theme-color-foreground
+				background var(--primary)
+				color var(--primaryForeground)
 
 		&:active
 			> p, a
 				text-decoration none
-				background darken($theme-color, 10%)
-				color $theme-color-foreground
+				background var(--primaryDarken10)
+				color var(--primaryForeground)
 
 	li > ul
 		visibility hidden
diff --git a/src/client/app/desktop/views/components/crop-window.vue b/src/client/app/desktop/views/components/crop-window.vue
index 4fa258549f..629c3b013a 100644
--- a/src/client/app/desktop/views/components/crop-window.vue
+++ b/src/client/app/desktop/views/components/crop-window.vue
@@ -61,7 +61,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" module>
-@import '~const.styl'
+
 
 .header
 	> [data-fa]
@@ -73,7 +73,7 @@ export default Vue.extend({
 
 .actions
 	height 72px
-	background lighten($theme-color, 95%)
+	background var(--primaryLighten95)
 
 .ok
 .cancel
@@ -98,7 +98,7 @@ export default Vue.extend({
 			right -5px
 			bottom -5px
 			left -5px
-			border 2px solid rgba($theme-color, 0.3)
+			border 2px solid var(--primaryAlpha03)
 			border-radius 8px
 
 	&:disabled
@@ -111,20 +111,20 @@ export default Vue.extend({
 
 .ok
 	right 16px
-	color $theme-color-foreground
-	background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
-	border solid 1px lighten($theme-color, 15%)
+	color var(--primaryForeground)
+	background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+	border solid 1px var(--primaryLighten15)
 
 	&:not(:disabled)
 		font-weight bold
 
 	&:hover:not(:disabled)
-		background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-		border-color $theme-color
+		background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+		border-color var(--primary)
 
 	&:active:not(:disabled)
-		background $theme-color
-		border-color $theme-color
+		background var(--primary)
+		border-color var(--primary)
 
 .cancel
 .skip
@@ -155,11 +155,11 @@ export default Vue.extend({
 }
 
 .cropper-view-box {
-	outline-color: $theme-color;
+	outline-color: var(--primary);
 }
 
 .cropper-line, .cropper-point {
-	background-color: $theme-color;
+	background-color: var(--primary);
 }
 
 .cropper-bg {
diff --git a/src/client/app/desktop/views/components/dialog.vue b/src/client/app/desktop/views/components/dialog.vue
index bbb1e0030c..baa6f911fe 100644
--- a/src/client/app/desktop/views/components/dialog.vue
+++ b/src/client/app/desktop/views/components/dialog.vue
@@ -91,7 +91,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mk-dialog
 	> .bg
@@ -144,20 +144,20 @@ export default Vue.extend({
 					margin 0 0.375em
 
 				&:hover
-					color $theme-color
+					color var(--primary)
 
 				&:active
-					color darken($theme-color, 10%)
+					color var(--primaryDarken10)
 					transition color 0s ease
 
 </style>
 
 <style lang="stylus" module>
-@import '~const.styl'
+
 
 .header
 	margin 1em 0
-	color $theme-color
+	color var(--primary)
 	// color #43A4EC
 	font-weight bold
 
diff --git a/src/client/app/desktop/views/components/drive.file.vue b/src/client/app/desktop/views/components/drive.file.vue
index 3ac8923c51..225130baf7 100644
--- a/src/client/app/desktop/views/components/drive.file.vue
+++ b/src/client/app/desktop/views/components/drive.file.vue
@@ -200,7 +200,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	padding 8px 0 0 0
@@ -237,13 +237,13 @@ root(isDark)
 					background #ce2212
 
 	&[data-is-selected]
-		background $theme-color
+		background var(--primary)
 
 		&:hover
-			background lighten($theme-color, 10%)
+			background var(--primaryLighten10)
 
 		&:active
-			background darken($theme-color, 10%)
+			background var(--primaryDarken10)
 
 		> .label
 			&:before
@@ -251,7 +251,7 @@ root(isDark)
 				display none
 
 		> .name
-			color $theme-color-foreground
+			color var(--primaryForeground)
 
 	&[data-is-contextmenu-showing]
 		&:after
@@ -262,7 +262,7 @@ root(isDark)
 			right -4px
 			bottom -4px
 			left -4px
-			border 2px dashed rgba($theme-color, 0.3)
+			border 2px dashed var(--primaryAlpha03)
 			border-radius 4px
 
 	> .label
diff --git a/src/client/app/desktop/views/components/drive.folder.vue b/src/client/app/desktop/views/components/drive.folder.vue
index e6b71f9426..cb49215cbb 100644
--- a/src/client/app/desktop/views/components/drive.folder.vue
+++ b/src/client/app/desktop/views/components/drive.folder.vue
@@ -214,12 +214,12 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	padding 8px
 	height 64px
-	background isDark ? rgba($theme-color, 0.2) : lighten($theme-color, 95%)
+	background isDark ? var(--primaryAlpha02) : var(--primaryLighten95)
 	border-radius 4px
 
 	&, *
@@ -229,10 +229,10 @@ root(isDark)
 		pointer-events none
 
 	&:hover
-		background isDark ? rgba(lighten($theme-color, 10%), 0.2) : lighten($theme-color, 90%)
+		//background isDark ? rgba(var(--primaryLighten10), 0.2) : var(--primaryLighten90)
 
 	&:active
-		background isDark ? rgba(darken($theme-color, 10%), 0.2) : lighten($theme-color, 85%)
+		//background isDark ? rgba(var(--primaryDarken10), 0.2) : var(--primaryLighten85)
 
 	&[data-is-contextmenu-showing]
 	&[data-draghover]
@@ -244,16 +244,16 @@ root(isDark)
 			right -4px
 			bottom -4px
 			left -4px
-			border 2px dashed rgba($theme-color, 0.3)
+			border 2px dashed var(--primaryAlpha03)
 			border-radius 4px
 
 	&[data-draghover]
-		background isDark ? rgba(darken($theme-color, 10%), 0.2) : lighten($theme-color, 90%)
+		//background isDark ? rgba(var(--primaryDarken10), 0.2) : var(--primaryLighten90)
 
 	> .name
 		margin 0
 		font-size 0.9em
-		color isDark ? #fff : darken($theme-color, 30%)
+		color isDark ? #fff : var(--primaryDarken30)
 
 		> [data-fa]
 			margin-right 4px
diff --git a/src/client/app/desktop/views/components/drive.vue b/src/client/app/desktop/views/components/drive.vue
index cb289027d4..ccfdb3159f 100644
--- a/src/client/app/desktop/views/components/drive.vue
+++ b/src/client/app/desktop/views/components/drive.vue
@@ -585,7 +585,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 
@@ -697,8 +697,8 @@ root(isDark)
 			z-index 128
 			top 0
 			left 0
-			border solid 1px $theme-color
-			background rgba($theme-color, 0.5)
+			border solid 1px var(--primary)
+			background var(--primaryAlpha05)
 			pointer-events none
 
 		> .contents
@@ -769,7 +769,7 @@ root(isDark)
 		top 38px
 		width 100%
 		height calc(100% - 38px)
-		border dashed 2px rgba($theme-color, 0.5)
+		border dashed 2px var(--primaryAlpha05)
 		pointer-events none
 
 	> .mk-uploader
diff --git a/src/client/app/desktop/views/components/follow-button.vue b/src/client/app/desktop/views/components/follow-button.vue
index 1db4b0cfa4..014b536f59 100644
--- a/src/client/app/desktop/views/components/follow-button.vue
+++ b/src/client/app/desktop/views/components/follow-button.vue
@@ -101,7 +101,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display block
@@ -126,7 +126,7 @@ root(isDark)
 			right -5px
 			bottom -5px
 			left -5px
-			border 2px solid rgba($theme-color, 0.3)
+			border 2px solid var(--primaryAlpha03)
 			border-radius 8px
 
 	&:not(.active)
@@ -143,20 +143,20 @@ root(isDark)
 			border-color isDark ? #151a1d : #dcdcdc
 
 	&.active
-		color $theme-color-foreground
-		background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
-		border solid 1px lighten($theme-color, 15%)
+		color var(--primaryForeground)
+		background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+		border solid 1px var(--primaryLighten15)
 
 		&:not(:disabled)
 			font-weight bold
 
 		&:hover:not(:disabled)
-			background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-			border-color $theme-color
+			background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+			border-color var(--primary)
 
 		&:active:not(:disabled)
-			background $theme-color
-			border-color $theme-color
+			background var(--primary)
+			border-color var(--primary)
 
 	&.wait
 		cursor wait !important
diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
index c9b868422e..3d77da52d9 100644
--- a/src/client/app/desktop/views/components/home.vue
+++ b/src/client/app/desktop/views/components/home.vue
@@ -247,7 +247,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display block
@@ -292,15 +292,15 @@ root(isDark)
 			padding 0 16px
 			line-height 48px
 			text-decoration none
-			color $theme-color-foreground
-			background $theme-color
+			color var(--primaryForeground)
+			background var(--primary)
 			transition background 0.1s ease
 
 			&:hover
-				background lighten($theme-color, 10%)
+				background var(--primaryLighten10)
 
 			&:active
-				background darken($theme-color, 10%)
+				background var(--primaryDarken10)
 				transition background 0s ease
 
 			> [data-fa]
diff --git a/src/client/app/desktop/views/components/input-dialog.vue b/src/client/app/desktop/views/components/input-dialog.vue
index cf7c09ea56..976e897fe8 100644
--- a/src/client/app/desktop/views/components/input-dialog.vue
+++ b/src/client/app/desktop/views/components/input-dialog.vue
@@ -76,7 +76,7 @@ export default Vue.extend({
 
 
 <style lang="stylus" module>
-@import '~const.styl'
+
 
 .header
 	> [data-fa]
@@ -96,25 +96,25 @@ export default Vue.extend({
 		color #333
 		background #fff
 		outline none
-		border solid 1px rgba($theme-color, 0.1)
+		border solid 1px var(--primaryAlpha01)
 		border-radius 4px
 		transition border-color .3s ease
 
 		&:hover
-			border-color rgba($theme-color, 0.2)
+			border-color var(--primaryAlpha02)
 			transition border-color .1s ease
 
 		&:focus
-			color $theme-color
-			border-color rgba($theme-color, 0.5)
+			color var(--primary)
+			border-color var(--primaryAlpha05)
 			transition border-color 0s ease
 
 		&::-webkit-input-placeholder
-			color rgba($theme-color, 0.3)
+			color var(--primaryAlpha03)
 
 .actions
 	height 72px
-	background lighten($theme-color, 95%)
+	background var(--primaryLighten95)
 
 .ok
 .cancel
@@ -139,7 +139,7 @@ export default Vue.extend({
 			right -5px
 			bottom -5px
 			left -5px
-			border 2px solid rgba($theme-color, 0.3)
+			border 2px solid var(--primaryAlpha03)
 			border-radius 8px
 
 	&:disabled
@@ -148,20 +148,20 @@ export default Vue.extend({
 
 .ok
 	right 16px
-	color $theme-color-foreground
-	background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
-	border solid 1px lighten($theme-color, 15%)
+	color var(--primaryForeground)
+	background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+	border solid 1px var(--primaryLighten15)
 
 	&:not(:disabled)
 		font-weight bold
 
 	&:hover:not(:disabled)
-		background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-		border-color $theme-color
+		background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+		border-color var(--primary)
 
 	&:active:not(:disabled)
-		background $theme-color
-		border-color $theme-color
+		background var(--primary)
+		border-color var(--primary)
 
 .cancel
 	right 148px
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index 80faae0d42..f004ca88ee 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -225,7 +225,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	overflow hidden
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index ac2c1ce97f..a91212221b 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -317,7 +317,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	margin 0
@@ -348,7 +348,7 @@ root(isDark)
 			right 2px
 			bottom 2px
 			left 2px
-			border 2px solid rgba($theme-color, 0.3)
+			border 2px solid var(--primaryAlpha03)
 			border-radius 4px
 
 	> .renote
@@ -557,7 +557,7 @@ root(isDark)
 		padding 0 4px
 		margin-left 4px
 		font-size 80%
-		color $theme-color-foreground
-		background $theme-color
+		color var(--primaryForeground)
+		background var(--primary)
 		border-radius 4px
 </style>
diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index e6267ed204..2e3ffd171b 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -216,7 +216,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	.transition
@@ -250,7 +250,7 @@ root(isDark)
 		position sticky
 		z-index 100
 		height 3px
-		background $theme-color
+		background var(--primary)
 
 	> footer
 		> button
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index 8db85aeaca..fdd6e75318 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -434,12 +434,12 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display block
 	padding 16px
-	background isDark ? #282C37 : lighten($theme-color, 95%)
+	background isDark ? #282C37 : var(--primaryLighten95)
 
 	&:after
 		content ""
@@ -456,23 +456,23 @@ root(isDark)
 			color isDark ? #fff : #333
 			background isDark ? #191d23 : #fff
 			outline none
-			border solid 1px rgba($theme-color, 0.1)
+			border solid 1px var(--primaryAlpha01)
 			border-radius 4px
 			transition border-color .2s ease
 
 			&:hover
-				border-color rgba($theme-color, 0.2)
+				border-color var(--primaryAlpha02)
 				transition border-color .1s ease
 
 			&:focus
-				border-color rgba($theme-color, 0.5)
+				border-color var(--primaryAlpha05)
 				transition border-color 0s ease
 
 			&:disabled
 				opacity 0.5
 
 			&::-webkit-input-placeholder
-				color rgba($theme-color, 0.3)
+				color var(--primaryAlpha03)
 
 		> input
 			margin-bottom 8px
@@ -486,17 +486,17 @@ root(isDark)
 			&:hover
 				& + *
 				& + * + *
-					border-color rgba($theme-color, 0.2)
+					border-color var(--primaryAlpha02)
 					transition border-color .1s ease
 
 			&:focus
 				& + *
 				& + * + *
-					border-color rgba($theme-color, 0.5)
+					border-color var(--primaryAlpha05)
 					transition border-color 0s ease
 
 			&.with
-				border-bottom solid 1px rgba($theme-color, 0.1) !important
+				border-bottom solid 1px var(--primaryAlpha01) !important
 				border-radius 4px 4px 0 0
 
 		> .visibleUsers
@@ -514,7 +514,7 @@ root(isDark)
 			font-size 14px
 
 			> b
-				color isDark ? #9baec8 : darken($theme-color, 20%)
+				color isDark ? #9baec8 : var(--primaryDarken20)
 
 			> *
 				margin-right 8px
@@ -523,14 +523,14 @@ root(isDark)
 		> .files
 			margin 0
 			padding 0
-			background isDark ? #181b23 : lighten($theme-color, 98%)
-			border solid 1px rgba($theme-color, 0.1)
+			background isDark ? #181b23 : var(--primaryLighten98)
+			border solid 1px var(--primaryAlpha01)
 			border-top none
 			border-radius 0 0 4px 4px
 			transition border-color .3s ease
 
 			&.with
-				border-bottom solid 1px rgba($theme-color, 0.1) !important
+				border-bottom solid 1px var(--primaryAlpha01) !important
 				border-radius 0
 
 			> .remain
@@ -540,7 +540,7 @@ root(isDark)
 				right 8px
 				margin 0
 				padding 0
-				color rgba($theme-color, 0.4)
+				color var(--primaryAlpha04)
 
 			> div
 				padding 4px
@@ -574,8 +574,8 @@ root(isDark)
 						cursor pointer
 
 		> .mk-poll-editor
-			background isDark ? #181b23 : lighten($theme-color, 98%)
-			border solid 1px rgba($theme-color, 0.1)
+			background isDark ? #181b23 : var(--primaryLighten98)
+			border solid 1px var(--primaryAlpha01)
 			border-top none
 			border-radius 0 0 4px 4px
 			transition border-color .3s ease
@@ -583,7 +583,7 @@ root(isDark)
 	> .mk-uploader
 		margin 8px 0 0 0
 		padding 8px
-		border solid 1px rgba($theme-color, 0.2)
+		border solid 1px var(--primaryAlpha02)
 		border-radius 4px
 
 	input[type='file']
@@ -600,22 +600,22 @@ root(isDark)
 		width 110px
 		height 40px
 		font-size 1em
-		color $theme-color-foreground
-		background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+		color var(--primaryForeground)
+		background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
 		outline none
-		border solid 1px lighten($theme-color, 15%)
+		border solid 1px var(--primaryLighten15)
 		border-radius 4px
 
 		&:not(:disabled)
 			font-weight bold
 
 		&:hover:not(:disabled)
-			background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-			border-color $theme-color
+			background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+			border-color var(--primary)
 
 		&:active:not(:disabled)
-			background $theme-color
-			border-color $theme-color
+			background var(--primary)
+			border-color var(--primary)
 
 		&:focus
 			&:after
@@ -626,7 +626,7 @@ root(isDark)
 				right -5px
 				bottom -5px
 				left -5px
-				border 2px solid rgba($theme-color, 0.3)
+				border 2px solid var(--primaryAlpha03)
 				border-radius 8px
 
 		&:disabled
@@ -636,13 +636,13 @@ root(isDark)
 		&.wait
 			background linear-gradient(
 				45deg,
-				darken($theme-color, 10%) 25%,
-				$theme-color              25%,
-				$theme-color              50%,
-				darken($theme-color, 10%) 50%,
-				darken($theme-color, 10%) 75%,
-				$theme-color              75%,
-				$theme-color
+				var(--primaryDarken10) 25%,
+				var(--primary)              25%,
+				var(--primary)              50%,
+				var(--primaryDarken10) 50%,
+				var(--primaryDarken10) 75%,
+				var(--primary)              75%,
+				var(--primary)
 			)
 			background-size 32px 32px
 			animation stripe-bg 1.5s linear infinite
@@ -661,7 +661,7 @@ root(isDark)
 		right 138px
 		margin 0
 		line-height 40px
-		color rgba($theme-color, 0.5)
+		color var(--primaryAlpha05)
 
 		&.over
 			color #ec3828
@@ -679,7 +679,7 @@ root(isDark)
 		width 40px
 		height 40px
 		font-size 1em
-		color isDark ? $theme-color : rgba($theme-color, 0.5)
+		color isDark ? var(--primary) : var(--primaryAlpha05)
 		background transparent
 		outline none
 		border solid 1px transparent
@@ -687,12 +687,12 @@ root(isDark)
 
 		&:hover
 			background transparent
-			border-color isDark ? rgba($theme-color, 0.5) : rgba($theme-color, 0.3)
+			border-color isDark ? var(--primaryAlpha05) : var(--primaryAlpha03)
 
 		&:active
-			color rgba($theme-color, 0.6)
-			background isDark ? transparent : linear-gradient(to bottom, lighten($theme-color, 80%) 0%, lighten($theme-color, 90%) 100%)
-			border-color rgba($theme-color, 0.5)
+			color var(--primaryAlpha06)
+			background isDark ? transparent : linear-gradient(to bottom, var(--primaryLighten80) 0%, var(--primaryLighten90) 100%)
+			border-color var(--primaryAlpha05)
 			box-shadow 0 2px 4px rgba(#000, 0.15) inset
 
 		&:focus
@@ -704,7 +704,7 @@ root(isDark)
 				right -5px
 				bottom -5px
 				left -5px
-				border 2px solid rgba($theme-color, 0.3)
+				border 2px solid var(--primaryAlpha03)
 				border-radius 8px
 
 	> .dropzone
@@ -713,7 +713,7 @@ root(isDark)
 		top 0
 		width 100%
 		height 100%
-		border dashed 2px rgba($theme-color, 0.5)
+		border dashed 2px var(--primaryAlpha05)
 		pointer-events none
 
 .mk-post-form[data-darkmode]
diff --git a/src/client/app/desktop/views/components/progress-dialog.vue b/src/client/app/desktop/views/components/progress-dialog.vue
index cc25ba8e30..feda6050bc 100644
--- a/src/client/app/desktop/views/components/progress-dialog.vue
+++ b/src/client/app/desktop/views/components/progress-dialog.vue
@@ -37,7 +37,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" module>
-@import '~const.styl'
+
 
 .body
 	padding 18px 24px 24px 24px
@@ -53,7 +53,7 @@ export default Vue.extend({
 	margin 0 0 4px 0
 	text-align center
 	line-height 16px
-	color rgba($theme-color, 0.7)
+	color var(--primaryAlpha07)
 
 	&:after
 		content '%'
@@ -69,21 +69,21 @@ export default Vue.extend({
 	overflow hidden
 
 	&::-webkit-progress-value
-		background $theme-color
+		background var(--primary)
 
 	&::-webkit-progress-bar
-		background rgba($theme-color, 0.1)
+		background var(--primaryAlpha01)
 
 .waiting
 	background linear-gradient(
 		45deg,
-		lighten($theme-color, 30%) 25%,
-		$theme-color               25%,
-		$theme-color               50%,
-		lighten($theme-color, 30%) 50%,
-		lighten($theme-color, 30%) 75%,
-		$theme-color               75%,
-		$theme-color
+		var(--primaryLighten30) 25%,
+		var(--primary)               25%,
+		var(--primary)               50%,
+		var(--primaryLighten30) 50%,
+		var(--primaryLighten30) 75%,
+		var(--primary)               75%,
+		var(--primary)
 	)
 	background-size 32px 32px
 	animation progress-dialog-tag-progress-waiting 1.5s linear infinite
diff --git a/src/client/app/desktop/views/components/renote-form.vue b/src/client/app/desktop/views/components/renote-form.vue
index c5192ecaac..ad23740f13 100644
--- a/src/client/app/desktop/views/components/renote-form.vue
+++ b/src/client/app/desktop/views/components/renote-form.vue
@@ -57,7 +57,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 
@@ -66,7 +66,7 @@ root(isDark)
 
 	> footer
 		height 72px
-		background isDark ? #313543 : lighten($theme-color, 95%)
+		background isDark ? #313543 : var(--primaryLighten95)
 
 		> .quote
 			position absolute
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index cf10ea0f56..4b8ee3c9cd 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -492,7 +492,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display flex
@@ -524,7 +524,7 @@ root(isDark)
 
 			&.active
 				margin-left 8px
-				color $theme-color !important
+				color var(--primary) !important
 
 	> .pages
 		width 100%
diff --git a/src/client/app/desktop/views/components/timeline.core.vue b/src/client/app/desktop/views/components/timeline.core.vue
index ff73bde95c..aef873dd11 100644
--- a/src/client/app/desktop/views/components/timeline.core.vue
+++ b/src/client/app/desktop/views/components/timeline.core.vue
@@ -215,7 +215,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mk-timeline-core
 	> .mk-friends-maker
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index c008c175de..32ed89ef0b 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -175,7 +175,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	background isDark ? #282C37 : #fff
@@ -207,7 +207,7 @@ root(isDark)
 					top -4px
 					right 4px
 					font-size 10px
-					color $theme-color
+					color var(--primary)
 
 				&:hover
 					color isDark ? #b2c1d5 : #aaa
@@ -216,7 +216,7 @@ root(isDark)
 					color isDark ? #b2c1d5 : #999
 
 				&[data-active]
-					color $theme-color
+					color var(--primary)
 					cursor default
 
 					&:before
@@ -227,7 +227,7 @@ root(isDark)
 						left 0
 						width 100%
 						height 2px
-						background $theme-color
+						background var(--primary)
 
 		> span
 			display inline-block
@@ -237,7 +237,7 @@ root(isDark)
 			user-select none
 
 			&[data-active]
-				color $theme-color
+				color var(--primary)
 				cursor default
 				font-weight bold
 
@@ -249,7 +249,7 @@ root(isDark)
 					left -8px
 					width calc(100% + 16px)
 					height 2px
-					background $theme-color
+					background var(--primary)
 
 			&:not([data-active])
 				color isDark ? #9aa2a7 : #6f7477
diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index 1e8a45beaf..301efeb3e2 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -127,7 +127,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	> .header
@@ -249,8 +249,8 @@ root(isDark)
 							padding 2px 8px
 							font-size 90%
 							font-style normal
-							background $theme-color
-							color $theme-color-foreground
+							background var(--primary)
+							color var(--primaryForeground)
 							border-radius 8px
 
 					> [data-fa]:first-child
@@ -269,11 +269,11 @@ root(isDark)
 
 					&:hover, &:active
 						text-decoration none
-						background $theme-color
-						color $theme-color-foreground
+						background var(--primary)
+						color var(--primaryForeground)
 
 					&:active
-						background darken($theme-color, 10%)
+						background var(--primaryDarken10)
 
 					&.signout
 						$color = #e64137
diff --git a/src/client/app/desktop/views/components/ui.header.nav.vue b/src/client/app/desktop/views/components/ui.header.nav.vue
index 6292b764c6..f41d4b8ecf 100644
--- a/src/client/app/desktop/views/components/ui.header.nav.vue
+++ b/src/client/app/desktop/views/components/ui.header.nav.vue
@@ -95,7 +95,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display inline-block
@@ -120,7 +120,7 @@ root(isDark)
 
 			&.active
 				> a
-					border-bottom solid 3px $theme-color
+					border-bottom solid 3px var(--primary)
 
 			> a
 				display inline-block
@@ -147,7 +147,7 @@ root(isDark)
 				> [data-fa]:last-child
 					margin-left 5px
 					font-size 10px
-					color $theme-color
+					color var(--primary)
 
 					@media (max-width 1100px)
 						margin-left -5px
diff --git a/src/client/app/desktop/views/components/ui.header.notifications.vue b/src/client/app/desktop/views/components/ui.header.notifications.vue
index 74dcd4111f..f9b68fa0e9 100644
--- a/src/client/app/desktop/views/components/ui.header.notifications.vue
+++ b/src/client/app/desktop/views/components/ui.header.notifications.vue
@@ -61,7 +61,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 
@@ -93,7 +93,7 @@ root(isDark)
 			margin-left -5px
 			vertical-align super
 			font-size 10px
-			color $theme-color
+			color var(--primary)
 
 	> .pop
 		$bgcolor = isDark ? #282c37 : #fff
diff --git a/src/client/app/desktop/views/components/ui.header.post.vue b/src/client/app/desktop/views/components/ui.header.post.vue
index 3665488542..9527792a34 100644
--- a/src/client/app/desktop/views/components/ui.header.post.vue
+++ b/src/client/app/desktop/views/components/ui.header.post.vue
@@ -17,7 +17,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .note
 	display inline-block
@@ -33,8 +33,8 @@ export default Vue.extend({
 		font-size 1.2em
 		font-weight normal
 		text-decoration none
-		color $theme-color-foreground
-		background $theme-color !important
+		color var(--primaryForeground)
+		background var(--primary) !important
 		outline none
 		border none
 		border-radius 4px
@@ -45,10 +45,10 @@ export default Vue.extend({
 			pointer-events none
 
 		&:hover
-			background lighten($theme-color, 10%) !important
+			background var(--primaryLighten10) !important
 
 		&:active
-			background darken($theme-color, 10%) !important
+			background var(--primaryDarken10) !important
 			transition background 0s ease
 
 </style>
diff --git a/src/client/app/desktop/views/components/ui.header.search.vue b/src/client/app/desktop/views/components/ui.header.search.vue
index 9a36e52fcc..d5794dc882 100644
--- a/src/client/app/desktop/views/components/ui.header.search.vue
+++ b/src/client/app/desktop/views/components/ui.header.search.vue
@@ -28,7 +28,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 root(isDark)
 	> [data-fa]
 		display block
@@ -67,7 +67,7 @@ root(isDark)
 			background isDark ? rgba(#fff, 0.04) : rgba(#000, 0.08)
 
 		&:focus
-			box-shadow 0 0 0 2px rgba($theme-color, 0.5) !important
+			box-shadow 0 0 0 2px var(--primaryAlpha05) !important
 
 .search[data-darkmode]
 	root(true)
diff --git a/src/client/app/desktop/views/components/user-preview.vue b/src/client/app/desktop/views/components/user-preview.vue
index f6d6d68a7f..f988bb21e9 100644
--- a/src/client/app/desktop/views/components/user-preview.vue
+++ b/src/client/app/desktop/views/components/user-preview.vue
@@ -83,7 +83,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	position absolute
@@ -151,7 +151,7 @@ root(isDark)
 
 			> span
 				font-size 1em
-				color $theme-color
+				color var(--primary)
 
 	> .mk-follow-button
 		position absolute
diff --git a/src/client/app/desktop/views/components/users-list.vue b/src/client/app/desktop/views/components/users-list.vue
index 05e2f4e5b3..1316f277b7 100644
--- a/src/client/app/desktop/views/components/users-list.vue
+++ b/src/client/app/desktop/views/components/users-list.vue
@@ -69,7 +69,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mk-users-list
 	height 100%
@@ -104,8 +104,8 @@ export default Vue.extend({
 
 				&[data-active]
 					font-weight bold
-					color $theme-color
-					border-color $theme-color
+					color var(--primary)
+					border-color var(--primary)
 					cursor default
 
 				> span
diff --git a/src/client/app/desktop/views/components/window.vue b/src/client/app/desktop/views/components/window.vue
index 5eece3795f..2b01c24ca8 100644
--- a/src/client/app/desktop/views/components/window.vue
+++ b/src/client/app/desktop/views/components/window.vue
@@ -463,7 +463,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display block
@@ -494,9 +494,9 @@ root(isDark)
 			&:not([data-is-modal])
 				> .body
 					if isDark
-						box-shadow 0 0 0px 1px rgba($theme-color, 0.5), 0 2px 12px 0 rgba(#000, 0.5)
+						box-shadow 0 0 0px 1px var(--primaryAlpha05), 0 2px 12px 0 rgba(#000, 0.5)
 					else
-						box-shadow 0 0 0px 1px rgba($theme-color, 0.5), 0 2px 6px 0 rgba(#000, 0.2)
+						box-shadow 0 0 0px 1px var(--primaryAlpha05), 0 2px 6px 0 rgba(#000, 0.2)
 
 		> .handle
 			$size = 8px
diff --git a/src/client/app/desktop/views/pages/admin/admin.announcements.vue b/src/client/app/desktop/views/pages/admin/admin.announcements.vue
index 532400deb2..272016b3f9 100644
--- a/src/client/app/desktop/views/pages/admin/admin.announcements.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.announcements.vue
@@ -31,7 +31,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .qldxjjsrseehkusjuoooapmsprvfrxyl
 	textarea
diff --git a/src/client/app/desktop/views/pages/admin/admin.dashboard.vue b/src/client/app/desktop/views/pages/admin/admin.dashboard.vue
index 5d0f6d451e..f5734012bd 100644
--- a/src/client/app/desktop/views/pages/admin/admin.dashboard.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.dashboard.vue
@@ -95,7 +95,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .obdskegsannmntldydackcpzezagxqfy
 	> .stats
@@ -112,7 +112,7 @@ export default Vue.extend({
 
 			> *:first-child
 				display block
-				color $theme-color
+				color var(--primary)
 
 			> *:last-child
 				font-size 70%
diff --git a/src/client/app/desktop/views/pages/admin/admin.hashtags.vue b/src/client/app/desktop/views/pages/admin/admin.hashtags.vue
index c6bf20361f..f491b85959 100644
--- a/src/client/app/desktop/views/pages/admin/admin.hashtags.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.hashtags.vue
@@ -31,7 +31,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .jdnqwkzlnxcfftthoybjxrebyolvoucw
 	textarea
diff --git a/src/client/app/desktop/views/pages/admin/admin.suspend-user.vue b/src/client/app/desktop/views/pages/admin/admin.suspend-user.vue
index 8d8e37e181..32295e3795 100644
--- a/src/client/app/desktop/views/pages/admin/admin.suspend-user.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.suspend-user.vue
@@ -39,7 +39,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 header
 	margin 10px 0
diff --git a/src/client/app/desktop/views/pages/admin/admin.unsuspend-user.vue b/src/client/app/desktop/views/pages/admin/admin.unsuspend-user.vue
index ec423969be..d6905fe9c0 100644
--- a/src/client/app/desktop/views/pages/admin/admin.unsuspend-user.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.unsuspend-user.vue
@@ -39,7 +39,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 header
 	margin 10px 0
diff --git a/src/client/app/desktop/views/pages/admin/admin.unverify-user.vue b/src/client/app/desktop/views/pages/admin/admin.unverify-user.vue
index e8204e69f4..d0cf635a98 100644
--- a/src/client/app/desktop/views/pages/admin/admin.unverify-user.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.unverify-user.vue
@@ -39,7 +39,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 header
 	margin 10px 0
diff --git a/src/client/app/desktop/views/pages/admin/admin.verify-user.vue b/src/client/app/desktop/views/pages/admin/admin.verify-user.vue
index 91fb04af80..9c0b0209b7 100644
--- a/src/client/app/desktop/views/pages/admin/admin.verify-user.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.verify-user.vue
@@ -39,7 +39,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 header
 	margin 10px 0
diff --git a/src/client/app/desktop/views/pages/admin/admin.vue b/src/client/app/desktop/views/pages/admin/admin.vue
index 510252b447..b874915f05 100644
--- a/src/client/app/desktop/views/pages/admin/admin.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.vue
@@ -70,7 +70,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus">
-@import '~const.styl'
+
 
 .mk-admin
 	display flex
@@ -106,7 +106,7 @@ export default Vue.extend({
 
 				&.active
 					margin-left 8px
-					color $theme-color !important
+					color var(--primary) !important
 
 	> main
 		width 100%
diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue
index 04aa5e82d1..10454b1cc6 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -269,7 +269,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	$header-height = 42px
@@ -283,10 +283,10 @@ root(isDark)
 	overflow hidden
 
 	&.draghover
-		box-shadow 0 0 0 2px rgba($theme-color, 0.8)
+		box-shadow 0 0 0 2px var(--primaryAlpha08)
 
 	&.dragging
-		box-shadow 0 0 0 2px rgba($theme-color, 0.4)
+		box-shadow 0 0 0 2px var(--primaryAlpha04)
 
 	&.dropready
 		*
@@ -329,7 +329,7 @@ root(isDark)
 			pointer-events none
 
 		&.indicate
-			box-shadow 0 3px 0 0 $theme-color
+			box-shadow 0 3px 0 0 var(--primary)
 
 		> span
 			[data-fa]
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index 99274b0f41..82e816cc8c 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -214,7 +214,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 mediaRoot(isDark)
 	font-size 13px
@@ -368,8 +368,8 @@ root(isDark)
 							padding 0 4px
 							margin-left 4px
 							font-size 80%
-							color $theme-color-foreground
-							background $theme-color
+							color var(--primaryForeground)
+							background var(--primary)
 							border-radius 4px
 
 					.mk-url-preview
@@ -430,7 +430,7 @@ root(isDark)
 						color #999
 
 					&.reacted
-						color $theme-color
+						color var(--primary)
 
 .zyjjkidcqjnlegkqebitfviomuqmseqk[data-darkmode]
 	root(true)
diff --git a/src/client/app/desktop/views/pages/deck/deck.notes.vue b/src/client/app/desktop/views/pages/deck/deck.notes.vue
index 2e7e30f12a..58f13dd57b 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notes.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notes.vue
@@ -195,7 +195,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	.transition
diff --git a/src/client/app/desktop/views/pages/deck/deck.vue b/src/client/app/desktop/views/pages/deck/deck.vue
index 810770a022..48c80c82c4 100644
--- a/src/client/app/desktop/views/pages/deck/deck.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.vue
@@ -221,7 +221,7 @@ export default Vue.extend({
 </style>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display flex
diff --git a/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue b/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
index 15397232e0..fe190bf892 100644
--- a/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
@@ -135,7 +135,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	.gqpwvtwtprsbmnssnbicggtwqhmylhnq
diff --git a/src/client/app/desktop/views/pages/selectdrive.vue b/src/client/app/desktop/views/pages/selectdrive.vue
index c846f2418f..b82ed0a208 100644
--- a/src/client/app/desktop/views/pages/selectdrive.vue
+++ b/src/client/app/desktop/views/pages/selectdrive.vue
@@ -54,7 +54,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mkp-selectdrive
 	display block
@@ -72,7 +72,7 @@ export default Vue.extend({
 		left 0
 		width 100%
 		height 72px
-		background lighten($theme-color, 95%)
+		background var(--primaryLighten95)
 
 		.upload
 			display inline-block
@@ -85,7 +85,7 @@ export default Vue.extend({
 			width 40px
 			height 40px
 			font-size 1em
-			color rgba($theme-color, 0.5)
+			color var(--primaryAlpha05)
 			background transparent
 			outline none
 			border solid 1px transparent
@@ -93,13 +93,13 @@ export default Vue.extend({
 
 			&:hover
 				background transparent
-				border-color rgba($theme-color, 0.3)
+				border-color var(--primaryAlpha03)
 
 			&:active
-				color rgba($theme-color, 0.6)
+				color var(--primaryAlpha06)
 				background transparent
-				border-color rgba($theme-color, 0.5)
-				box-shadow 0 2px 4px rgba(darken($theme-color, 50%), 0.15) inset
+				border-color var(--primaryAlpha05)
+				//box-shadow 0 2px 4px rgba(var(--primaryDarken50), 0.15) inset
 
 			&:focus
 				&:after
@@ -110,7 +110,7 @@ export default Vue.extend({
 					right -5px
 					bottom -5px
 					left -5px
-					border 2px solid rgba($theme-color, 0.3)
+					border 2px solid var(--primaryAlpha03)
 					border-radius 8px
 
 		.ok
@@ -136,7 +136,7 @@ export default Vue.extend({
 					right -5px
 					bottom -5px
 					left -5px
-					border 2px solid rgba($theme-color, 0.3)
+					border 2px solid var(--primaryAlpha03)
 					border-radius 8px
 
 			&:disabled
@@ -145,20 +145,20 @@ export default Vue.extend({
 
 		.ok
 			right 16px
-			color $theme-color-foreground
-			background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
-			border solid 1px lighten($theme-color, 15%)
+			color var(--primaryForeground)
+			background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+			border solid 1px var(--primaryLighten15)
 
 			&:not(:disabled)
 				font-weight bold
 
 			&:hover:not(:disabled)
-				background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-				border-color $theme-color
+				background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+				border-color var(--primary)
 
 			&:active:not(:disabled)
-				background $theme-color
-				border-color $theme-color
+				background var(--primary)
+				border-color var(--primary)
 
 		.cancel
 			right 148px
diff --git a/src/client/app/desktop/views/pages/stats/stats.vue b/src/client/app/desktop/views/pages/stats/stats.vue
index 7a4e4ab5ce..219885fb9e 100644
--- a/src/client/app/desktop/views/pages/stats/stats.vue
+++ b/src/client/app/desktop/views/pages/stats/stats.vue
@@ -34,7 +34,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus">
-@import '~const.styl'
+
 
 .tcrwdhwpuxrwmcttxjcsehgpagpstqey
 	width 100%
@@ -54,7 +54,7 @@ export default Vue.extend({
 
 			> *:first-child
 				display block
-				color $theme-color
+				color var(--primary)
 
 			> *:last-child
 				font-size 70%
diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue
index f727910e77..30dc74212d 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -100,7 +100,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	background isDark ? #282C37 : #fff
@@ -208,7 +208,7 @@ root(isDark)
 					margin-right 4px
 					font-size 1rem
 					font-weight bold
-					color $theme-color
+					color var(--primary)
 
 .header[data-darkmode]
 	root(true)
diff --git a/src/client/app/desktop/views/pages/user/user.timeline.vue b/src/client/app/desktop/views/pages/user/user.timeline.vue
index be6adaac93..3cde6cc10c 100644
--- a/src/client/app/desktop/views/pages/user/user.timeline.vue
+++ b/src/client/app/desktop/views/pages/user/user.timeline.vue
@@ -112,7 +112,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	background isDark ? #282C37 : #fff
@@ -133,7 +133,7 @@ root(isDark)
 			user-select none
 
 			&[data-active]
-				color $theme-color
+				color var(--primary)
 				cursor default
 				font-weight bold
 
@@ -145,7 +145,7 @@ root(isDark)
 					left -8px
 					width calc(100% + 16px)
 					height 2px
-					background $theme-color
+					background var(--primary)
 
 			&:not([data-active])
 				color isDark ? #9aa2a7 : #6f7477
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 7f5f4b9c37..05c32a7bd1 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -303,7 +303,7 @@ export default Vue.extend({
 </style>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display flex
@@ -385,7 +385,7 @@ root(isDark)
 			> .main
 				grid-row 1
 				grid-column 1 / 3
-				border-top solid 5px $theme-color
+				border-top solid 5px var(--primary)
 
 				> div
 					padding 32px
@@ -426,7 +426,7 @@ root(isDark)
 							cursor pointer
 
 							&:hover
-								color $theme-color
+								color var(--primary)
 
 					> .char
 						display block
diff --git a/src/client/app/desktop/views/widgets/post-form.vue b/src/client/app/desktop/views/widgets/post-form.vue
index 19a2790d95..a763f4d17c 100644
--- a/src/client/app/desktop/views/widgets/post-form.vue
+++ b/src/client/app/desktop/views/widgets/post-form.vue
@@ -68,7 +68,7 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mkw-post-form
 	background #fff
@@ -107,8 +107,8 @@ export default define({
 		margin 0
 		padding 0 10px
 		height 28px
-		color $theme-color-foreground
-		background $theme-color !important
+		color var(--primaryForeground)
+		background var(--primary) !important
 		outline none
 		border none
 		border-radius 4px
@@ -116,10 +116,10 @@ export default define({
 		cursor pointer
 
 		&:hover
-			background lighten($theme-color, 10%) !important
+			background var(--primaryLighten10) !important
 
 		&:active
-			background darken($theme-color, 10%) !important
+			background var(--primaryDarken10) !important
 			transition background 0s ease
 
 </style>
diff --git a/src/client/app/mobile/views/components/dialog.vue b/src/client/app/mobile/views/components/dialog.vue
index 6a0d74c752..fff44a28c3 100644
--- a/src/client/app/mobile/views/components/dialog.vue
+++ b/src/client/app/mobile/views/components/dialog.vue
@@ -91,7 +91,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mk-dialog
 	> .bg
@@ -145,20 +145,20 @@ export default Vue.extend({
 					margin 0 0.375em
 
 				&:hover
-					color $theme-color
+					color var(--primary)
 
 				&:active
-					color darken($theme-color, 10%)
+					color var(--primaryDarken10)
 					transition color 0s ease
 
 </style>
 
 <style lang="stylus" module>
-@import '~const.styl'
+
 
 .header
 	margin 0 0 1em 0
-	color $theme-color
+	color var(--primary)
 	// color #43A4EC
 	font-weight bold
 
diff --git a/src/client/app/mobile/views/components/drive.file.vue b/src/client/app/mobile/views/components/drive.file.vue
index 4375cfdd7b..ba58cf59a0 100644
--- a/src/client/app/mobile/views/components/drive.file.vue
+++ b/src/client/app/mobile/views/components/drive.file.vue
@@ -63,7 +63,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display block
@@ -150,7 +150,7 @@ root(isDark)
 					color #bf4633
 
 	&[data-is-selected]
-		background $theme-color
+		background var(--primary)
 
 		&, *
 			color #fff !important
diff --git a/src/client/app/mobile/views/components/follow-button.vue b/src/client/app/mobile/views/components/follow-button.vue
index ff7260edb5..cff830d998 100644
--- a/src/client/app/mobile/views/components/follow-button.vue
+++ b/src/client/app/mobile/views/components/follow-button.vue
@@ -93,7 +93,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mk-follow-button
 	display block
@@ -105,29 +105,29 @@ export default Vue.extend({
 	line-height 36px
 	font-size 14px
 	font-weight bold
-	color $theme-color
+	color var(--primary)
 	background transparent
 	outline none
-	border solid 1px $theme-color
+	border solid 1px var(--primary)
 	border-radius 36px
 
 	&:hover
-		background rgba($theme-color, 0.1)
+		background var(--primaryAlpha01)
 
 	&:active
-		background rgba($theme-color, 0.2)
+		background var(--primaryAlpha02)
 
 	&.active
-		color $theme-color-foreground
-		background $theme-color
+		color var(--primaryForeground)
+		background var(--primary)
 
 		&:hover
-			background lighten($theme-color, 10%)
-			border-color lighten($theme-color, 10%)
+			background var(--primaryLighten10)
+			border-color var(--primaryLighten10)
 
 		&:active
-			background darken($theme-color, 10%)
-			border-color darken($theme-color, 10%)
+			background var(--primaryDarken10)
+			border-color var(--primaryDarken10)
 
 	&.wait
 		cursor wait !important
diff --git a/src/client/app/mobile/views/components/mute-button.vue b/src/client/app/mobile/views/components/mute-button.vue
index 3cb568615d..316fbda8f1 100644
--- a/src/client/app/mobile/views/components/mute-button.vue
+++ b/src/client/app/mobile/views/components/mute-button.vue
@@ -41,11 +41,11 @@ export default Vue.extend({
 
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mk-mute-button
   display block
-  user-select none 
+  user-select none
   cursor pointer
   padding 0 16px
   margin 0
@@ -53,27 +53,27 @@ export default Vue.extend({
   line-height 36px
   font-size 14px
   font-weight bold
-  color $theme-color
+  color var(--primary)
   background transparent
   outline none
-  border solid 1px $theme-color
+  border solid 1px var(--primary)
   border-radius 36px
 
   &:hover
-    background rgba($theme-color, 0.1)
+    background var(--primaryAlpha01)
 
   &:active
-    background rgba($theme-color, 0.2)
+    background var(--primaryAlpha02)
 
   &.active
-    color $theme-color-foreground
-    background $theme-color
+    color var(--primaryForeground)
+    background var(--primary)
 
     &:hover
-      background lighten($theme-color, 10%)
-      border-color lighten($theme-color, 10%)
+      background var(--primaryLighten10)
+      border-color var(--primaryLighten10)
     &:active
-      background darken($theme-color, 10%)
-      border-color darken($theme-color, 10%)
+      background var(--primaryDarken10)
+      border-color var(--primaryDarken10)
 
 </style>
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 68be9f8ac4..6daf375ed2 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -223,7 +223,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	overflow hidden
@@ -422,7 +422,7 @@ root(isDark)
 					color #999
 
 				&.reacted
-					color $theme-color
+					color var(--primary)
 
 	> .replies
 		> *
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 0ce72cab11..2bfd8f8acc 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -228,7 +228,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	font-size 12px
@@ -395,8 +395,8 @@ root(isDark)
 							padding 0 4px
 							margin-left 4px
 							font-size 80%
-							color $theme-color-foreground
-							background $theme-color
+							color var(--primaryForeground)
+							background var(--primary)
 							border-radius 4px
 
 					.mk-url-preview
@@ -457,7 +457,7 @@ root(isDark)
 						color #999
 
 					&.reacted
-						color $theme-color
+						color var(--primary)
 
 .note[data-darkmode]
 	root(true)
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index 401df3ae5b..83674a33dc 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -217,7 +217,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	overflow hidden
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 1294273a2a..742163696e 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -324,7 +324,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	max-width 500px
@@ -376,8 +376,8 @@ root(isDark)
 					padding 0 16px
 					line-height 34px
 					vertical-align bottom
-					color $theme-color-foreground
-					background $theme-color
+					color var(--primaryForeground)
+					background var(--primary)
 					border-radius 4px
 
 					&:disabled
diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
index 15c8299c2e..b859c22887 100644
--- a/src/client/app/mobile/views/components/ui.header.vue
+++ b/src/client/app/mobile/views/components/ui.header.vue
@@ -118,7 +118,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	$height = 48px
@@ -134,7 +134,7 @@ root(isDark)
 
 	> .indicator
 		height 3px
-		background $theme-color
+		background var(--primary)
 
 	> .warn
 		display block
@@ -216,7 +216,7 @@ root(isDark)
 				left 8px
 				pointer-events none
 				font-size 10px
-				color $theme-color
+				color var(--primary)
 
 			> button:last-child
 				display block
diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index c3ae05fef6..29dcf18021 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -121,7 +121,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	$color = isDark ? #c9d2e0 : #777
@@ -198,11 +198,11 @@ root(isDark)
 				text-decoration none
 
 				&[data-active]
-					color $theme-color-foreground
-					background $theme-color
+					color var(--primaryForeground)
+					background var(--primary)
 
 					> [data-fa]:last-child
-						color $theme-color-foreground
+						color var(--primaryForeground)
 
 				> [data-fa]:first-child
 					margin-right 0.5em
@@ -212,7 +212,7 @@ root(isDark)
 				> [data-fa].circle
 					margin-left 6px
 					font-size 10px
-					color $theme-color
+					color var(--primary)
 
 				> [data-fa]:last-child
 					position absolute
diff --git a/src/client/app/mobile/views/components/users-list.vue b/src/client/app/mobile/views/components/users-list.vue
index a57b821293..f06f5245b8 100644
--- a/src/client/app/mobile/views/components/users-list.vue
+++ b/src/client/app/mobile/views/components/users-list.vue
@@ -65,7 +65,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mk-users-list
 
@@ -87,8 +87,8 @@ export default Vue.extend({
 
 			&[data-active]
 				font-weight bold
-				color $theme-color
-				border-color $theme-color
+				color var(--primary)
+				border-color var(--primary)
 
 			> span
 				display inline-block
diff --git a/src/client/app/mobile/views/pages/favorites.vue b/src/client/app/mobile/views/pages/favorites.vue
index 53512e804c..a25f70147b 100644
--- a/src/client/app/mobile/views/pages/favorites.vue
+++ b/src/client/app/mobile/views/pages/favorites.vue
@@ -71,7 +71,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 main
 	width 100%
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index ca62d4e2f8..c2ab5d5623 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -154,7 +154,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	> .nav
@@ -215,8 +215,8 @@ root(isDark)
 					color isDark ? #cdd0d8 : #666
 
 					&[data-active]
-						color $theme-color-foreground
-						background $theme-color
+						color var(--primaryForeground)
+						background var(--primary)
 
 					&:not([data-active]):hover
 						background isDark ? #353e4a : #eee
@@ -224,7 +224,7 @@ root(isDark)
 					> .badge
 						margin-left 6px
 						font-size 10px
-						color $theme-color
+						color var(--primary)
 
 	> .tl
 		max-width 680px
@@ -246,7 +246,7 @@ main:not([data-darkmode])
 </style>
 
 <style lang="stylus" module>
-@import '~const.styl'
+
 
 .title
 	i
@@ -255,7 +255,7 @@ main:not([data-darkmode])
 .badge
 	margin-left 6px
 	font-size 10px
-	color $theme-color
+	color var(--primary)
 	vertical-align middle
 
 </style>
diff --git a/src/client/app/mobile/views/pages/notifications.vue b/src/client/app/mobile/views/pages/notifications.vue
index bddcd457bb..ce33332faf 100644
--- a/src/client/app/mobile/views/pages/notifications.vue
+++ b/src/client/app/mobile/views/pages/notifications.vue
@@ -34,7 +34,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 main
 	width 100%
diff --git a/src/client/app/mobile/views/pages/received-follow-requests.vue b/src/client/app/mobile/views/pages/received-follow-requests.vue
index 77938c3d60..c2b2606fd8 100644
--- a/src/client/app/mobile/views/pages/received-follow-requests.vue
+++ b/src/client/app/mobile/views/pages/received-follow-requests.vue
@@ -52,7 +52,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 main
 	width 100%
diff --git a/src/client/app/mobile/views/pages/user-list.vue b/src/client/app/mobile/views/pages/user-list.vue
index 1c6a829cd5..f8c8aafa61 100644
--- a/src/client/app/mobile/views/pages/user-list.vue
+++ b/src/client/app/mobile/views/pages/user-list.vue
@@ -53,7 +53,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 main
 	width 100%
diff --git a/src/client/app/mobile/views/pages/user-lists.vue b/src/client/app/mobile/views/pages/user-lists.vue
index 5ee0636dea..fc80f5d1c6 100644
--- a/src/client/app/mobile/views/pages/user-lists.vue
+++ b/src/client/app/mobile/views/pages/user-lists.vue
@@ -51,7 +51,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 main
 	width 100%
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index c1082f31a9..1ff81fc0c6 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -115,7 +115,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	$bg = isDark ? #22252f : #f7f7f7
@@ -275,8 +275,8 @@ root(isDark)
 
 				&[data-active]
 					font-weight bold
-					color $theme-color
-					border-color $theme-color
+					color var(--primary)
+					border-color var(--primary)
 
 	> .body
 		max-width 680px
diff --git a/src/client/const.styl b/src/client/const.styl
deleted file mode 100644
index b6560701d9..0000000000
--- a/src/client/const.styl
+++ /dev/null
@@ -1,4 +0,0 @@
-json('../const.json')
-
-$theme-color = themeColor
-$theme-color-foreground = themeColorForeground
diff --git a/src/client/style.styl b/src/client/style.styl
index 6d1e53e5a6..111e167204 100644
--- a/src/client/style.styl
+++ b/src/client/style.styl
@@ -1,10 +1,8 @@
 @charset 'utf-8'
 
-@import "./const"
-
 /*
 	::selection
-		background $theme-color
+		background var(--primary)
 		color #fff
 */
 
@@ -24,10 +22,8 @@ html, body
 
 a
 	text-decoration none
-	color $theme-color
+	color var(--primary)
 	cursor pointer
-	tap-highlight-color rgba($theme-color, 0.7) !important
-	-webkit-tap-highlight-color rgba($theme-color, 0.7) !important
 
 	&:hover
 		text-decoration underline
@@ -35,3 +31,9 @@ a
 	*
 		cursor pointer
 
+@css {
+	a {
+		tap-highlight-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.7) !important;
+		-webkit-tap-highlight-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.7) !important;
+	}
+}
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 4ea0a1a649..ffe0ffa3ce 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -3,6 +3,7 @@
 		"name": "Dark"
 	},
 	"primary": "#fb4e4e",
+	"primaryForeground": "#fff",
 	"bg": "#191B22",
 	"scrollbarTrack": "#282C37",
 	"scrollbarHandle": "#454954",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 00a74a53c5..f4d061e5ce 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -3,6 +3,7 @@
 		"name": "Light"
 	},
 	"primary": "#fb4e4e",
+	"primaryForeground": "#fff",
 	"bg": "#f7f7f7",
 	"scrollbarTrack": "#fff",
 	"scrollbarHandle": "#00000033",

From f5f2215b47ce4590788dce2af1c8e4e586548e77 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 26 Sep 2018 20:28:13 +0900
Subject: [PATCH 04/72] wip

---
 src/client/app/common/views/components/autocomplete.vue       | 2 +-
 .../common/views/components/games/reversi/reversi.index.vue   | 4 ++--
 .../common/views/components/games/reversi/reversi.room.vue    | 4 ++--
 src/client/app/common/views/components/messaging-room.vue     | 2 +-
 src/client/app/common/views/components/messaging.vue          | 2 +-
 src/client/app/common/views/components/ui/card.vue            | 2 +-
 src/client/app/common/views/components/welcome-timeline.vue   | 2 +-
 src/client/app/common/views/pages/follow.vue                  | 2 +-
 src/client/app/common/views/widgets/donation.vue              | 2 +-
 src/client/app/common/views/widgets/memo.vue                  | 2 +-
 src/client/app/common/views/widgets/nav.vue                   | 2 +-
 src/client/app/desktop/views/components/calendar.vue          | 2 +-
 src/client/app/desktop/views/components/context-menu.vue      | 2 +-
 src/client/app/desktop/views/components/drive.vue             | 2 +-
 src/client/app/desktop/views/components/note-detail.vue       | 2 +-
 src/client/app/desktop/views/components/notes.note.vue        | 2 +-
 src/client/app/desktop/views/components/notes.vue             | 2 +-
 src/client/app/desktop/views/components/timeline.vue          | 4 ++--
 src/client/app/desktop/views/components/ui-notification.vue   | 2 +-
 src/client/app/desktop/views/components/ui.header.account.vue | 2 +-
 .../app/desktop/views/components/ui.header.notifications.vue  | 2 +-
 src/client/app/desktop/views/components/user-preview.vue      | 4 ++--
 src/client/app/desktop/views/components/widget-container.vue  | 4 ++--
 src/client/app/desktop/views/components/window.vue            | 4 ++--
 src/client/app/desktop/views/pages/deck/deck.column.vue       | 4 ++--
 src/client/app/desktop/views/pages/deck/deck.notes.vue        | 2 +-
 .../app/desktop/views/pages/user/user.followers-you-know.vue  | 2 +-
 src/client/app/desktop/views/pages/user/user.friends.vue      | 2 +-
 src/client/app/desktop/views/pages/user/user.header.vue       | 2 +-
 src/client/app/desktop/views/pages/user/user.photos.vue       | 2 +-
 src/client/app/desktop/views/pages/user/user.profile.vue      | 2 +-
 src/client/app/desktop/views/pages/user/user.timeline.vue     | 4 ++--
 src/client/app/desktop/views/pages/welcome.vue                | 4 ++--
 src/client/app/desktop/views/widgets/profile.vue              | 2 +-
 src/client/app/mobile/views/components/drive-file-chooser.vue | 2 +-
 src/client/app/mobile/views/components/drive.vue              | 4 ++--
 src/client/app/mobile/views/components/note-card.vue          | 2 +-
 src/client/app/mobile/views/components/note-detail.vue        | 2 +-
 src/client/app/mobile/views/components/notes.vue              | 2 +-
 src/client/app/mobile/views/components/post-form.vue          | 2 +-
 src/client/app/mobile/views/components/widget-container.vue   | 2 +-
 src/client/app/mobile/views/pages/user/home.vue               | 2 +-
 src/client/theme/dark.json                                    | 4 +++-
 src/client/theme/light.json                                   | 4 +++-
 44 files changed, 58 insertions(+), 54 deletions(-)

diff --git a/src/client/app/common/views/components/autocomplete.vue b/src/client/app/common/views/components/autocomplete.vue
index 99a87520a4..bba6f4f7b2 100644
--- a/src/client/app/common/views/components/autocomplete.vue
+++ b/src/client/app/common/views/components/autocomplete.vue
@@ -267,7 +267,7 @@ root(isDark)
 	max-width 100%
 	margin-top calc(1em + 8px)
 	overflow hidden
-	background isDark ? #313543 : #fff
+	background var(--faceHeader)
 	border solid 1px rgba(#000, 0.1)
 	border-radius 4px
 	transition top 0.1s ease, left 0.1s ease
diff --git a/src/client/app/common/views/components/games/reversi/reversi.index.vue b/src/client/app/common/views/components/games/reversi/reversi.index.vue
index f6c7f0e3c2..44a1262636 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.index.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.index.vue
@@ -190,7 +190,7 @@ root(isDark)
 		margin 8px 0
 		padding 8px
 		color isDark ? #fff : #677f84
-		background isDark ? #282c37 : #fff
+		background var(--face)
 		box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
 		border-radius 6px
 		cursor pointer
@@ -222,7 +222,7 @@ root(isDark)
 		margin 8px 0
 		padding 8px
 		color isDark ? #fff : #677f84
-		background isDark ? #282c37 : #fff
+		background var(--face)
 		box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
 		border-radius 6px
 		cursor pointer
diff --git a/src/client/app/common/views/components/games/reversi/reversi.room.vue b/src/client/app/common/views/components/games/reversi/reversi.room.vue
index d4b91ae7a7..072f3eda12 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.room.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.room.vue
@@ -273,7 +273,7 @@ root(isDark)
 					> select
 						width 100%
 						padding 12px 14px
-						background isDark ? #282C37 : #fff
+						background var(--face)
 						border 1px solid isDark ? #6a707d : #dcdfe6
 						border-radius 4px
 						color isDark ? #fff : #606266
@@ -331,7 +331,7 @@ root(isDark)
 		.card
 			max-width 400px
 			border-radius 4px
-			background isDark ? #282C37 : #fff
+			background var(--face)
 			color isDark ? #fff : #303133
 			box-shadow 0 2px 12px 0 rgba(#000, isDark ? 0.7 : 0.1)
 
diff --git a/src/client/app/common/views/components/messaging-room.vue b/src/client/app/common/views/components/messaging-room.vue
index 5bdf8b9034..52abfa4e1d 100644
--- a/src/client/app/common/views/components/messaging-room.vue
+++ b/src/client/app/common/views/components/messaging-room.vue
@@ -369,7 +369,7 @@ root(isDark)
 		max-width 600px
 		margin 0 auto
 		padding 0
-		background rgba(isDark ? #282c37 : #fff, 0.95)
+		//background rgba(var(--face), 0.95)
 		background-clip content-box
 
 		> .new-message
diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue
index 7181ddd01c..a984c980b1 100644
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@@ -329,7 +329,7 @@ root(isDark)
 		> a
 			display block
 			text-decoration none
-			background isDark ? #282c37 : #fff
+			background var(--face)
 			border-bottom solid 1px isDark ? #1c2023 : #eee
 
 			*
diff --git a/src/client/app/common/views/components/ui/card.vue b/src/client/app/common/views/components/ui/card.vue
index a9e0493810..be24027f6c 100644
--- a/src/client/app/common/views/components/ui/card.vue
+++ b/src/client/app/common/views/components/ui/card.vue
@@ -25,7 +25,7 @@ export default Vue.extend({
 root(isDark)
 	margin 16px
 	color isDark ? #fff : #000
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
 
 	> header
diff --git a/src/client/app/common/views/components/welcome-timeline.vue b/src/client/app/common/views/components/welcome-timeline.vue
index 965ec78559..938ab602f0 100644
--- a/src/client/app/common/views/components/welcome-timeline.vue
+++ b/src/client/app/common/views/components/welcome-timeline.vue
@@ -91,7 +91,7 @@ export default Vue.extend({
 	transform translateY(-30px)
 
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 
 	> div
 		> *
diff --git a/src/client/app/common/views/pages/follow.vue b/src/client/app/common/views/pages/follow.vue
index d81e4c0820..5e2d448d8b 100644
--- a/src/client/app/common/views/pages/follow.vue
+++ b/src/client/app/common/views/pages/follow.vue
@@ -116,7 +116,7 @@ root(isDark)
 	text-align center
 	color isDark ? #9baec8 : #868c8c
 
-	$bg = isDark ? #282C37 : #fff
+	$bg = var(--face)
 
 	@media (max-width 400px)
 		padding 16px
diff --git a/src/client/app/common/views/widgets/donation.vue b/src/client/app/common/views/widgets/donation.vue
index 544ca1bd9d..a91aa8e749 100644
--- a/src/client/app/common/views/widgets/donation.vue
+++ b/src/client/app/common/views/widgets/donation.vue
@@ -31,7 +31,7 @@ export default define({
 
 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282c37 : #fff
+	background var(--face)
 	border solid 1px isDark ? #c3831c : #ead8bb
 	border-radius 6px
 
diff --git a/src/client/app/common/views/widgets/memo.vue b/src/client/app/common/views/widgets/memo.vue
index 079522d39b..42df683883 100644
--- a/src/client/app/common/views/widgets/memo.vue
+++ b/src/client/app/common/views/widgets/memo.vue
@@ -70,7 +70,7 @@ root(isDark)
 			min-width 100%
 			padding 16px
 			color isDark ? #fff : #222
-			background isDark ? #282c37 : #fff
+			background var(--face)
 			border none
 			border-bottom solid 1px isDark ? #1c2023 : #eee
 			border-radius 0
diff --git a/src/client/app/common/views/widgets/nav.vue b/src/client/app/common/views/widgets/nav.vue
index 0cbf7c158e..04dfe97c72 100644
--- a/src/client/app/common/views/widgets/nav.vue
+++ b/src/client/app/common/views/widgets/nav.vue
@@ -21,7 +21,7 @@ root(isDark)
 		padding 16px
 		font-size 12px
 		color isDark ? #9aa4b3 : #aaa
-		background isDark ? #282c37 : #fff
+		background var(--face)
 
 		a
 			color isDark ? #9aa4b3 : #999
diff --git a/src/client/app/desktop/views/components/calendar.vue b/src/client/app/desktop/views/components/calendar.vue
index 2414ced0c9..cd73ab350b 100644
--- a/src/client/app/desktop/views/components/calendar.vue
+++ b/src/client/app/desktop/views/components/calendar.vue
@@ -132,7 +132,7 @@ export default Vue.extend({
 
 root(isDark)
 	color isDark ? #c5ced6 : #777
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 	overflow hidden
diff --git a/src/client/app/desktop/views/components/context-menu.vue b/src/client/app/desktop/views/components/context-menu.vue
index 49aeac143f..170dcf55a1 100644
--- a/src/client/app/desktop/views/components/context-menu.vue
+++ b/src/client/app/desktop/views/components/context-menu.vue
@@ -82,7 +82,7 @@ root(isDark)
 	z-index 4096
 	width $width
 	font-size 0.8em
-	background isDark ? #282c37 : #fff
+	background var(--face)
 	border-radius 0 4px 4px 4px
 	box-shadow 2px 2px 8px rgba(#000, 0.2)
 	opacity 0
diff --git a/src/client/app/desktop/views/components/drive.vue b/src/client/app/desktop/views/components/drive.vue
index ccfdb3159f..a1748963aa 100644
--- a/src/client/app/desktop/views/components/drive.vue
+++ b/src/client/app/desktop/views/components/drive.vue
@@ -596,7 +596,7 @@ root(isDark)
 		overflow auto
 		font-size 0.9em
 		color isDark ? #d2d9dc : #555
-		background isDark ? #282c37 : #fff
+		background var(--face)
 		box-shadow 0 1px 0 rgba(#000, 0.05)
 
 		&, *
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index f004ca88ee..35eb6ac45d 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -230,7 +230,7 @@ export default Vue.extend({
 root(isDark)
 	overflow hidden
 	text-align left
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index a91212221b..13a8641170 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -322,7 +322,7 @@ export default Vue.extend({
 root(isDark)
 	margin 0
 	padding 0
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	border-bottom solid 1px isDark ? #1c2023 : #eaeaea
 
 	&[data-round]
diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index 2e3ffd171b..0bd45b1c21 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -260,7 +260,7 @@ root(isDark)
 			width 100%
 			text-align center
 			color #ccc
-			background isDark ? #282C37 : #fff
+			background var(--face)
 			border-top solid 1px isDark ? #1c2023 : #eaeaea
 			border-bottom-left-radius 6px
 			border-bottom-right-radius 6px
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index 32ed89ef0b..7800eae52d 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -178,7 +178,7 @@ export default Vue.extend({
 
 
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 	overflow hidden
@@ -186,7 +186,7 @@ root(isDark)
 	> header
 		padding 0 8px
 		z-index 10
-		background isDark ? #313543 : #fff
+		background var(--faceHeader)
 		box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
 
 		> .buttons
diff --git a/src/client/app/desktop/views/components/ui-notification.vue b/src/client/app/desktop/views/components/ui-notification.vue
index 7519124870..883a880e5d 100644
--- a/src/client/app/desktop/views/components/ui-notification.vue
+++ b/src/client/app/desktop/views/components/ui-notification.vue
@@ -47,7 +47,7 @@ root(isDark)
 	padding 128px 0 0 0
 	width 500px
 	color rgba(isDark ? #fff : #000, 0.6)
-	background rgba(isDark ? #282C37 : #fff, 0.9)
+	//background rgba(var(--face), 0.9)
 	border-radius 0 0 8px 8px
 	box-shadow 0 2px 4px rgba(#000, isDark ? 0.4 : 0.2)
 	transform translateY(-64px)
diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index 301efeb3e2..c728fa42be 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -177,7 +177,7 @@ root(isDark)
 			transition filter 100ms ease
 
 	> .menu
-		$bgcolor = isDark ? #282c37 : #fff
+		$bgcolor = var(--face)
 		display block
 		position absolute
 		top 56px
diff --git a/src/client/app/desktop/views/components/ui.header.notifications.vue b/src/client/app/desktop/views/components/ui.header.notifications.vue
index f9b68fa0e9..2a38655f3a 100644
--- a/src/client/app/desktop/views/components/ui.header.notifications.vue
+++ b/src/client/app/desktop/views/components/ui.header.notifications.vue
@@ -96,7 +96,7 @@ root(isDark)
 			color var(--primary)
 
 	> .pop
-		$bgcolor = isDark ? #282c37 : #fff
+		$bgcolor = var(--face)
 		display block
 		position absolute
 		top 56px
diff --git a/src/client/app/desktop/views/components/user-preview.vue b/src/client/app/desktop/views/components/user-preview.vue
index f988bb21e9..01b6cdbdc5 100644
--- a/src/client/app/desktop/views/components/user-preview.vue
+++ b/src/client/app/desktop/views/components/user-preview.vue
@@ -90,7 +90,7 @@ root(isDark)
 	z-index 2048
 	margin-top -8px
 	width 250px
-	background isDark ? #282c37 : #fff
+	background var(--face)
 	background-clip content-box
 	border solid 1px rgba(#000, 0.1)
 	border-radius 4px
@@ -111,7 +111,7 @@ root(isDark)
 		z-index 2
 		width 58px
 		height 58px
-		border solid 3px isDark ? #282c37 : #fff
+		border solid 3px var(--face)
 		border-radius 8px
 
 	> .title
diff --git a/src/client/app/desktop/views/components/widget-container.vue b/src/client/app/desktop/views/components/widget-container.vue
index fbf7691cd3..d17b9c91d8 100644
--- a/src/client/app/desktop/views/components/widget-container.vue
+++ b/src/client/app/desktop/views/components/widget-container.vue
@@ -35,7 +35,7 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 	overflow hidden
@@ -45,7 +45,7 @@ root(isDark)
 		box-shadow none !important
 
 	> header
-		background isDark ? #313543 : #fff
+		background var(--faceHeader)
 
 		> .title
 			z-index 1
diff --git a/src/client/app/desktop/views/components/window.vue b/src/client/app/desktop/views/components/window.vue
index 2b01c24ca8..15aa158073 100644
--- a/src/client/app/desktop/views/components/window.vue
+++ b/src/client/app/desktop/views/components/window.vue
@@ -562,7 +562,7 @@ root(isDark)
 		> .body
 			height 100%
 			overflow hidden
-			background isDark ? #282C37 : #fff
+			background var(--face)
 			border-radius 6px
 
 			if isDark
@@ -578,7 +578,7 @@ root(isDark)
 				overflow hidden
 				white-space nowrap
 				cursor move
-				background isDark ? #313543 : #fff
+				background var(--faceHeader)
 				border-radius 6px 6px 0 0
 				box-shadow 0 1px 0 rgba(#000, 0.1)
 
diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue
index 10454b1cc6..1cf8900ee5 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -277,7 +277,7 @@ root(isDark)
 	width 330px
 	min-width 330px
 	height 100%
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	border-radius 6px
 	//box-shadow 0 2px 16px rgba(#000, 0.1)
 	overflow hidden
@@ -318,7 +318,7 @@ root(isDark)
 		padding 0 16px
 		font-size 14px
 		color isDark ? #e3e5e8 : #888
-		background isDark ? #313543 : #fff
+		background var(--faceHeader)
 		box-shadow 0 1px rgba(#000, 0.15)
 		cursor pointer
 
diff --git a/src/client/app/desktop/views/pages/deck/deck.notes.vue b/src/client/app/desktop/views/pages/deck/deck.notes.vue
index 58f13dd57b..1217e0d4da 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notes.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notes.vue
@@ -232,7 +232,7 @@ root(isDark)
 			width 100%
 			text-align center
 			color #ccc
-			background isDark ? #282C37 : #fff
+			background var(--face)
 			border-top solid 1px isDark ? #1c2023 : #eaeaea
 			border-bottom-left-radius 6px
 			border-bottom-right-radius 6px
diff --git a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
index 0965d801c9..212e21a7a9 100644
--- a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
+++ b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
@@ -37,7 +37,7 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 
diff --git a/src/client/app/desktop/views/pages/user/user.friends.vue b/src/client/app/desktop/views/pages/user/user.friends.vue
index de37dc95c9..0a329b3d8e 100644
--- a/src/client/app/desktop/views/pages/user/user.friends.vue
+++ b/src/client/app/desktop/views/pages/user/user.friends.vue
@@ -41,7 +41,7 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 	overflow hidden
diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue
index 30dc74212d..ec46e955b5 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -103,7 +103,7 @@ export default Vue.extend({
 
 
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 	overflow hidden
diff --git a/src/client/app/desktop/views/pages/user/user.photos.vue b/src/client/app/desktop/views/pages/user/user.photos.vue
index 591edfd829..99e064446d 100644
--- a/src/client/app/desktop/views/pages/user/user.photos.vue
+++ b/src/client/app/desktop/views/pages/user/user.photos.vue
@@ -40,7 +40,7 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 	overflow hidden
diff --git a/src/client/app/desktop/views/pages/user/user.profile.vue b/src/client/app/desktop/views/pages/user/user.profile.vue
index 1ea242270a..e5ea8d1cc9 100644
--- a/src/client/app/desktop/views/pages/user/user.profile.vue
+++ b/src/client/app/desktop/views/pages/user/user.profile.vue
@@ -86,7 +86,7 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 
diff --git a/src/client/app/desktop/views/pages/user/user.timeline.vue b/src/client/app/desktop/views/pages/user/user.timeline.vue
index 3cde6cc10c..fe3ca9154b 100644
--- a/src/client/app/desktop/views/pages/user/user.timeline.vue
+++ b/src/client/app/desktop/views/pages/user/user.timeline.vue
@@ -115,14 +115,14 @@ export default Vue.extend({
 
 
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	border-radius var(--round)
 	overflow hidden
 
 	> header
 		padding 0 8px
 		z-index 10
-		background isDark ? #313543 : #fff
+		background var(--faceHeader)
 		box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
 
 		> span
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 05c32a7bd1..405fcb76d0 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -355,7 +355,7 @@ root(isDark)
 
 		.block
 			color isDark ? #fff : #444
-			background isDark ? #282C37 : #fff
+			background var(--face)
 			box-shadow var(--shadow)
 			//border-radius 8px
 			overflow auto
@@ -364,7 +364,7 @@ root(isDark)
 				z-index 1
 				padding 0 16px
 				line-height 48px
-				background isDark ? #313543 : #fff
+				background var(--faceHeader)
 
 				if !isDark
 					box-shadow 0 1px 0px rgba(0, 0, 0, 0.1)
diff --git a/src/client/app/desktop/views/widgets/profile.vue b/src/client/app/desktop/views/widgets/profile.vue
index 04ef18c8e3..aea0c90e34 100644
--- a/src/client/app/desktop/views/widgets/profile.vue
+++ b/src/client/app/desktop/views/widgets/profile.vue
@@ -100,7 +100,7 @@ root(isDark)
 		left 16px
 		width 58px
 		height 58px
-		border solid 3px isDark ? #282c37 : #fff
+		border solid 3px var(--face)
 		border-radius 8px
 		cursor pointer
 
diff --git a/src/client/app/mobile/views/components/drive-file-chooser.vue b/src/client/app/mobile/views/components/drive-file-chooser.vue
index 92ac211af2..6d3fc2343a 100644
--- a/src/client/app/mobile/views/components/drive-file-chooser.vue
+++ b/src/client/app/mobile/views/components/drive-file-chooser.vue
@@ -59,7 +59,7 @@ root(isDark)
 	> .body
 		width 100%
 		height 100%
-		background isDark ? #282c37 : #fff
+		background var(--face)
 
 		> header
 			border-bottom solid 1px isDark ? #1b1f29 : #eee
diff --git a/src/client/app/mobile/views/components/drive.vue b/src/client/app/mobile/views/components/drive.vue
index 36a6ea2f40..76d6c2737d 100644
--- a/src/client/app/mobile/views/components/drive.vue
+++ b/src/client/app/mobile/views/components/drive.vue
@@ -474,7 +474,7 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282c37 : #fff
+	background var(--face)
 
 	> nav
 		display block
@@ -490,7 +490,7 @@ root(isDark)
 		color rgba(isDark ? #fff : #000, 0.67)
 		-webkit-backdrop-filter blur(12px)
 		backdrop-filter blur(12px)
-		background-color rgba(isDark ? #313543 : #fff, 0.75)
+		//background-color rgba(var(--faceHeader), 0.75)
 		border-bottom solid 1px rgba(#000, 0.13)
 
 		> p
diff --git a/src/client/app/mobile/views/components/note-card.vue b/src/client/app/mobile/views/components/note-card.vue
index e8427798cd..e30e6c1c8f 100644
--- a/src/client/app/mobile/views/components/note-card.vue
+++ b/src/client/app/mobile/views/components/note-card.vue
@@ -32,7 +32,7 @@ root(isDark)
 	width 150px
 	//height 120px
 	font-size 12px
-	background isDark ? #282c37 : #fff
+	background var(--face)
 	border-radius 4px
 
 	> a
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 6daf375ed2..f0a91e82d4 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -229,7 +229,7 @@ root(isDark)
 	overflow hidden
 	width 100%
 	text-align left
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	border-radius 8px
 	box-shadow 0 0 2px rgba(#000, 0.1)
 
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index 83674a33dc..539141954b 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -221,7 +221,7 @@ export default Vue.extend({
 
 root(isDark)
 	overflow hidden
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	border-radius 8px
 	box-shadow 0 0 2px rgba(#000, 0.1)
 
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 742163696e..6ada5e60ee 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -342,7 +342,7 @@ root(isDark)
 		margin 32px auto
 
 	> .form
-		background isDark ? #282C37 : #fff
+		background var(--face)
 		border-radius 8px
 		box-shadow 0 0 2px rgba(#000, 0.1)
 
diff --git a/src/client/app/mobile/views/components/widget-container.vue b/src/client/app/mobile/views/components/widget-container.vue
index a713a10621..bf7adf5fcb 100644
--- a/src/client/app/mobile/views/components/widget-container.vue
+++ b/src/client/app/mobile/views/components/widget-container.vue
@@ -45,7 +45,7 @@ root(isDark)
 			font-size 15px
 			font-weight normal
 			color isDark ? #b8c5cc : #465258
-			background isDark ? #282c37 : #fff
+			background var(--face)
 			border-radius 8px 8px 0 0
 
 			> [data-fa]
diff --git a/src/client/app/mobile/views/pages/user/home.vue b/src/client/app/mobile/views/pages/user/home.vue
index 4118afef19..d19ccfd522 100644
--- a/src/client/app/mobile/views/pages/user/home.vue
+++ b/src/client/app/mobile/views/pages/user/home.vue
@@ -81,7 +81,7 @@ root(isDark)
 			font-size 15px
 			font-weight normal
 			color isDark ? #b8c5cc : #465258
-			background isDark ? #282c37 : #fff
+			background var(--face)
 			border-radius 8px 8px 0 0
 
 			@media (min-width 500px)
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index ffe0ffa3ce..fca316c5bc 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -7,5 +7,7 @@
 	"bg": "#191B22",
 	"scrollbarTrack": "#282C37",
 	"scrollbarHandle": "#454954",
-	"scrollbarHandleHover": "#535660"
+	"scrollbarHandleHover": "#535660",
+	"face": "#282c37",
+	"faceHeader": "#313543"
 }
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index f4d061e5ce..b091d87389 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -7,5 +7,7 @@
 	"bg": "#f7f7f7",
 	"scrollbarTrack": "#fff",
 	"scrollbarHandle": "#00000033",
-	"scrollbarHandleHover": "#00000066"
+	"scrollbarHandleHover": "#00000066",
+	"face": "#fff",
+	"faceHeader": "#fff"
 }

From 297019c22c06de45d66a68cc855227c5def56f1c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 26 Sep 2018 20:38:16 +0900
Subject: [PATCH 05/72] example commit

---
 src/client/app/mobile/views/pages/settings.vue | 4 ++--
 src/client/theme/dark.json                     | 4 +++-
 src/client/theme/light.json                    | 4 +++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 9e90416370..9849c82490 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -331,8 +331,8 @@ root(isDark)
 		margin 16px
 		padding 16px
 		text-align center
-		color isDark ? #49ab63 : #2c662d
-		background isDark ? #273c34 : #fcfff5
+		color var(--mobileSignedInAsFg)
+		background var(--mobileSignedInAsBg)
 		box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
 
 	> .signout
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index fca316c5bc..f94f3d7f9c 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -9,5 +9,7 @@
 	"scrollbarHandle": "#454954",
 	"scrollbarHandleHover": "#535660",
 	"face": "#282c37",
-	"faceHeader": "#313543"
+	"faceHeader": "#313543",
+	"mobileSignedInAsBg": "#273c34",
+	"mobileSignedInAsFg": "#49ab63"
 }
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index b091d87389..4a3db8a308 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -9,5 +9,7 @@
 	"scrollbarHandle": "#00000033",
 	"scrollbarHandleHover": "#00000066",
 	"face": "#fff",
-	"faceHeader": "#fff"
+	"faceHeader": "#fff",
+	"mobileSignedInAsBg": "#fcfff5",
+	"mobileSignedInAsFg": "#2c662d"
 }

From b6e33e93dea72844e0efb2a66d0f8faada12ac6c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 26 Sep 2018 20:47:11 +0900
Subject: [PATCH 06/72] wip

---
 src/client/app/mobile/views/pages/settings.vue | 4 ++--
 src/client/theme/dark.json                     | 4 +++-
 src/client/theme/light.json                    | 4 +++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 9849c82490..0a44a592e1 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -339,8 +339,8 @@ root(isDark)
 		margin 16px
 		padding 16px
 		text-align center
-		color isDark ? #ff5f56 : #cc2727
-		background isDark ? #652222 : #fff6f5
+		color var(--mobileSignedInAsFg)
+		background var(--mobileSignedInAsBg)
 		box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
 
 	> footer
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index f94f3d7f9c..5d0272a375 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -11,5 +11,7 @@
 	"face": "#282c37",
 	"faceHeader": "#313543",
 	"mobileSignedInAsBg": "#273c34",
-	"mobileSignedInAsFg": "#49ab63"
+	"mobileSignedInAsFg": "#49ab63",
+	"mobileSignoutBg": "#652222",
+	"mobileSignoutFg": "#ff5f56"
 }
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 4a3db8a308..4cba3be499 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -11,5 +11,7 @@
 	"face": "#fff",
 	"faceHeader": "#fff",
 	"mobileSignedInAsBg": "#fcfff5",
-	"mobileSignedInAsFg": "#2c662d"
+	"mobileSignedInAsFg": "#2c662d",
+	"mobileSignoutBg": "#fff6f5",
+	"mobileSignoutFg": "#cc2727"
 }

From 3cbdfcb43d4b4435d9ecd50657607979317d2749 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 00:54:37 +0900
Subject: [PATCH 07/72] wip

---
 src/client/app/common/views/components/note-header.vue        | 2 +-
 src/client/app/desktop/views/components/notes.note.vue        | 2 +-
 src/client/app/desktop/views/components/notes.vue             | 4 ++--
 src/client/app/desktop/views/pages/deck/deck.note.vue         | 2 +-
 src/client/app/desktop/views/pages/deck/deck.notes.vue        | 4 ++--
 .../app/desktop/views/pages/deck/deck.notifications.vue       | 4 ++--
 src/client/app/mobile/views/components/note.vue               | 2 +-
 src/client/app/mobile/views/components/notes.vue              | 4 ++--
 src/client/app/mobile/views/components/notifications.vue      | 4 ++--
 src/client/theme/dark.json                                    | 1 +
 src/client/theme/light.json                                   | 1 +
 11 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/client/app/common/views/components/note-header.vue b/src/client/app/common/views/components/note-header.vue
index f4a2f00876..48dfae5f84 100644
--- a/src/client/app/common/views/components/note-header.vue
+++ b/src/client/app/common/views/components/note-header.vue
@@ -110,7 +110,7 @@ root(isDark)
 		> .app
 			margin-right 8px
 			padding-right 8px
-			border-right solid 1px isDark ? #1c2023 : #eaeaea
+			border-right solid 1px var(--faceDivider)
 
 		> .visibility
 			margin-left 8px
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 13a8641170..4f2b0241e8 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -323,7 +323,7 @@ root(isDark)
 	margin 0
 	padding 0
 	background var(--face)
-	border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+	border-bottom solid 1px var(--faceDivider)
 
 	&[data-round]
 		&:first-child
diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index 0bd45b1c21..d0148eef58 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -237,7 +237,7 @@ root(isDark)
 			text-align center
 			color isDark ? #666b79 : #aaa
 			background isDark ? #242731 : #fdfdfd
-			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+			border-bottom solid 1px var(--faceDivider)
 
 			span
 				margin 0 16px
@@ -261,7 +261,7 @@ root(isDark)
 			text-align center
 			color #ccc
 			background var(--face)
-			border-top solid 1px isDark ? #1c2023 : #eaeaea
+			border-top solid 1px var(--faceDivider)
 			border-bottom-left-radius 6px
 			border-bottom-right-radius 6px
 
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index 82e816cc8c..04ddcd488d 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -228,7 +228,7 @@ mediaRoot(isDark)
 
 root(isDark)
 	font-size 13px
-	border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+	border-bottom solid 1px var(--faceDivider)
 
 	&:last-of-type
 		border-bottom none
diff --git a/src/client/app/desktop/views/pages/deck/deck.notes.vue b/src/client/app/desktop/views/pages/deck/deck.notes.vue
index 1217e0d4da..214ec3cdf7 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notes.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notes.vue
@@ -216,7 +216,7 @@ root(isDark)
 			text-align center
 			color isDark ? #666b79 : #aaa
 			background isDark ? #242731 : #fdfdfd
-			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+			border-bottom solid 1px var(--faceDivider)
 
 			span
 				margin 0 16px
@@ -233,7 +233,7 @@ root(isDark)
 			text-align center
 			color #ccc
 			background var(--face)
-			border-top solid 1px isDark ? #1c2023 : #eaeaea
+			border-top solid 1px var(--faceDivider)
 			border-bottom-left-radius 6px
 			border-bottom-right-radius 6px
 
diff --git a/src/client/app/desktop/views/pages/deck/deck.notifications.vue b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
index f73f221b7b..8a28061260 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notifications.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
@@ -169,7 +169,7 @@ root(isDark)
 	> .notifications
 
 		> .notification:not(:last-child)
-			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+			border-bottom solid 1px var(--faceDivider)
 
 		> .date
 			display block
@@ -179,7 +179,7 @@ root(isDark)
 			font-size 0.8em
 			color isDark ? #666b79 : #aaa
 			background isDark ? #242731 : #fdfdfd
-			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+			border-bottom solid 1px var(--faceDivider)
 
 			span
 				margin 0 16px
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 2bfd8f8acc..a8b733fae7 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -232,7 +232,7 @@ export default Vue.extend({
 
 root(isDark)
 	font-size 12px
-	border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+	border-bottom solid 1px var(--faceDivider)
 
 	&:last-of-type
 		border-bottom none
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index 539141954b..8841b0e6bf 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -245,7 +245,7 @@ root(isDark)
 			font-size 0.9em
 			color isDark ? #666b79 : #aaa
 			background isDark ? #242731 : #fdfdfd
-			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+			border-bottom solid 1px var(--faceDivider)
 
 			span
 				margin 0 16px
@@ -276,7 +276,7 @@ root(isDark)
 
 	> footer
 		text-align center
-		border-top solid 1px isDark ? #1c2023 : #eaeaea
+		border-top solid 1px var(--faceDivider)
 
 		&:empty
 			display none
diff --git a/src/client/app/mobile/views/components/notifications.vue b/src/client/app/mobile/views/components/notifications.vue
index 11ac23f4b1..8243a9bfb3 100644
--- a/src/client/app/mobile/views/components/notifications.vue
+++ b/src/client/app/mobile/views/components/notifications.vue
@@ -126,7 +126,7 @@ root(isDark)
 	> .notifications
 
 		> .mk-notification:not(:last-child)
-			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+			border-bottom solid 1px var(--faceDivider)
 
 		> .date
 			display block
@@ -136,7 +136,7 @@ root(isDark)
 			font-size 0.8em
 			color isDark ? #666b79 : #aaa
 			background isDark ? #242731 : #fdfdfd
-			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+			border-bottom solid 1px var(--faceDivider)
 
 			span
 				margin 0 16px
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 5d0272a375..cf9306558b 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -10,6 +10,7 @@
 	"scrollbarHandleHover": "#535660",
 	"face": "#282c37",
 	"faceHeader": "#313543",
+	"faceDivider": "rgba(0, 0, 0, 0.3)",
 	"mobileSignedInAsBg": "#273c34",
 	"mobileSignedInAsFg": "#49ab63",
 	"mobileSignoutBg": "#652222",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 4cba3be499..64ebd8e293 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -10,6 +10,7 @@
 	"scrollbarHandleHover": "#00000066",
 	"face": "#fff",
 	"faceHeader": "#fff",
+	"faceDivider": "rgba(0, 0, 0, 0.082)",
 	"mobileSignedInAsBg": "#fcfff5",
 	"mobileSignedInAsFg": "#2c662d",
 	"mobileSignoutBg": "#fff6f5",

From 0a64f638c64ff41075ec95d0305a196c7366a55a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 01:32:04 +0900
Subject: [PATCH 08/72] wip

---
 src/client/app/app.vue                        |  8 ++++++-
 src/client/app/common/scripts/theme.ts        | 21 +++++++++++++++++--
 .../app/common/views/components/menu.vue      | 18 +++++-----------
 .../views/components/reaction-picker.vue      | 20 ++++++------------
 .../views/components/visibility-chooser.vue   |  2 +-
 .../app/desktop/views/components/home.vue     |  2 +-
 .../desktop/views/components/ui.header.vue    |  2 +-
 src/client/theme/dark.json                    | 10 +++++++--
 src/client/theme/halloween.json               | 17 +++++++++++++++
 src/client/theme/light.json                   |  6 ++++++
 10 files changed, 71 insertions(+), 35 deletions(-)
 create mode 100644 src/client/theme/halloween.json

diff --git a/src/client/app/app.vue b/src/client/app/app.vue
index bb8377c237..9b6af27ece 100644
--- a/src/client/app/app.vue
+++ b/src/client/app/app.vue
@@ -7,13 +7,15 @@ import Vue from 'vue';
 import { url, lang } from './config';
 import applyTheme from './common/scripts/theme';
 const darkTheme = require('../theme/dark');
+const halloweenTheme = require('../theme/halloween');
 
 export default Vue.extend({
 	computed: {
 		keymap(): any {
 			return {
 				'h|slash': this.help,
-				'd': this.dark
+				'd': this.dark,
+				'x': this.test
 			};
 		}
 	},
@@ -25,6 +27,10 @@ export default Vue.extend({
 
 		dark() {
 			applyTheme(darkTheme);
+		},
+
+		test() {
+			applyTheme(halloweenTheme);
 		}
 	}
 });
diff --git a/src/client/app/common/scripts/theme.ts b/src/client/app/common/scripts/theme.ts
index 2cad547c01..a08028ff9a 100644
--- a/src/client/app/common/scripts/theme.ts
+++ b/src/client/app/common/scripts/theme.ts
@@ -1,6 +1,23 @@
 import * as tinycolor from 'tinycolor2';
+const lightTheme = require('../../../theme/light');
+const darkTheme = require('../../../theme/dark');
+
+type Theme = {
+	meta: {
+		id: string;
+		name: string;
+		inherit: string;
+	};
+} & {
+	[key: string]: string;
+};
+
+export default function(theme: Theme) {
+	if (theme.meta.inherit) {
+		const inherit = [lightTheme, darkTheme].find(x => x.meta.id == theme.meta.inherit);
+		theme = Object.assign({}, inherit, theme);
+	}
 
-export default function(theme: { [key: string]: string }) {
 	const props = compile(theme);
 
 	Object.entries(props).forEach(([k, v]) => {
@@ -11,7 +28,7 @@ export default function(theme: { [key: string]: string }) {
 	localStorage.setItem('theme', JSON.stringify(props));
 }
 
-function compile(theme: { [key: string]: string }): { [key: string]: string } {
+function compile(theme: Theme): { [key: string]: string } {
 	function getColor(code: string): tinycolor.Instance {
 		// ref
 		if (code[0] == '@') {
diff --git a/src/client/app/common/views/components/menu.vue b/src/client/app/common/views/components/menu.vue
index 3b9f07d1ee..be2c03f54c 100644
--- a/src/client/app/common/views/components/menu.vue
+++ b/src/client/app/common/views/components/menu.vue
@@ -117,10 +117,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
-	$bg-color = isDark ? #2c303c : #fff
+.onchrpzrvnoruiaenfcqvccjfuupzzwv
+	$bg-color = var(--popupBg)
 	$border-color = rgba(27, 31, 35, 0.15)
 
 	position initial
@@ -132,7 +130,7 @@ root(isDark)
 		z-index 10000
 		width 100%
 		height 100%
-		background rgba(#000, isDark ? 0.5 : 0.1)
+		background var(--modalBackdrop)
 		opacity 0
 
 	> .popover
@@ -179,7 +177,7 @@ root(isDark)
 			display block
 			padding 8px 16px
 			width 100%
-			color isDark ? #d6dce2 : #111
+			color var(--popupFg)
 
 			&:hover
 				color var(--primaryForeground)
@@ -193,12 +191,6 @@ root(isDark)
 		> div
 			margin 8px 0
 			height 1px
-			background isDark ? #1c2023 : #eee
-
-.onchrpzrvnoruiaenfcqvccjfuupzzwv[data-darkmode]
-	root(true)
-
-.onchrpzrvnoruiaenfcqvccjfuupzzwv:not([data-darkmode])
-	root(false)
+			background var(--faceDivider)
 
 </style>
diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue
index a86850ac7c..13e8cf1f07 100644
--- a/src/client/app/common/views/components/reaction-picker.vue
+++ b/src/client/app/common/views/components/reaction-picker.vue
@@ -210,11 +210,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
 $border-color = rgba(27, 31, 35, 0.15)
 
-root(isDark)
+.mk-reaction-picker
 	position initial
 
 	> .backdrop
@@ -224,11 +222,11 @@ root(isDark)
 		z-index 10000
 		width 100%
 		height 100%
-		background isDark ? rgba(#000, 0.4) : rgba(#000, 0.1)
+		background var(--modalBackdrop)
 		opacity 0
 
 	> .popover
-		$bgcolor = isDark ? #2c303c : #fff
+		$bgcolor = var(--popupBg)
 		position absolute
 		z-index 10001
 		background $bgcolor
@@ -281,8 +279,8 @@ root(isDark)
 			margin 0
 			padding 8px 10px
 			font-size 14px
-			color isDark ? #d6dce2 : #586069
-			border-bottom solid 1px isDark ? #1c2023 : #e1e4e8
+			color var(--popupFg)
+			border-bottom solid 1px var(--faceDivider)
 
 		> div
 			padding 4px
@@ -312,16 +310,10 @@ root(isDark)
 				border-radius 2px
 
 				&:hover
-					background isDark ? #252731 : #eee
+					background var(--reactionPickerButtonHoverBg)
 
 				&:active
 					background var(--primary)
 					box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15)
 
-.mk-reaction-picker[data-darkmode]
-	root(true)
-
-.mk-reaction-picker:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/visibility-chooser.vue b/src/client/app/common/views/components/visibility-chooser.vue
index d0a892fd56..5faf09fa11 100644
--- a/src/client/app/common/views/components/visibility-chooser.vue
+++ b/src/client/app/common/views/components/visibility-chooser.vue
@@ -145,7 +145,7 @@ root(isDark)
 		opacity 0
 
 	> .popover
-		$bgcolor = isDark ? #2c303c : #fff
+		$bgcolor = var(--popupBg)
 		position absolute
 		z-index 10001
 		width 240px
diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
index 3d77da52d9..a07af02ea6 100644
--- a/src/client/app/desktop/views/components/home.vue
+++ b/src/client/app/desktop/views/components/home.vue
@@ -280,7 +280,7 @@ root(isDark)
 		width 100%
 		height 48px
 		color isDark ? #fff : #000
-		background isDark ? #313543 : #f7f7f7
+		background var(--desktopHeaderBg)
 		box-shadow 0 1px 1px rgba(#000, 0.075)
 
 		> a
diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
index bec0ee37ad..264da8bef8 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -151,7 +151,7 @@ root(isDark)
 			z-index 1000
 			width 100%
 			height 48px
-			background isDark ? #313543 : #f7f7f7
+			background var(--desktopHeaderBg)
 
 		> .main
 			z-index 1001
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index cf9306558b..18b674fef4 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -1,16 +1,22 @@
 {
 	"meta": {
+		"id": "9978f7f9-5616-44fd-a704-cc5985efdd63",
 		"name": "Dark"
 	},
 	"primary": "#fb4e4e",
 	"primaryForeground": "#fff",
-	"bg": "#191B22",
-	"scrollbarTrack": "#282C37",
+	"bg": "#191b22",
+	"scrollbarTrack": "#282c37",
 	"scrollbarHandle": "#454954",
 	"scrollbarHandleHover": "#535660",
 	"face": "#282c37",
 	"faceHeader": "#313543",
 	"faceDivider": "rgba(0, 0, 0, 0.3)",
+	"popupBg": "#2c303c",
+	"popupFg": "#d6dce2",
+	"reactionPickerButtonHoverBg": "rgba(0, 0, 0, 0.18)",
+	"modalBackdrop": "rgba(0, 0, 0, 0.5)",
+	"desktopHeaderBg": "#313543",
 	"mobileSignedInAsBg": "#273c34",
 	"mobileSignedInAsFg": "#49ab63",
 	"mobileSignoutBg": "#652222",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
new file mode 100644
index 0000000000..d38bd849ed
--- /dev/null
+++ b/src/client/theme/halloween.json
@@ -0,0 +1,17 @@
+{
+	"meta": {
+		"id": "42e4f09b-67d5-498c-af7d-29faa54745b0",
+		"name": "Halloween",
+		"inherit": "9978f7f9-5616-44fd-a704-cc5985efdd63"
+	},
+	"primary": "#fb8d4e",
+	"primaryForeground": "#fff",
+	"bg": "#1b1a35",
+	"face": "#282c37",
+	"faceHeader": "#313543",
+	"faceDivider": "rgba(0, 0, 0, 0.3)",
+	"popupBg": "#2c303c",
+	"popupFg": "#d6dce2",
+	"reactionPickerButtonHoverBg": "rgba(0, 0, 0, 0.18)",
+	"desktopHeaderBg": "#0c0b19"
+}
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 64ebd8e293..b012629faf 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -1,5 +1,6 @@
 {
 	"meta": {
+		"id": "406cfea3-a4e7-486c-9057-30ede1353c3f",
 		"name": "Light"
 	},
 	"primary": "#fb4e4e",
@@ -11,6 +12,11 @@
 	"face": "#fff",
 	"faceHeader": "#fff",
 	"faceDivider": "rgba(0, 0, 0, 0.082)",
+	"popupBg": "#fff",
+	"popupFg": "#586069",
+	"reactionPickerButtonHoverBg": "#eee",
+	"modalBackdrop": "rgba(0, 0, 0, 0.1)",
+	"desktopHeaderBg": "#f7f7f7",
 	"mobileSignedInAsBg": "#fcfff5",
 	"mobileSignedInAsFg": "#2c662d",
 	"mobileSignoutBg": "#fff6f5",

From dabda21eb7e67d098c789f22db22014143798e1e Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 01:44:05 +0900
Subject: [PATCH 09/72] wip

---
 .../common/views/components/autocomplete.vue  | 22 ++++++-------------
 src/client/theme/dark.json                    |  6 ++++-
 src/client/theme/light.json                   |  6 ++++-
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/client/app/common/views/components/autocomplete.vue b/src/client/app/common/views/components/autocomplete.vue
index bba6f4f7b2..bc0120c9ab 100644
--- a/src/client/app/common/views/components/autocomplete.vue
+++ b/src/client/app/common/views/components/autocomplete.vue
@@ -259,9 +259,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-autocomplete
 	position fixed
 	z-index 65535
 	max-width 100%
@@ -299,7 +297,7 @@ root(isDark)
 				text-overflow ellipsis
 
 			&:hover
-				background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.1)
+				background var(--autocompleteItemHoverBg)
 
 			&[data-selected='true']
 				background var(--primary)
@@ -325,15 +323,15 @@ root(isDark)
 
 		.name
 			margin 0 8px 0 0
-			color isDark ? rgba(#fff, 0.8) : rgba(#000, 0.8)
+			color var(--autocompleteItemText)
 
 		.username
-			color isDark ? rgba(#fff, 0.3) : rgba(#000, 0.3)
+			color var(--autocompleteItemTextSub)
 
 	> .hashtags > li
 
 		.name
-			color isDark ? rgba(#fff, 0.8) : rgba(#000, 0.8)
+			color var(--autocompleteItemText)
 
 	> .emojis > li
 
@@ -343,15 +341,9 @@ root(isDark)
 			width 24px
 
 		.name
-			color isDark ? rgba(#fff, 0.8) : rgba(#000, 0.8)
+			color var(--autocompleteItemText)
 
 		.alias
 			margin 0 0 0 8px
-			color isDark ? rgba(#fff, 0.3) : rgba(#000, 0.3)
-
-.mk-autocomplete[data-darkmode]
-	root(true)
-
-.mk-autocomplete:not([data-darkmode])
-	root(false)
+			color var(--autocompleteItemTextSub)
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 18b674fef4..5a8e1ce8f6 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -14,8 +14,12 @@
 	"faceDivider": "rgba(0, 0, 0, 0.3)",
 	"popupBg": "#2c303c",
 	"popupFg": "#d6dce2",
-	"reactionPickerButtonHoverBg": "rgba(0, 0, 0, 0.18)",
 	"modalBackdrop": "rgba(0, 0, 0, 0.5)",
+
+	"autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)",
+	"autocompleteItemText": "rgba(255, 255, 255, 0.8)",
+	"autocompleteItemTextSub": "rgba(255, 255, 255, 0.3)",
+	"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
 	"desktopHeaderBg": "#313543",
 	"mobileSignedInAsBg": "#273c34",
 	"mobileSignedInAsFg": "#49ab63",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index b012629faf..4ae10b5cad 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -14,8 +14,12 @@
 	"faceDivider": "rgba(0, 0, 0, 0.082)",
 	"popupBg": "#fff",
 	"popupFg": "#586069",
-	"reactionPickerButtonHoverBg": "#eee",
 	"modalBackdrop": "rgba(0, 0, 0, 0.1)",
+
+	"autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)",
+	"autocompleteItemText": "rgba(0, 0, 0, 0.8)",
+	"autocompleteItemTextSub": "rgba(0, 0, 0, 0.3)",
+	"reactionPickerButtonHoverBg": "#eee",
 	"desktopHeaderBg": "#f7f7f7",
 	"mobileSignedInAsBg": "#fcfff5",
 	"mobileSignedInAsFg": "#2c662d",

From 3304cc106ec75c2bfceeb47336afc250fc392c86 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 01:54:10 +0900
Subject: [PATCH 10/72] wip

---
 src/client/app/common/views/components/avatar.vue | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/client/app/common/views/components/avatar.vue b/src/client/app/common/views/components/avatar.vue
index a2b0fc6bd3..ca09af87de 100644
--- a/src/client/app/common/views/components/avatar.vue
+++ b/src/client/app/common/views/components/avatar.vue
@@ -58,6 +58,9 @@ export default Vue.extend({
 			};
 		}
 	},
+	mounted() {
+		this.$el.style.color = `rgb(${this.user.avatarColor.slice(0, 3).join(',')})`;
+	},
 	methods: {
 		onClick(e) {
 			this.$emit('click', e);
@@ -67,8 +70,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-root(isDark)
+.mk-avatar
 	display inline-block
 	vertical-align bottom
 
@@ -79,7 +81,7 @@ root(isDark)
 	&.cat::before,
 	&.cat::after
 		background #df548f
-		border solid 4px isDark ? #e0eefd : #202224
+		border solid 4px currentColor
 		box-sizing border-box
 		content ''
 		display inline-block
@@ -105,9 +107,4 @@ root(isDark)
 		transition border-radius 1s ease
 		z-index 1
 
-.mk-avatar[data-darkmode]
-	root(true)
-
-.mk-avatar:not([data-darkmode])
-	root(false)
 </style>

From 4dde54e344773d6e6a39713453292d3f128df3f9 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 01:58:37 +0900
Subject: [PATCH 11/72] Clean up

---
 .../app/desktop/views/pages/deck/deck.note.vue      | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index 04ddcd488d..a02636a42d 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -314,19 +314,6 @@ root(isDark)
 					> .text
 						margin-right 8px
 
-					> .toggle
-						display inline-block
-						padding 4px 8px
-						font-size 0.7em
-						color isDark ? #393f4f : #fff
-						background isDark ? #687390 : #b1b9c1
-						border-radius 2px
-						cursor pointer
-						user-select none
-
-						&:hover
-							background isDark ? #707b97 : #bbc4ce
-
 				> .content
 
 					> .text

From 97d68d7b31d4db1b0cdd07a0196c63d4493a621f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 02:02:07 +0900
Subject: [PATCH 12/72] example commit

---
 .../app/common/views/components/cw-button.vue      | 14 ++++----------
 src/client/theme/dark.json                         |  3 +++
 src/client/theme/light.json                        |  3 +++
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/client/app/common/views/components/cw-button.vue b/src/client/app/common/views/components/cw-button.vue
index 06087edc93..79917f82ab 100644
--- a/src/client/app/common/views/components/cw-button.vue
+++ b/src/client/app/common/views/components/cw-button.vue
@@ -22,23 +22,17 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.nrvgflfuaxwgkxoynpnumyookecqrrvh
 	display inline-block
 	padding 4px 8px
 	font-size 0.7em
-	color isDark ? #393f4f : #fff
-	background isDark ? #687390 : #b1b9c1
+	color var(--cwButtonFg)
+	background var(--cwButtonBg)
 	border-radius 2px
 	cursor pointer
 	user-select none
 
 	&:hover
-		background isDark ? #707b97 : #bbc4ce
-
-.nrvgflfuaxwgkxoynpnumyookecqrrvh[data-darkmode]
-	root(true)
-
-.nrvgflfuaxwgkxoynpnumyookecqrrvh:not([data-darkmode])
-	root(false)
+		background var(--cwButtonHoverBg)
 
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 5a8e1ce8f6..14caf19224 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -19,6 +19,9 @@
 	"autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)",
 	"autocompleteItemText": "rgba(255, 255, 255, 0.8)",
 	"autocompleteItemTextSub": "rgba(255, 255, 255, 0.3)",
+	"cwButtonBg": "#687390",
+	"cwButtonFg": "#393f4f",
+	"cwButtonHoverBg": "#707b97",
 	"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
 	"desktopHeaderBg": "#313543",
 	"mobileSignedInAsBg": "#273c34",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 4ae10b5cad..7a039ef294 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -19,6 +19,9 @@
 	"autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)",
 	"autocompleteItemText": "rgba(0, 0, 0, 0.8)",
 	"autocompleteItemTextSub": "rgba(0, 0, 0, 0.3)",
+	"cwButtonBg": "#b1b9c1",
+	"cwButtonFg": "#fff",
+	"cwButtonHoverBg": "#bbc4ce",
 	"reactionPickerButtonHoverBg": "#eee",
 	"desktopHeaderBg": "#f7f7f7",
 	"mobileSignedInAsBg": "#fcfff5",

From 15a8b4c6e56c3a5e055cc007275b28bb8841e319 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 02:18:54 +0900
Subject: [PATCH 13/72] wip

---
 .../common/views/components/note-header.vue   | 24 +++++++------------
 src/client/theme/dark.json                    |  7 ++++++
 src/client/theme/light.json                   |  7 ++++++
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/client/app/common/views/components/note-header.vue b/src/client/app/common/views/components/note-header.vue
index 48dfae5f84..8192d88412 100644
--- a/src/client/app/common/views/components/note-header.vue
+++ b/src/client/app/common/views/components/note-header.vue
@@ -42,9 +42,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.bvonvjxbwzaiskogyhbwgyxvcgserpmu
 	display flex
 	align-items baseline
 	white-space nowrap
@@ -61,7 +59,7 @@ root(isDark)
 		margin 0 .5em 0 0
 		padding 0
 		overflow hidden
-		color isDark ? #fff : #627079
+		color var(--noteHeaderName)
 		font-size 1em
 		font-weight bold
 		text-decoration none
@@ -82,19 +80,19 @@ root(isDark)
 		margin 0 .5em 0 0
 		padding 1px 6px
 		font-size 80%
-		color isDark ? #758188 : #aaa
-		border solid 1px isDark ? #57616f : #ddd
+		color var(--noteHeaderBadgeFg)
+		background var(--noteHeaderBadgeBg)
 		border-radius 3px
 
 		&.is-admin
-			border-color isDark ? #d42c41 : #f56a7b
-			color isDark ? #d42c41 : #f56a7b
+			background var(--noteHeaderAdminBg)
+			color var(--noteHeaderAdminFg)
 
 	> .username
 		margin 0 .5em 0 0
 		overflow hidden
 		text-overflow ellipsis
-		color isDark ? #606984 : #ccc
+		color var(--noteHeaderAcct)
 		flex-shrink 2147483647
 
 	> .info
@@ -102,7 +100,7 @@ root(isDark)
 		font-size 0.9em
 
 		> *
-			color isDark ? #606984 : #c0c0c0
+			color var(--noteHeaderInfo)
 
 		> .mobile
 			margin-right 8px
@@ -115,10 +113,4 @@ root(isDark)
 		> .visibility
 			margin-left 8px
 
-.bvonvjxbwzaiskogyhbwgyxvcgserpmu[data-darkmode]
-	root(true)
-
-.bvonvjxbwzaiskogyhbwgyxvcgserpmu:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 14caf19224..aeaf547b72 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -16,6 +16,13 @@
 	"popupFg": "#d6dce2",
 	"modalBackdrop": "rgba(0, 0, 0, 0.5)",
 
+	"noteHeaderName": "#fff",
+	"noteHeaderBadgeFg": "#758188",
+	"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.25)",
+	"noteHeaderAdminFg": "#f15f71",
+	"noteHeaderAdminBg": "#5d282e",
+	"noteHeaderAcct": "#606984",
+	"noteHeaderInfo": "#606984",
 	"autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)",
 	"autocompleteItemText": "rgba(255, 255, 255, 0.8)",
 	"autocompleteItemTextSub": "rgba(255, 255, 255, 0.3)",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 7a039ef294..d4803389da 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -16,6 +16,13 @@
 	"popupFg": "#586069",
 	"modalBackdrop": "rgba(0, 0, 0, 0.1)",
 
+	"noteHeaderName": "#627079",
+	"noteHeaderBadgeFg": "#aaa",
+	"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.05)",
+	"noteHeaderAdminFg": "#f15f71",
+	"noteHeaderAdminBg": "#5d282e",
+	"noteHeaderAcct": "#ccc",
+	"noteHeaderInfo": "#c0c0c0",
 	"autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)",
 	"autocompleteItemText": "rgba(0, 0, 0, 0.8)",
 	"autocompleteItemTextSub": "rgba(0, 0, 0, 0.3)",

From 49f8cfb0db79653caf0a1cb158041d51856912ef Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 02:35:13 +0900
Subject: [PATCH 14/72] wip

---
 .../app/desktop/views/components/notes.vue     | 18 +++++-------------
 src/client/theme/dark.json                     |  4 ++++
 src/client/theme/light.json                    |  4 ++++
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index d0148eef58..31b3a3ab18 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -216,9 +216,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-notes
 	.transition
 		.mk-notes-enter
 		.mk-notes-leave-to
@@ -235,8 +233,8 @@ root(isDark)
 			line-height 32px
 			font-size 14px
 			text-align center
-			color isDark ? #666b79 : #aaa
-			background isDark ? #242731 : #fdfdfd
+			color var(--dateDividerFg)
+			background var(--dateDividerBg)
 			border-bottom solid 1px var(--faceDivider)
 
 			span
@@ -266,15 +264,9 @@ root(isDark)
 			border-bottom-right-radius 6px
 
 			&:hover
-				background isDark ? #2e3440 : #f5f5f5
+				background var(--footerButtonHover)
 
 			&:active
-				background isDark ? #21242b : #eee
-
-.mk-notes[data-darkmode]
-	root(true)
-
-.mk-notes:not([data-darkmode])
-	root(false)
+				background var(--footerButtonActive)
 
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index aeaf547b72..b3d233d45f 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -15,6 +15,10 @@
 	"popupBg": "#2c303c",
 	"popupFg": "#d6dce2",
 	"modalBackdrop": "rgba(0, 0, 0, 0.5)",
+	"dateDividerBg": "#242731",
+	"dateDividerFg": "#666b79",
+	"footerButtonHover": "#2e3440",
+	"footerButtonActive": "#21242b",
 
 	"noteHeaderName": "#fff",
 	"noteHeaderBadgeFg": "#758188",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index d4803389da..87f384a200 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -15,6 +15,10 @@
 	"popupBg": "#fff",
 	"popupFg": "#586069",
 	"modalBackdrop": "rgba(0, 0, 0, 0.1)",
+	"dateDividerBg": "#fdfdfd",
+	"dateDividerFg": "#aaa",
+	"footerButtonHover": "#f5f5f5",
+	"footerButtonActive": "#eee",
 
 	"noteHeaderName": "#627079",
 	"noteHeaderBadgeFg": "#aaa",

From 1eb6ad58d5699ec22b41265b4b8c687641015109 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 02:46:53 +0900
Subject: [PATCH 15/72] wip

---
 src/client/app/desktop/views/components/note-detail.vue | 4 ++--
 src/client/app/desktop/views/components/notes.note.vue  | 4 ++--
 src/client/app/desktop/views/pages/deck/deck.note.vue   | 4 ++--
 src/client/app/mobile/views/components/note-detail.vue  | 4 ++--
 src/client/app/mobile/views/components/note.vue         | 4 ++--
 src/client/theme/dark.json                              | 2 ++
 src/client/theme/halloween.json                         | 2 ++
 src/client/theme/light.json                             | 2 ++
 8 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index 35eb6ac45d..5e7c8b42ca 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -263,8 +263,8 @@ root(isDark)
 			border-bottom 1px solid isDark ? #1c2023 : #eef0f2
 
 	> .renote
-		color #9dbb00
-		background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+		color var(--renoteText)
+		background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
 
 		> p
 			margin 0
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 4f2b0241e8..17f7e2235a 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -357,8 +357,8 @@ root(isDark)
 		padding 16px 32px 8px 32px
 		line-height 28px
 		white-space pre
-		color #9dbb00
-		background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+		color var(--renoteText)
+		background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
 
 		.avatar
 			display inline-block
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index a02636a42d..f1c4a5979a 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -246,8 +246,8 @@ root(isDark)
 		padding 8px 16px 0 16px
 		line-height 28px
 		white-space pre
-		color #9dbb00
-		background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+		color var(--renoteText)
+		background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
 
 		.avatar
 			flex-shrink 0
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index f0a91e82d4..c56d10093d 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -266,8 +266,8 @@ root(isDark)
 			border-bottom 1px solid isDark ? #1c2023 : #eef0f2
 
 	> .renote
-		color #9dbb00
-		background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+		color var(--renoteText)
+		background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
 
 		> p
 			margin 0
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index a8b733fae7..8b7c559997 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -256,8 +256,8 @@ root(isDark)
 		padding 8px 16px
 		line-height 28px
 		white-space pre
-		color #9dbb00
-		background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+		color var(--renoteText)
+		background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
 
 		@media (min-width 500px)
 			padding 16px
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index b3d233d45f..533910de76 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -14,6 +14,8 @@
 	"faceDivider": "rgba(0, 0, 0, 0.3)",
 	"popupBg": "#2c303c",
 	"popupFg": "#d6dce2",
+	"renoteGradient": "#314027",
+	"renoteText": "#9dbb00",
 	"modalBackdrop": "rgba(0, 0, 0, 0.5)",
 	"dateDividerBg": "#242731",
 	"dateDividerFg": "#666b79",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index d38bd849ed..18d214d041 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -12,6 +12,8 @@
 	"faceDivider": "rgba(0, 0, 0, 0.3)",
 	"popupBg": "#2c303c",
 	"popupFg": "#d6dce2",
+	"renoteGradient": "#5d2d1a",
+	"renoteText": "#ff6c00",
 	"reactionPickerButtonHoverBg": "rgba(0, 0, 0, 0.18)",
 	"desktopHeaderBg": "#0c0b19"
 }
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 87f384a200..df85fb973d 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -14,6 +14,8 @@
 	"faceDivider": "rgba(0, 0, 0, 0.082)",
 	"popupBg": "#fff",
 	"popupFg": "#586069",
+	"renoteGradient": "#edfde2",
+	"renoteText": "#9dbb00",
 	"modalBackdrop": "rgba(0, 0, 0, 0.1)",
 	"dateDividerBg": "#fdfdfd",
 	"dateDividerFg": "#aaa",

From 0ef64a6d0b7f95c2427536feee657164b759d0d3 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 11:55:17 +0900
Subject: [PATCH 16/72] wip

---
 .../views/components/welcome-timeline.vue     |  2 +-
 .../desktop/views/components/note-detail.vue  | 36 +++++++++----------
 .../views/components/notes.note.sub.vue       |  2 +-
 .../desktop/views/components/notes.note.vue   | 14 ++++----
 .../views/pages/deck/deck.note.sub.vue        |  2 +-
 .../desktop/views/pages/deck/deck.note.vue    |  2 +-
 .../mobile/views/components/note-detail.vue   | 22 ++++++------
 .../app/mobile/views/components/note.sub.vue  |  2 +-
 .../app/mobile/views/components/note.vue      |  2 +-
 src/client/theme/dark.json                    |  7 ++++
 src/client/theme/halloween.json               |  6 ++--
 src/client/theme/light.json                   |  7 ++++
 12 files changed, 57 insertions(+), 47 deletions(-)

diff --git a/src/client/app/common/views/components/welcome-timeline.vue b/src/client/app/common/views/components/welcome-timeline.vue
index 938ab602f0..ca1b6eb928 100644
--- a/src/client/app/common/views/components/welcome-timeline.vue
+++ b/src/client/app/common/views/components/welcome-timeline.vue
@@ -137,7 +137,7 @@ root(isDark)
 						overflow hidden
 						font-weight bold
 						text-overflow ellipsis
-						color isDark ? #fff : #627079
+						color var(--noteHeaderName)
 
 					> .username
 						margin 0 .5em 0 0
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index 5e7c8b42ca..9222d8fab9 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -225,8 +225,6 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
 root(isDark)
 	overflow hidden
 	text-align left
@@ -243,24 +241,24 @@ root(isDark)
 		text-align center
 		color #999
 		cursor pointer
-		background isDark ? #21242d : #fafafa
+		background var(--subNoteBg)
 		outline none
 		border none
-		border-bottom solid 1px isDark ? #1c2023 : #eef0f2
-		border-radius 6px 6px 0 0
+		border-bottom solid 1px var(--faceDivider)
+		border-radius var(--round) var(--round) 0 0
 
 		&:hover
-			background isDark ? #2e3440 : #f6f6f6
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
 
 		&:active
-			background isDark ? #21242b : #f0f0f0
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
 
 		&:disabled
-			color isDark ? #21242b : #ccc
+			cursor wait
 
 	> .conversation
 		> *
-			border-bottom 1px solid isDark ? #1c2023 : #eef0f2
+			border-bottom 1px solid var(--faceDivider)
 
 	> .renote
 		color var(--renoteText)
@@ -287,7 +285,7 @@ root(isDark)
 			padding-top 8px
 
 	> .reply-to
-		border-bottom 1px solid isDark ? #1c2023 : #eef0f2
+		border-bottom 1px solid var(--faceDivider)
 
 	> article
 		padding 28px 32px 18px 32px
@@ -299,7 +297,7 @@ root(isDark)
 
 		&:hover
 			> footer > button
-				color isDark ? #707b97 : #888
+				color var(--noteActionsHighlighted)
 
 		> .avatar
 			width 60px
@@ -316,7 +314,7 @@ root(isDark)
 				display inline-block
 				margin 0
 				line-height 24px
-				color isDark ? #fff : #627079
+				color var(--noteHeaderName)
 				font-size 18px
 				font-weight 700
 				text-align left
@@ -394,20 +392,20 @@ root(isDark)
 				background transparent
 				border none
 				font-size 1em
-				color isDark ? #606984 : #ccc
+				color var(--noteActions)
 				cursor pointer
 
 				&:hover
-					color isDark ? #a1a8bf : #444
+					color var(--noteActionsHover)
 
 				&.replyButton:hover
-					color #0af
+					color var(--noteActionsReplyHover)
 
 				&.renoteButton:hover
-					color #8d0
+					color var(--noteActionsRenoteHover)
 
 				&.reactionButton:hover
-					color #fa0
+					color var(--noteActionsReactionHover)
 
 				> .count
 					display inline
@@ -415,11 +413,11 @@ root(isDark)
 					color #999
 
 				&.reacted, &.reacted:hover
-					color #fa0
+					color var(--noteActionsReactionHover)
 
 	> .replies
 		> *
-			border-top 1px solid isDark ? #1c2023 : #eef0f2
+			border-top 1px solid var(--faceDivider)
 
 .mk-note-detail[data-darkmode]
 	root(true)
diff --git a/src/client/app/desktop/views/components/notes.note.sub.vue b/src/client/app/desktop/views/components/notes.note.sub.vue
index 8f01ddd43c..13e2991683 100644
--- a/src/client/app/desktop/views/components/notes.note.sub.vue
+++ b/src/client/app/desktop/views/components/notes.note.sub.vue
@@ -47,7 +47,7 @@ root(isDark)
 	margin 0
 	padding 16px 32px
 	font-size 0.9em
-	background isDark ? #21242d : #fcfcfc
+	background var(--subNoteBg)
 
 	> .avatar
 		flex-shrink 0
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 17f7e2235a..160de5199d 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -398,7 +398,7 @@ root(isDark)
 
 		&:hover
 			> .main > footer > button
-				color isDark ? #707b97 : #888
+				color var(--noteActionsHighlighted)
 
 		> .avatar
 			flex-shrink 0
@@ -500,22 +500,22 @@ root(isDark)
 					padding 0 8px
 					line-height 32px
 					font-size 1em
-					color isDark ? #606984 : #ddd
+					color var(--noteActions)
 					background transparent
 					border none
 					cursor pointer
 
 					&:hover
-						color isDark ? #a1a8bf : #444
+						color var(--noteActionsHover)
 
 					&.replyButton:hover
-						color #0af
+						color var(--noteActionsReplyHover)
 
 					&.renoteButton:hover
-						color #8d0
+						color var(--noteActionsRenoteHover)
 
 					&.reactionButton:hover
-						color #fa0
+						color var(--noteActionsReactionHover)
 
 					> .count
 						display inline
@@ -523,7 +523,7 @@ root(isDark)
 						color #999
 
 					&.reacted, &.reacted:hover
-						color #fa0
+						color var(--noteActionsReactionHover)
 
 	> .detail
 		padding-top 4px
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.sub.vue b/src/client/app/desktop/views/pages/deck/deck.note.sub.vue
index 3ba9ae914e..f1bf60d528 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.sub.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.sub.vue
@@ -33,7 +33,7 @@ root(isDark)
 	display flex
 	padding 16px
 	font-size 10px
-	background isDark ? #21242d : #fcfcfc
+	background var(--subNoteBg)
 
 	&.smart
 		> .main
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index f1c4a5979a..ffb284fb42 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -402,7 +402,7 @@ root(isDark)
 					border none
 					box-shadow none
 					font-size 1em
-					color isDark ? #606984 : #ddd
+					color var(--noteActions)
 					cursor pointer
 
 					&:not(:last-child)
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index c56d10093d..472c18088d 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -223,8 +223,6 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
 root(isDark)
 	overflow hidden
 	width 100%
@@ -248,22 +246,22 @@ root(isDark)
 		text-align center
 		color #999
 		cursor pointer
-		background isDark ? #21242d : #fafafa
+		background var(--subNoteBg)
 		outline none
 		border none
-		border-bottom solid 1px isDark ? #1c2023 : #eef0f2
+		border-bottom solid 1px var(--faceDivider)
 		border-radius 6px 6px 0 0
 		box-shadow none
 
 		&:hover
-			background isDark ? #16181d : #f6f6f6
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
 
-		&:disabled
-			color #ccc
+		&:active
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
 
 	> .conversation
 		> *
-			border-bottom 1px solid isDark ? #1c2023 : #eef0f2
+			border-bottom 1px solid var(--faceDivider)
 
 	> .renote
 		color var(--renoteText)
@@ -290,7 +288,7 @@ root(isDark)
 			padding-top 8px
 
 	> .reply-to
-		border-bottom 1px solid isDark ? #1c2023 : #eef0f2
+		border-bottom 1px solid var(--faceDivider)
 
 	> article
 		padding 14px 16px 9px 16px
@@ -323,7 +321,7 @@ root(isDark)
 				> .name
 					display inline-block
 					margin .4em 0
-					color isDark ? #fff : #627079
+					color var(--noteHeaderName)
 					font-size 16px
 					font-weight bold
 					text-align left
@@ -407,7 +405,7 @@ root(isDark)
 				border none
 				box-shadow none
 				font-size 1em
-				color isDark ? #606984 : #ddd
+				color var(--noteActions)
 				cursor pointer
 
 				&:not(:last-child)
@@ -426,7 +424,7 @@ root(isDark)
 
 	> .replies
 		> *
-			border-top 1px solid isDark ? #1c2023 : #eef0f2
+			border-top 1px solid var(--faceDivider)
 
 .mk-note-detail[data-darkmode]
 	root(true)
diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue
index c25f827dad..2f38c9e97d 100644
--- a/src/client/app/mobile/views/components/note.sub.vue
+++ b/src/client/app/mobile/views/components/note.sub.vue
@@ -45,7 +45,7 @@ root(isDark)
 	display flex
 	padding 16px
 	font-size 10px
-	background isDark ? #21242d : #fcfcfc
+	background var(--subNoteBg)
 
 	@media (min-width 350px)
 		font-size 12px
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 8b7c559997..859fc88043 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -442,7 +442,7 @@ root(isDark)
 					border none
 					box-shadow none
 					font-size 1em
-					color isDark ? #606984 : #ddd
+					color var(--noteActions)
 					cursor pointer
 
 					&:not(:last-child)
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 533910de76..77a41228d0 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -14,8 +14,15 @@
 	"faceDivider": "rgba(0, 0, 0, 0.3)",
 	"popupBg": "#2c303c",
 	"popupFg": "#d6dce2",
+	"subNoteBg": "rgba(0, 0, 0, 0.18)",
 	"renoteGradient": "#314027",
 	"renoteText": "#9dbb00",
+	"noteActions": "#606984",
+	"noteActionsHover": "#a1a8bf",
+	"noteActionsReplyHover": "#0af",
+	"noteActionsRenoteHover": "#8d0",
+	"noteActionsReactionHover": "#fa0",
+	"noteActionsHighlighted": "#707b97",
 	"modalBackdrop": "rgba(0, 0, 0, 0.5)",
 	"dateDividerBg": "#242731",
 	"dateDividerFg": "#666b79",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index 18d214d041..7c26fbf6e6 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -7,9 +7,9 @@
 	"primary": "#fb8d4e",
 	"primaryForeground": "#fff",
 	"bg": "#1b1a35",
-	"face": "#282c37",
-	"faceHeader": "#313543",
-	"faceDivider": "rgba(0, 0, 0, 0.3)",
+	"face": "#2e2a3e",
+	"faceHeader": "#36314e",
+	"dateDividerBg": "#26253c",
 	"popupBg": "#2c303c",
 	"popupFg": "#d6dce2",
 	"renoteGradient": "#5d2d1a",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index df85fb973d..28cc71bdb7 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -14,8 +14,15 @@
 	"faceDivider": "rgba(0, 0, 0, 0.082)",
 	"popupBg": "#fff",
 	"popupFg": "#586069",
+	"subNoteBg": "rgba(0, 0, 0, 0.01)",
 	"renoteGradient": "#edfde2",
 	"renoteText": "#9dbb00",
+	"noteActions": "#ddd",
+	"noteActionsHover": "#444",
+	"noteActionsReplyHover": "#0af",
+	"noteActionsRenoteHover": "#8d0",
+	"noteActionsReactionHover": "#fa0",
+	"noteActionsHighlighted": "#888",
 	"modalBackdrop": "rgba(0, 0, 0, 0.1)",
 	"dateDividerBg": "#fdfdfd",
 	"dateDividerFg": "#aaa",

From df6c9b1a1cf7b4ff8cdbf562e004bbf3635d841b Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 12:55:10 +0900
Subject: [PATCH 17/72] wip

---
 .../components/games/reversi/reversi.room.vue |   6 +-
 .../app/common/views/components/index.ts      |   2 -
 .../app/common/views/components/switch.vue    | 199 ------------------
 .../app/common/views/components/ui/button.vue |   2 -
 .../app/common/views/components/ui/switch.vue |  17 +-
 .../views/components/settings.profile.vue     |   8 +-
 .../app/desktop/views/components/settings.vue |  44 ++--
 .../views/pages/deck/deck.tl-column.vue       |   4 +-
 src/client/theme/dark.json                    |   5 +-
 src/client/theme/halloween.json               |   1 +
 src/client/theme/light.json                   |   5 +-
 11 files changed, 42 insertions(+), 251 deletions(-)
 delete mode 100644 src/client/app/common/views/components/switch.vue

diff --git a/src/client/app/common/views/components/games/reversi/reversi.room.vue b/src/client/app/common/views/components/games/reversi/reversi.room.vue
index 072f3eda12..b407046ba9 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.room.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.room.vue
@@ -47,9 +47,9 @@
 			</header>
 
 			<div>
-				<mk-switch v-model="game.settings.isLlotheo" @change="updateSettings" text="%i18n:@is-llotheo%"/>
-				<mk-switch v-model="game.settings.loopedBoard" @change="updateSettings" text="%i18n:@looped-map%"/>
-				<mk-switch v-model="game.settings.canPutEverywhere" @change="updateSettings" text="%i18n:@can-put-everywhere%"/>
+				<ui-switch v-model="game.settings.isLlotheo" @change="updateSettings">%i18n:@is-llotheo%</ui-switch>
+				<ui-switch v-model="game.settings.loopedBoard" @change="updateSettings">%i18n:@looped-map%</ui-switch>
+				<ui-switch v-model="game.settings.canPutEverywhere" @change="updateSettings">%i18n:@can-put-everywhere%</ui-switch>
 			</div>
 		</div>
 
diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 0a3d0d0ae6..4c1c0afa80 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -30,7 +30,6 @@ import messagingRoom from './messaging-room.vue';
 import urlPreview from './url-preview.vue';
 import twitterSetting from './twitter-setting.vue';
 import fileTypeIcon from './file-type-icon.vue';
-import Switch from './switch.vue';
 import Reversi from './games/reversi/reversi.vue';
 import welcomeTimeline from './welcome-timeline.vue';
 import uiInput from './ui/input.vue';
@@ -74,7 +73,6 @@ Vue.component('mk-messaging-room', messagingRoom);
 Vue.component('mk-url-preview', urlPreview);
 Vue.component('mk-twitter-setting', twitterSetting);
 Vue.component('mk-file-type-icon', fileTypeIcon);
-Vue.component('mk-switch', Switch);
 Vue.component('mk-reversi', Reversi);
 Vue.component('mk-welcome-timeline', welcomeTimeline);
 Vue.component('ui-input', uiInput);
diff --git a/src/client/app/common/views/components/switch.vue b/src/client/app/common/views/components/switch.vue
deleted file mode 100644
index aa60331cbc..0000000000
--- a/src/client/app/common/views/components/switch.vue
+++ /dev/null
@@ -1,199 +0,0 @@
-<template>
-<div
-	class="mk-switch"
-	:class="{ disabled, checked }"
-	role="switch"
-	:aria-checked="checked"
-	:aria-disabled="disabled"
-	@click="switchValue"
-	@mouseover="mouseenter"
->
-	<input
-		type="checkbox"
-		@change="handleChange"
-		ref="input"
-		:disabled="disabled"
-		@keydown.enter="switchValue"
-	>
-	<span class="button">
-		<span :style="{ transform }"></span>
-	</span>
-	<span class="label">
-		<span :aria-hidden="!checked">{{ text }}</span>
-		<p :aria-hidden="!checked">
-			<slot></slot>
-		</p>
-	</span>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-	props: {
-		value: {
-			type: Boolean,
-			default: false
-		},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		text: String
-	},/*
-	created() {
-		if (!~[true, false].indexOf(this.value)) {
-			this.$emit('input', false);
-		}
-	},*/
-	computed: {
-		checked(): boolean {
-			return this.value;
-		},
-		transform(): string {
-			return this.checked ? 'translate3d(20px, 0, 0)' : '';
-		}
-	},
-	watch: {
-		value() {
-			(this.$el).style.transition = 'all 0.3s';
-			(this.$refs.input as any).checked = this.checked;
-		}
-	},
-	mounted() {
-		(this.$refs.input as any).checked = this.checked;
-	},
-	methods: {
-		mouseenter() {
-			(this.$el).style.transition = 'all 0s';
-		},
-		handleChange() {
-			(this.$el).style.transition = 'all 0.3s';
-			this.$emit('input', !this.checked);
-			this.$emit('change', !this.checked);
-			this.$nextTick(() => {
-				// set input's checked property
-				// in case parent refuses to change component's value
-				(this.$refs.input as any).checked = this.checked;
-			});
-		},
-		switchValue() {
-			!this.disabled && this.handleChange();
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-
-
-root(isDark)
-	display flex
-	margin 12px 0
-	cursor pointer
-	transition all 0.3s
-
-	> *
-		user-select none
-
-	&.disabled
-		opacity 0.6
-		cursor not-allowed
-
-	&.checked
-		> .button
-			background-color var(--primary)
-			border-color var(--primary)
-
-		> .label
-			> span
-				color var(--primary)
-
-		&:hover
-			> .label
-				> span
-					color var(--primaryDarken10)
-
-			> .button
-				background var(--primaryDarken10)
-				border-color var(--primaryDarken10)
-
-	&:hover
-		> .label
-			> span
-				color isDark ? #fff : #2e3338
-
-		> .button
-			$color = isDark ? #15181d : #ced2da
-			background $color
-			border-color $color
-
-	> input
-		position absolute
-		width 0
-		height 0
-		opacity 0
-		margin 0
-
-		&:focus + .button
-			&:after
-				content ""
-				pointer-events none
-				position absolute
-				top -5px
-				right -5px
-				bottom -5px
-				left -5px
-				border 2px solid var(--primaryAlpha03)
-				border-radius 14px
-
-	> .button
-		$color = isDark ? #1c1f25 : #dcdfe6
-
-		display inline-block
-		margin 0
-		width 40px
-		min-width 40px
-		height 20px
-		min-height 20px
-		background $color
-		border 1px solid $color
-		outline none
-		border-radius 10px
-		transition inherit
-
-		> *
-			position absolute
-			top 1px
-			left 1px
-			border-radius 100%
-			transition transform 0.3s
-			width 16px
-			height 16px
-			background-color #fff
-
-	> .label
-		margin-left 8px
-		display block
-		font-size 15px
-		cursor pointer
-		transition inherit
-
-		> span
-			display block
-			line-height 20px
-			color isDark ? #c4ccd2 : #4a535a
-			transition inherit
-
-		> p
-			margin 0
-			//font-size 90%
-			color isDark ? #78858e : #9daab3
-
-.mk-switch[data-darkmode]
-	root(true)
-
-.mk-switch:not([data-darkmode])
-	root(false)
-
-</style>
diff --git a/src/client/app/common/views/components/ui/button.vue b/src/client/app/common/views/components/ui/button.vue
index ae59214038..c411f0f5c9 100644
--- a/src/client/app/common/views/components/ui/button.vue
+++ b/src/client/app/common/views/components/ui/button.vue
@@ -32,8 +32,6 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
 root(isDark, fill)
 	> button
 		display block
diff --git a/src/client/app/common/views/components/ui/switch.vue b/src/client/app/common/views/components/ui/switch.vue
index e358713d8f..2ee787cb76 100644
--- a/src/client/app/common/views/components/ui/switch.vue
+++ b/src/client/app/common/views/components/ui/switch.vue
@@ -56,9 +56,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.ui-switch
 	display flex
 	margin 32px 0
 	cursor pointer
@@ -99,7 +97,7 @@ root(isDark)
 		margin 3px 0 0 0
 		width 34px
 		height 14px
-		background isDark ? rgba(#fff, 0.15) : rgba(#000, 0.25)
+		background var(--switchTrack)
 		outline none
 		border-radius 14px
 		transition inherit
@@ -125,18 +123,11 @@ root(isDark)
 		> span
 			display block
 			line-height 20px
-			color isDark ? #c4ccd2 : rgba(#000, 0.75)
+			color currentColor
 			transition inherit
 
 		> p
 			margin 0
-			//font-size 90%
-			color isDark ? #78858e : #9daab3
-
-.ui-switch[data-darkmode]
-	root(true)
-
-.ui-switch:not([data-darkmode])
-	root(false)
+			opacity 0.7
 
 </style>
diff --git a/src/client/app/desktop/views/components/settings.profile.vue b/src/client/app/desktop/views/components/settings.profile.vue
index d47b5b224b..9dd2798557 100644
--- a/src/client/app/desktop/views/components/settings.profile.vue
+++ b/src/client/app/desktop/views/components/settings.profile.vue
@@ -24,13 +24,13 @@
 	<button class="ui primary" @click="save">%i18n:@save%</button>
 	<section>
 		<h2>%i18n:@locked-account%</h2>
-		<mk-switch v-model="$store.state.i.isLocked" @change="onChangeIsLocked" text="%i18n:@is-locked%"/>
+		<ui-switch v-model="$store.state.i.isLocked" @change="onChangeIsLocked">%i18n:@is-locked%</ui-switch>
 	</section>
 	<section>
 		<h2>%i18n:@other%</h2>
-		<mk-switch v-model="$store.state.i.isBot" @change="onChangeIsBot" text="%i18n:@is-bot%"/>
-		<mk-switch v-model="$store.state.i.isCat" @change="onChangeIsCat" text="%i18n:@is-cat%"/>
-		<mk-switch v-model="alwaysMarkNsfw" text="%i18n:common.always-mark-nsfw%"/>
+		<ui-switch v-model="$store.state.i.isBot" @change="onChangeIsBot">%i18n:@is-bot%</ui-switch>
+		<ui-switch v-model="$store.state.i.isCat" @change="onChangeIsCat">%i18n:@is-cat%</ui-switch>
+		<ui-switch v-model="alwaysMarkNsfw">%i18n:common.always-mark-nsfw%</ui-switch>
 	</section>
 </div>
 </template>
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 4b8ee3c9cd..4efaa75c4b 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -30,7 +30,7 @@
 
 			<section>
 				<header>%i18n:@note-visibility%</header>
-				<mk-switch v-model="rememberNoteVisibility" text="%i18n:@remember-note-visibility%"/>
+				<ui-switch v-model="rememberNoteVisibility">%i18n:@remember-note-visibility%</ui-switch>
 				<section>
 					<header>%i18n:@default-note-visibility%</header>
 					<ui-select v-model="defaultNoteVisibility">
@@ -59,30 +59,30 @@
 			<div class="div">
 				<button class="ui" @click="updateWallpaper">%i18n:@choose-wallpaper%</button>
 				<button class="ui" @click="deleteWallpaper">%i18n:@delete-wallpaper%</button>
-				<mk-switch v-model="darkmode" text="%i18n:@dark-mode%"/>
-				<mk-switch v-model="useShadow" text="%i18n:@use-shadow%"/>
-				<mk-switch v-model="roundedCorners" text="%i18n:@rounded-corners%"/>
-				<mk-switch v-model="circleIcons" text="%i18n:@circle-icons%"/>
-				<mk-switch v-model="reduceMotion" text="%i18n:common.reduce-motion%"/>
-				<mk-switch v-model="contrastedAcct" text="%i18n:@contrasted-acct%"/>
-				<mk-switch v-model="showFullAcct" text="%i18n:common.show-full-acct%"/>
-				<mk-switch v-model="gradientWindowHeader" text="%i18n:@gradient-window-header%"/>
-				<mk-switch v-model="iLikeSushi" text="%i18n:common.i-like-sushi%"/>
+				<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
+				<ui-switch v-model="useShadow">%i18n:@use-shadow%</ui-switch>
+				<ui-switch v-model="roundedCorners">%i18n:@rounded-corners%</ui-switch>
+				<ui-switch v-model="circleIcons">%i18n:@circle-icons%</ui-switch>
+				<ui-switch v-model="reduceMotion">%i18n:common.reduce-motion%</ui-switch>
+				<ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
+				<ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch>
+				<ui-switch v-model="gradientWindowHeader">%i18n:@gradient-window-header%</ui-switch>
+				<ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
 			</div>
-			<mk-switch v-model="showPostFormOnTopOfTl" text="%i18n:@post-form-on-timeline%"/>
-			<mk-switch v-model="suggestRecentHashtags" text="%i18n:@suggest-recent-hashtags%"/>
-			<mk-switch v-model="showClockOnHeader" text="%i18n:@show-clock-on-header%"/>
-			<mk-switch v-model="alwaysShowNsfw" text="%i18n:common.always-show-nsfw%"/>
-			<mk-switch v-model="showReplyTarget" text="%i18n:@show-reply-target%"/>
-			<mk-switch v-model="showMyRenotes" text="%i18n:@show-my-renotes%"/>
-			<mk-switch v-model="showRenotedMyNotes" text="%i18n:@show-renoted-my-notes%"/>
-			<mk-switch v-model="showLocalRenotes" text="%i18n:@show-local-renotes%"/>
+			<ui-switch v-model="showPostFormOnTopOfTl">%i18n:@post-form-on-timeline%</ui-switch>
+			<ui-switch v-model="suggestRecentHashtags">%i18n:@suggest-recent-hashtags%</ui-switch>
+			<ui-switch v-model="showClockOnHeader">%i18n:@show-clock-on-header%</ui-switch>
+			<ui-switch v-model="alwaysShowNsfw">%i18n:common.always-show-nsfw%</ui-switch>
+			<ui-switch v-model="showReplyTarget">%i18n:@show-reply-target%</ui-switch>
+			<ui-switch v-model="showMyRenotes">%i18n:@show-my-renotes%</ui-switch>
+			<ui-switch v-model="showRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch>
+			<ui-switch v-model="showLocalRenotes">%i18n:@show-local-renotes%</ui-switch>
 			<mk-switch v-model="showMaps" text="%i18n:@show-maps%">
 				<span>%i18n:@show-maps-desc%</span>
 			</mk-switch>
-			<mk-switch v-model="disableAnimatedMfm" text="%i18n:common.disable-animated-mfm%"/>
-			<mk-switch v-model="games_reversi_showBoardLabels" text="%i18n:common.show-reversi-board-labels%"/>
-			<mk-switch v-model="games_reversi_useContrastStones" text="%i18n:common.use-contrast-reversi-stones%"/>
+			<ui-switch v-model="disableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch>
+			<ui-switch v-model="games_reversi_showBoardLabels">%i18n:common.show-reversi-board-labels%</ui-switch>
+			<ui-switch v-model="games_reversi_useContrastStones">%i18n:common.use-contrast-reversi-stones%</ui-switch>
 		</section>
 
 		<section class="web" v-show="page == 'web'">
@@ -102,7 +102,7 @@
 
 		<section class="web" v-show="page == 'web'">
 			<h1>%i18n:@mobile%</h1>
-			<mk-switch v-model="disableViaMobile" text="%i18n:@disable-via-mobile%"/>
+			<ui-switch v-model="disableViaMobile">%i18n:@disable-via-mobile%</ui-switch>
 		</section>
 
 		<section class="web" v-show="page == 'web'">
diff --git a/src/client/app/desktop/views/pages/deck/deck.tl-column.vue b/src/client/app/desktop/views/pages/deck/deck.tl-column.vue
index 550b1be628..d245e3ecf5 100644
--- a/src/client/app/desktop/views/pages/deck/deck.tl-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.tl-column.vue
@@ -11,8 +11,8 @@
 	</span>
 
 	<div class="editor" style="padding:0 12px" v-if="edit">
-		<mk-switch v-model="column.isMediaOnly" @change="onChangeSettings" text="%i18n:@is-media-only%"/>
-		<mk-switch v-model="column.isMediaView" @change="onChangeSettings" text="%i18n:@is-media-view%"/>
+		<ui-switch v-model="column.isMediaOnly" @change="onChangeSettings">%i18n:@is-media-only%</ui-switch>
+		<ui-switch v-model="column.isMediaView" @change="onChangeSettings">%i18n:@is-media-view%</ui-switch>
 	</div>
 	<x-list-tl v-if="column.type == 'list'" :list="column.list" :media-only="column.isMediaOnly" :media-view="column.isMediaView"/>
 	<x-hashtag-tl v-if="column.type == 'hashtag'" :tag-tl="$store.state.settings.tagTimelines.find(x => x.id == column.tagTlId)" :media-only="column.isMediaOnly" :media-view="column.isMediaView"/>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 77a41228d0..a3877093f5 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -1,7 +1,8 @@
 {
 	"meta": {
 		"id": "9978f7f9-5616-44fd-a704-cc5985efdd63",
-		"name": "Dark"
+		"name": "Dark",
+		"author": "syuilo"
 	},
 	"primary": "#fb4e4e",
 	"primaryForeground": "#fff",
@@ -28,7 +29,7 @@
 	"dateDividerFg": "#666b79",
 	"footerButtonHover": "#2e3440",
 	"footerButtonActive": "#21242b",
-
+	"switchTrack": "rgba(255, 255, 255, 0.15)",
 	"noteHeaderName": "#fff",
 	"noteHeaderBadgeFg": "#758188",
 	"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.25)",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index 7c26fbf6e6..b156eb1aa8 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -2,6 +2,7 @@
 	"meta": {
 		"id": "42e4f09b-67d5-498c-af7d-29faa54745b0",
 		"name": "Halloween",
+		"author": "syuilo",
 		"inherit": "9978f7f9-5616-44fd-a704-cc5985efdd63"
 	},
 	"primary": "#fb8d4e",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 28cc71bdb7..7dcf2d3f44 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -1,7 +1,8 @@
 {
 	"meta": {
 		"id": "406cfea3-a4e7-486c-9057-30ede1353c3f",
-		"name": "Light"
+		"name": "Light",
+		"author": "syuilo"
 	},
 	"primary": "#fb4e4e",
 	"primaryForeground": "#fff",
@@ -28,7 +29,7 @@
 	"dateDividerFg": "#aaa",
 	"footerButtonHover": "#f5f5f5",
 	"footerButtonActive": "#eee",
-
+	"switchTrack": "rgba(0, 0, 0, 0.25)",
 	"noteHeaderName": "#627079",
 	"noteHeaderBadgeFg": "#aaa",
 	"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.05)",

From 76a25917c03f3bd4e46ff53300f5a1a1fc8a883a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 13:54:53 +0900
Subject: [PATCH 18/72] wip

---
 src/client/app/desktop/views/components/notes.vue | 4 ++--
 src/client/theme/dark.json                        | 2 --
 src/client/theme/light.json                       | 2 --
 3 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index 31b3a3ab18..84b13ed84e 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -264,9 +264,9 @@ export default Vue.extend({
 			border-bottom-right-radius 6px
 
 			&:hover
-				background var(--footerButtonHover)
+				box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
 
 			&:active
-				background var(--footerButtonActive)
+				box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
 
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index a3877093f5..c9e9835136 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -27,8 +27,6 @@
 	"modalBackdrop": "rgba(0, 0, 0, 0.5)",
 	"dateDividerBg": "#242731",
 	"dateDividerFg": "#666b79",
-	"footerButtonHover": "#2e3440",
-	"footerButtonActive": "#21242b",
 	"switchTrack": "rgba(255, 255, 255, 0.15)",
 	"noteHeaderName": "#fff",
 	"noteHeaderBadgeFg": "#758188",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 7dcf2d3f44..6aef10d9a6 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -27,8 +27,6 @@
 	"modalBackdrop": "rgba(0, 0, 0, 0.1)",
 	"dateDividerBg": "#fdfdfd",
 	"dateDividerFg": "#aaa",
-	"footerButtonHover": "#f5f5f5",
-	"footerButtonActive": "#eee",
 	"switchTrack": "rgba(0, 0, 0, 0.25)",
 	"noteHeaderName": "#627079",
 	"noteHeaderBadgeFg": "#aaa",

From 4fe2f29478fbf81cb21450170b551ed21211a854 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 14:32:48 +0900
Subject: [PATCH 19/72] wip

---
 .../app/desktop/views/components/calendar.vue |  4 ++--
 .../desktop/views/components/note-detail.vue  | 18 +++++---------
 .../desktop/views/components/note-preview.vue |  2 +-
 .../views/components/notes.note.sub.vue       |  2 +-
 .../desktop/views/components/notes.note.vue   |  6 ++---
 .../desktop/views/components/post-form.vue    |  8 +++----
 .../app/desktop/views/components/timeline.vue | 23 +++++-------------
 .../views/components/widget-container.vue     |  4 ++--
 .../desktop/views/pages/deck/deck.column.vue  |  4 ++--
 .../desktop/views/pages/deck/deck.note.vue    |  6 ++---
 .../views/pages/deck/deck.notification.vue    |  4 ++--
 .../mobile/views/components/note-detail.vue   | 20 ++++++----------
 .../mobile/views/components/note-preview.vue  |  2 +-
 .../app/mobile/views/components/note.sub.vue  |  2 +-
 .../app/mobile/views/components/note.vue      |  6 ++---
 .../mobile/views/components/notification.vue  |  4 ++--
 src/client/theme/dark.json                    | 24 +++++++++++++------
 src/client/theme/halloween.json               |  2 +-
 src/client/theme/light.json                   | 24 +++++++++++++------
 19 files changed, 80 insertions(+), 85 deletions(-)

diff --git a/src/client/app/desktop/views/components/calendar.vue b/src/client/app/desktop/views/components/calendar.vue
index cd73ab350b..6b753068fa 100644
--- a/src/client/app/desktop/views/components/calendar.vue
+++ b/src/client/app/desktop/views/components/calendar.vue
@@ -166,10 +166,10 @@ root(isDark)
 		width 42px
 		font-size 0.9em
 		line-height 42px
-		color isDark ? #9baec8 : #ccc
+		color var(--faceTextButton)
 
 		&:hover
-			color isDark ? #b2c1d5 : #aaa
+			color var(--faceTextButtonHover)
 
 		&:active
 			color isDark ? #b2c1d5 : #999
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index 9222d8fab9..50ad793f0b 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -225,7 +225,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-note-detail
 	overflow hidden
 	text-align left
 	background var(--face)
@@ -327,14 +327,14 @@ root(isDark)
 				display block
 				text-align left
 				margin 0
-				color isDark ? #606984 : #ccc
+				color var(--noteHeaderAcct)
 
 			> .time
 				position absolute
 				top 0
 				right 32px
 				font-size 1em
-				color isDark ? #606984 : #c0c0c0
+				color var(--noteHeaderInfo)
 
 		> .body
 			padding 8px 0
@@ -345,7 +345,7 @@ root(isDark)
 				margin 0
 				padding 0
 				overflow-wrap break-word
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 				> .text
 					margin-right 8px
@@ -358,14 +358,14 @@ root(isDark)
 					padding 0
 					overflow-wrap break-word
 					font-size 1.5em
-					color isDark ? #fff : #717171
+					color var(--noteText)
 
 				> .renote
 					margin 8px 0
 
 					> *
 						padding 16px
-						border dashed 1px #c0dac6
+						border dashed 1px vat(--quoteBorder)
 						border-radius 8px
 
 				> .location
@@ -419,10 +419,4 @@ root(isDark)
 		> *
 			border-top 1px solid var(--faceDivider)
 
-.mk-note-detail[data-darkmode]
-	root(true)
-
-.mk-note-detail:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/note-preview.vue b/src/client/app/desktop/views/components/note-preview.vue
index 6c84165356..f64657fb47 100644
--- a/src/client/app/desktop/views/components/note-preview.vue
+++ b/src/client/app/desktop/views/components/note-preview.vue
@@ -71,7 +71,7 @@ root(isDark)
 				margin 0
 				padding 0
 				overflow-wrap break-word
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 				> .text
 					margin-right 8px
diff --git a/src/client/app/desktop/views/components/notes.note.sub.vue b/src/client/app/desktop/views/components/notes.note.sub.vue
index 13e2991683..70709f8738 100644
--- a/src/client/app/desktop/views/components/notes.note.sub.vue
+++ b/src/client/app/desktop/views/components/notes.note.sub.vue
@@ -72,7 +72,7 @@ root(isDark)
 				margin 0
 				padding 0
 				overflow-wrap break-word
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 				> .text
 					margin-right 8px
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 160de5199d..5daaadb971 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -426,7 +426,7 @@ root(isDark)
 					margin 0
 					padding 0
 					overflow-wrap break-word
-					color isDark ? #fff : #717171
+					color var(--noteText)
 
 					> .text
 						margin-right 8px
@@ -439,7 +439,7 @@ root(isDark)
 						margin 0
 						padding 0
 						overflow-wrap break-word
-						color isDark ? #fff : #717171
+						color var(--noteText)
 
 						>>> .title
 							display block
@@ -491,7 +491,7 @@ root(isDark)
 
 						> *
 							padding 16px
-							border dashed 1px isDark ? #4e945e : #c0dac6
+							border dashed 1px vat(--quoteBorder)
 							border-radius 8px
 
 			> footer
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index fdd6e75318..5a5f9d63db 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -434,12 +434,10 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
 root(isDark)
 	display block
 	padding 16px
-	background isDark ? #282C37 : var(--primaryLighten95)
+	background var(--desktopPostFormBg)
 
 	&:after
 		content ""
@@ -453,8 +451,8 @@ root(isDark)
 			width 100%
 			padding 12px
 			font-size 16px
-			color isDark ? #fff : #333
-			background isDark ? #191d23 : #fff
+			color var(--desktopPostFormTextareaFg)
+			background var(--desktopPostFormTextareaBg)
 			outline none
 			border solid 1px var(--primaryAlpha01)
 			border-radius 4px
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index 7800eae52d..3e4c45d228 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -175,9 +175,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-timeline
 	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
@@ -187,7 +185,7 @@ root(isDark)
 		padding 0 8px
 		z-index 10
 		background var(--faceHeader)
-		box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
+		box-shadow 0 1px var(--desktopTimelineHeaderShadow)
 
 		> .buttons
 			position absolute
@@ -200,7 +198,7 @@ root(isDark)
 				padding 0 8px
 				font-size 0.9em
 				line-height 42px
-				color isDark ? #9baec8 : #ccc
+				color var(--faceTextButton)
 
 				> .badge
 					position absolute
@@ -210,10 +208,7 @@ root(isDark)
 					color var(--primary)
 
 				&:hover
-					color isDark ? #b2c1d5 : #aaa
-
-				&:active
-					color isDark ? #b2c1d5 : #999
+					color var(--faceTextButtonHover)
 
 				&[data-active]
 					color var(--primary)
@@ -252,16 +247,10 @@ root(isDark)
 					background var(--primary)
 
 			&:not([data-active])
-				color isDark ? #9aa2a7 : #6f7477
+				color var(--desktopTimelineSrc)
 				cursor pointer
 
 				&:hover
-					color isDark ? #d9dcde : #525a5f
-
-.mk-timeline[data-darkmode]
-	root(true)
-
-.mk-timeline:not([data-darkmode])
-	root(false)
+					color var(--desktopTimelineSrcHover)
 
 </style>
diff --git a/src/client/app/desktop/views/components/widget-container.vue b/src/client/app/desktop/views/components/widget-container.vue
index d17b9c91d8..156823799f 100644
--- a/src/client/app/desktop/views/components/widget-container.vue
+++ b/src/client/app/desktop/views/components/widget-container.vue
@@ -72,10 +72,10 @@ root(isDark)
 			width 42px
 			font-size 0.9em
 			line-height 42px
-			color isDark ? #9baec8 : #ccc
+			color var(--faceTextButton)
 
 			&:hover
-				color isDark ? #b2c1d5 : #aaa
+				color var(--faceTextButtonHover)
 
 			&:active
 				color isDark ? #b2c1d5 : #999
diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue
index 1cf8900ee5..fb521db25b 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -344,10 +344,10 @@ root(isDark)
 			width $header-height
 			line-height $header-height
 			font-size 16px
-			color isDark ? #9baec8 : #ccc
+			color var(--faceTextButton)
 
 			&:hover
-				color isDark ? #b2c1d5 : #aaa
+				color var(--faceTextButtonHover)
 
 			&:active
 				color isDark ? #b2c1d5 : #999
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index ffb284fb42..bdc4368e7b 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -309,7 +309,7 @@ root(isDark)
 					margin 0
 					padding 0
 					overflow-wrap break-word
-					color isDark ? #fff : #717171
+					color var(--noteText)
 
 					> .text
 						margin-right 8px
@@ -321,7 +321,7 @@ root(isDark)
 						margin 0
 						padding 0
 						overflow-wrap break-word
-						color isDark ? #fff : #717171
+						color var(--noteText)
 
 						>>> .title
 							display block
@@ -387,7 +387,7 @@ root(isDark)
 
 						> *
 							padding 16px
-							border dashed 1px isDark ? #4e945e : #c0dac6
+							border dashed 1px vat(--quoteBorder)
 							border-radius 8px
 
 				> .app
diff --git a/src/client/app/desktop/views/pages/deck/deck.notification.vue b/src/client/app/desktop/views/pages/deck/deck.notification.vue
index d0093ff282..ff10ac2aa6 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notification.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notification.vue
@@ -146,10 +146,10 @@ root(isDark)
 					font-size 0.9em
 
 			> .note-preview
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 			> .note-ref
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 				[data-fa]
 					font-size 1em
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 472c18088d..ade518b1fc 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -223,7 +223,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-note-detail
 	overflow hidden
 	width 100%
 	text-align left
@@ -334,7 +334,7 @@ root(isDark)
 					display block
 					text-align left
 					margin 0
-					color isDark ? #606984 : #ccc
+					color var(--noteHeaderAcct)
 
 		> .body
 			padding 8px 0
@@ -345,7 +345,7 @@ root(isDark)
 				margin 0
 				padding 0
 				overflow-wrap break-word
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 				> .text
 					margin-right 8px
@@ -358,7 +358,7 @@ root(isDark)
 					padding 0
 					overflow-wrap break-word
 					font-size 16px
-					color isDark ? #fff : #717171
+					color var(--noteText)
 
 					@media (min-width 500px)
 						font-size 24px
@@ -368,7 +368,7 @@ root(isDark)
 
 					> *
 						padding 16px
-						border dashed 1px #c0dac6
+						border dashed 1px vat(--quoteBorder)
 						border-radius 8px
 
 				> .location
@@ -393,7 +393,7 @@ root(isDark)
 
 		> .time
 			font-size 16px
-			color isDark ? #606984 : #c0c0c0
+			color var(--noteHeaderInfo)
 
 		> footer
 			font-size 1.2em
@@ -412,7 +412,7 @@ root(isDark)
 					margin-right 28px
 
 				&:hover
-					color isDark ? #9198af : #666
+					color var(--noteActionsHover)
 
 				> .count
 					display inline
@@ -426,10 +426,4 @@ root(isDark)
 		> *
 			border-top 1px solid var(--faceDivider)
 
-.mk-note-detail[data-darkmode]
-	root(true)
-
-.mk-note-detail:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/note-preview.vue b/src/client/app/mobile/views/components/note-preview.vue
index 4c03593a9e..0b3278ff41 100644
--- a/src/client/app/mobile/views/components/note-preview.vue
+++ b/src/client/app/mobile/views/components/note-preview.vue
@@ -88,7 +88,7 @@ root(isDark)
 				margin 0
 				padding 0
 				overflow-wrap break-word
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 				> .text
 					margin-right 8px
diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue
index 2f38c9e97d..8c2e3b496d 100644
--- a/src/client/app/mobile/views/components/note.sub.vue
+++ b/src/client/app/mobile/views/components/note.sub.vue
@@ -95,7 +95,7 @@ root(isDark)
 				margin 0
 				padding 0
 				overflow-wrap break-word
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 				> .text
 					margin-right 8px
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 859fc88043..ed175b4f6f 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -349,7 +349,7 @@ root(isDark)
 					margin 0
 					padding 0
 					overflow-wrap break-word
-					color isDark ? #fff : #717171
+					color var(--noteText)
 
 					> .text
 						margin-right 8px
@@ -361,7 +361,7 @@ root(isDark)
 						margin 0
 						padding 0
 						overflow-wrap break-word
-						color isDark ? #fff : #717171
+						color var(--noteText)
 
 						>>> .title
 							display block
@@ -427,7 +427,7 @@ root(isDark)
 
 						> *
 							padding 16px
-							border dashed 1px isDark ? #4e945e : #c0dac6
+							border dashed 1px vat(--quoteBorder)
 							border-radius 8px
 
 				> .app
diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index ee90c6b46b..7b73012e06 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -158,10 +158,10 @@ root(isDark)
 					font-size 0.9em
 
 			> .note-preview
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 			> .note-ref
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 				[data-fa]
 					font-size 1em
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index c9e9835136..88bde9d684 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -13,11 +13,22 @@
 	"face": "#282c37",
 	"faceHeader": "#313543",
 	"faceDivider": "rgba(0, 0, 0, 0.3)",
+	"faceTextButton": "#9baec8",
+	"faceTextButtonHover": "#b2c1d5",
 	"popupBg": "#2c303c",
 	"popupFg": "#d6dce2",
 	"subNoteBg": "rgba(0, 0, 0, 0.18)",
 	"renoteGradient": "#314027",
 	"renoteText": "#9dbb00",
+	"quoteBorder": "#4e945e",
+	"noteText": "#fff",
+	"noteHeaderName": "#fff",
+	"noteHeaderBadgeFg": "#758188",
+	"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.25)",
+	"noteHeaderAdminFg": "#f15f71",
+	"noteHeaderAdminBg": "#5d282e",
+	"noteHeaderAcct": "#606984",
+	"noteHeaderInfo": "#606984",
 	"noteActions": "#606984",
 	"noteActionsHover": "#a1a8bf",
 	"noteActionsReplyHover": "#0af",
@@ -28,13 +39,6 @@
 	"dateDividerBg": "#242731",
 	"dateDividerFg": "#666b79",
 	"switchTrack": "rgba(255, 255, 255, 0.15)",
-	"noteHeaderName": "#fff",
-	"noteHeaderBadgeFg": "#758188",
-	"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.25)",
-	"noteHeaderAdminFg": "#f15f71",
-	"noteHeaderAdminBg": "#5d282e",
-	"noteHeaderAcct": "#606984",
-	"noteHeaderInfo": "#606984",
 	"autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)",
 	"autocompleteItemText": "rgba(255, 255, 255, 0.8)",
 	"autocompleteItemTextSub": "rgba(255, 255, 255, 0.3)",
@@ -43,6 +47,12 @@
 	"cwButtonHoverBg": "#707b97",
 	"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
 	"desktopHeaderBg": "#313543",
+	"desktopPostFormBg": "@face",
+	"desktopPostFormTextareaBg": "rgba(0, 0, 0, 0.25)",
+	"desktopPostFormTextareaFg": "#fff",
+	"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.15)",
+	"desktopTimelineSrc": "@faceTextButton",
+	"desktopTimelineSrcHover": "@faceTextButtonHover",
 	"mobileSignedInAsBg": "#273c34",
 	"mobileSignedInAsFg": "#49ab63",
 	"mobileSignoutBg": "#652222",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index b156eb1aa8..474fc7ea8f 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -8,7 +8,7 @@
 	"primary": "#fb8d4e",
 	"primaryForeground": "#fff",
 	"bg": "#1b1a35",
-	"face": "#2e2a3e",
+	"face": "#322e44",
 	"faceHeader": "#36314e",
 	"dateDividerBg": "#26253c",
 	"popupBg": "#2c303c",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 6aef10d9a6..3374a62e36 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -13,11 +13,22 @@
 	"face": "#fff",
 	"faceHeader": "#fff",
 	"faceDivider": "rgba(0, 0, 0, 0.082)",
+	"faceTextButton": "#ccc",
+	"faceTextButtonHover": "#aaa",
 	"popupBg": "#fff",
 	"popupFg": "#586069",
 	"subNoteBg": "rgba(0, 0, 0, 0.01)",
 	"renoteGradient": "#edfde2",
 	"renoteText": "#9dbb00",
+	"quoteBorder": "#c0dac6",
+	"noteText": "#717171",
+	"noteHeaderName": "#627079",
+	"noteHeaderBadgeFg": "#aaa",
+	"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.05)",
+	"noteHeaderAdminFg": "#f15f71",
+	"noteHeaderAdminBg": "#5d282e",
+	"noteHeaderAcct": "#ccc",
+	"noteHeaderInfo": "#c0c0c0",
 	"noteActions": "#ddd",
 	"noteActionsHover": "#444",
 	"noteActionsReplyHover": "#0af",
@@ -28,13 +39,6 @@
 	"dateDividerBg": "#fdfdfd",
 	"dateDividerFg": "#aaa",
 	"switchTrack": "rgba(0, 0, 0, 0.25)",
-	"noteHeaderName": "#627079",
-	"noteHeaderBadgeFg": "#aaa",
-	"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.05)",
-	"noteHeaderAdminFg": "#f15f71",
-	"noteHeaderAdminBg": "#5d282e",
-	"noteHeaderAcct": "#ccc",
-	"noteHeaderInfo": "#c0c0c0",
 	"autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)",
 	"autocompleteItemText": "rgba(0, 0, 0, 0.8)",
 	"autocompleteItemTextSub": "rgba(0, 0, 0, 0.3)",
@@ -43,6 +47,12 @@
 	"cwButtonHoverBg": "#bbc4ce",
 	"reactionPickerButtonHoverBg": "#eee",
 	"desktopHeaderBg": "#f7f7f7",
+	"desktopPostFormBg": "#fff6f6",
+	"desktopPostFormTextareaBg": "#fff",
+	"desktopPostFormTextareaFg": "#333",
+	"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.08)",
+	"desktopTimelineSrc": "#6f7477",
+	"desktopTimelineSrcHover": "#525a5f",
 	"mobileSignedInAsBg": "#fcfff5",
 	"mobileSignedInAsFg": "#2c662d",
 	"mobileSignoutBg": "#fff6f5",

From 7b8a2aef0f9ed4d848d749769fd9dc6774b1e65a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 14:52:10 +0900
Subject: [PATCH 20/72] wip

---
 locales/ja-JP.yml                             |  1 -
 .../app/desktop/views/components/settings.vue |  8 +-------
 .../views/components/widget-container.vue     | 20 +++----------------
 .../app/desktop/views/components/window.vue   | 15 ++++----------
 .../desktop/views/pages/deck/deck.column.vue  |  2 +-
 .../pages/user/user.followers-you-know.vue    |  2 +-
 .../desktop/views/pages/user/user.friends.vue |  2 +-
 .../desktop/views/pages/user/user.photos.vue  |  2 +-
 src/client/app/store.ts                       |  1 -
 src/client/theme/dark.json                    |  3 +++
 src/client/theme/light.json                   |  3 +++
 11 files changed, 18 insertions(+), 41 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index db2a155221..f5d0a180d8 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -784,7 +784,6 @@ desktop/views/components/settings.vue:
   rounded-corners: "UIの角を丸める"
   circle-icons: "円形のアイコンを使用"
   contrasted-acct: "ユーザー名にコントラストを付ける"
-  gradient-window-header: "ウィンドウのタイトルバーにグラデーションを使用"
   post-form-on-timeline: "タイムライン上部に投稿フォームを表示する"
   suggest-recent-hashtags: "最近のハッシュタグを投稿フォームに表示する"
   show-clock-on-header: "右上に時計を表示する"
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 4efaa75c4b..e95e7a735d 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -66,7 +66,6 @@
 				<ui-switch v-model="reduceMotion">%i18n:common.reduce-motion%</ui-switch>
 				<ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
 				<ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch>
-				<ui-switch v-model="gradientWindowHeader">%i18n:@gradient-window-header%</ui-switch>
 				<ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
 			</div>
 			<ui-switch v-model="showPostFormOnTopOfTl">%i18n:@post-form-on-timeline%</ui-switch>
@@ -421,12 +420,7 @@ export default Vue.extend({
 		disableViaMobile: {
 			get() { return this.$store.state.settings.disableViaMobile; },
 			set(value) { this.$store.dispatch('settings/set', { key: 'disableViaMobile', value }); }
-		},
-
-		gradientWindowHeader: {
-			get() { return this.$store.state.settings.gradientWindowHeader; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'gradientWindowHeader', value }); }
-		},
+		}
 	},
 	created() {
 		(this as any).os.getMeta().then(meta => {
diff --git a/src/client/app/desktop/views/components/widget-container.vue b/src/client/app/desktop/views/components/widget-container.vue
index 156823799f..cfcb2785c5 100644
--- a/src/client/app/desktop/views/components/widget-container.vue
+++ b/src/client/app/desktop/views/components/widget-container.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="mk-widget-container" :class="{ naked }">
-	<header :class="{ withGradient }" v-if="showHeader">
+	<header v-if="showHeader">
 		<div class="title"><slot name="header"></slot></div>
 		<slot name="func"></slot>
 	</header>
@@ -20,15 +20,6 @@ export default Vue.extend({
 			type: Boolean,
 			default: false
 		}
-	},
-	computed: {
-		withGradient(): boolean {
-			return this.$store.getters.isSignedIn
-				? this.$store.state.settings.gradientWindowHeader != null
-					? this.$store.state.settings.gradientWindowHeader
-					: false
-				: false;
-		}
 	}
 });
 </script>
@@ -54,7 +45,7 @@ root(isDark)
 			line-height 42px
 			font-size 0.9em
 			font-weight bold
-			color isDark ? #e3e5e8 : #888
+			color var(--faceHeaderText)
 			box-shadow 0 1px rgba(#000, 0.07)
 
 			> [data-fa]
@@ -78,12 +69,7 @@ root(isDark)
 				color var(--faceTextButtonHover)
 
 			&:active
-				color isDark ? #b2c1d5 : #999
-
-		&.withGradient
-			> .title
-				background isDark ? linear-gradient(to bottom, #313543, #1d2027) : linear-gradient(to bottom, #fff, #ececec)
-				box-shadow 0 1px rgba(#000, 0.11)
+				color var(--faceTextButtonActive)
 
 .mk-widget-container[data-darkmode]
 	root(true)
diff --git a/src/client/app/desktop/views/components/window.vue b/src/client/app/desktop/views/components/window.vue
index 15aa158073..5547445537 100644
--- a/src/client/app/desktop/views/components/window.vue
+++ b/src/client/app/desktop/views/components/window.vue
@@ -4,7 +4,6 @@
 	<div class="main" ref="main" tabindex="-1" :data-is-modal="isModal" @mousedown="onBodyMousedown" @keydown="onKeydown" :style="{ width, height }">
 		<div class="body">
 			<header ref="header"
-				:class="{ withGradient: $store.state.settings.gradientWindowHeader }"
 				@contextmenu.prevent="() => {}" @mousedown.prevent="onHeaderMousedown"
 			>
 				<h1><slot name="header"></slot></h1>
@@ -463,8 +462,6 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
 root(isDark)
 	display block
 
@@ -582,10 +579,6 @@ root(isDark)
 				border-radius 6px 6px 0 0
 				box-shadow 0 1px 0 rgba(#000, 0.1)
 
-				&.withGradient
-					background isDark ? linear-gradient(to bottom, #313543, #1d2027) : linear-gradient(to bottom, #fff, #ececec)
-					box-shadow 0 1px 0 rgba(#000, 0.15)
-
 				&, *
 					user-select none
 
@@ -600,7 +593,7 @@ root(isDark)
 					font-size 1em
 					line-height $header-height
 					font-weight normal
-					color isDark ? #e3e5e8 : #666
+					color var(--desktopWindowTitle)
 
 				> div:last-child
 					position absolute
@@ -615,16 +608,16 @@ root(isDark)
 						padding 0
 						cursor pointer
 						font-size 1em
-						color isDark ? #9baec8 : rgba(#000, 0.4)
+						color var(--faceTextButton)
 						border none
 						outline none
 						background transparent
 
 						&:hover
-							color isDark ? #b2c1d5 : rgba(#000, 0.6)
+							color var(--faceTextButtonHover)
 
 						&:active
-							color isDark ? #b2c1d5 : darken(#000, 30%)
+							color var(--faceTextButtonActive)
 
 						> [data-fa]
 							padding 0
diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue
index fb521db25b..2dba7d2522 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -317,7 +317,7 @@ root(isDark)
 		line-height $header-height
 		padding 0 16px
 		font-size 14px
-		color isDark ? #e3e5e8 : #888
+		color var(--faceHeaderText)
 		background var(--faceHeader)
 		box-shadow 0 1px rgba(#000, 0.15)
 		cursor pointer
diff --git a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
index 212e21a7a9..b90d0a831e 100644
--- a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
+++ b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
@@ -48,7 +48,7 @@ root(isDark)
 		line-height 42px
 		font-size 0.9em
 		font-weight bold
-		color isDark ? #e3e5e8 : #888
+		color var(--faceHeaderText)
 		box-shadow 0 1px rgba(#000, 0.07)
 
 		> i
diff --git a/src/client/app/desktop/views/pages/user/user.friends.vue b/src/client/app/desktop/views/pages/user/user.friends.vue
index 0a329b3d8e..9b466053f7 100644
--- a/src/client/app/desktop/views/pages/user/user.friends.vue
+++ b/src/client/app/desktop/views/pages/user/user.friends.vue
@@ -54,7 +54,7 @@ root(isDark)
 		font-size 0.9em
 		font-weight bold
 		background isDark ? #313543 : inherit
-		color isDark ? #e3e5e8 : #888
+		color var(--faceHeaderText)
 		box-shadow 0 1px rgba(#000, 0.07)
 
 		> i
diff --git a/src/client/app/desktop/views/pages/user/user.photos.vue b/src/client/app/desktop/views/pages/user/user.photos.vue
index 99e064446d..6e9d09e79f 100644
--- a/src/client/app/desktop/views/pages/user/user.photos.vue
+++ b/src/client/app/desktop/views/pages/user/user.photos.vue
@@ -53,7 +53,7 @@ root(isDark)
 		font-size 0.9em
 		font-weight bold
 		background: isDark ? #313543 : inherit
-		color isDark ? #e3e5e8 : #888
+		color var(--faceHeaderText)
 		box-shadow 0 1px rgba(#000, 0.07)
 
 		> i
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 00c08409a6..fbcc53d7be 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -21,7 +21,6 @@ const defaultSettings = {
 	circleIcons: true,
 	contrastedAcct: true,
 	showFullAcct: false,
-	gradientWindowHeader: false,
 	showReplyTarget: true,
 	showMyRenotes: true,
 	showRenotedMyNotes: true,
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 88bde9d684..d563409564 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -12,9 +12,11 @@
 	"scrollbarHandleHover": "#535660",
 	"face": "#282c37",
 	"faceHeader": "#313543",
+	"faceHeaderText": "#e3e5e8",
 	"faceDivider": "rgba(0, 0, 0, 0.3)",
 	"faceTextButton": "#9baec8",
 	"faceTextButtonHover": "#b2c1d5",
+	"faceTextButtonActive": "#b2c1d5",
 	"popupBg": "#2c303c",
 	"popupFg": "#d6dce2",
 	"subNoteBg": "rgba(0, 0, 0, 0.18)",
@@ -53,6 +55,7 @@
 	"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.15)",
 	"desktopTimelineSrc": "@faceTextButton",
 	"desktopTimelineSrcHover": "@faceTextButtonHover",
+	"desktopWindowTitle": "@faceHeaderText",
 	"mobileSignedInAsBg": "#273c34",
 	"mobileSignedInAsFg": "#49ab63",
 	"mobileSignoutBg": "#652222",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 3374a62e36..bdcf282e3d 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -12,9 +12,11 @@
 	"scrollbarHandleHover": "#00000066",
 	"face": "#fff",
 	"faceHeader": "#fff",
+	"faceHeaderText": "#888",
 	"faceDivider": "rgba(0, 0, 0, 0.082)",
 	"faceTextButton": "#ccc",
 	"faceTextButtonHover": "#aaa",
+	"faceTextButtonActive": "#999",
 	"popupBg": "#fff",
 	"popupFg": "#586069",
 	"subNoteBg": "rgba(0, 0, 0, 0.01)",
@@ -53,6 +55,7 @@
 	"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.08)",
 	"desktopTimelineSrc": "#6f7477",
 	"desktopTimelineSrcHover": "#525a5f",
+	"desktopWindowTitle": "#666",
 	"mobileSignedInAsBg": "#fcfff5",
 	"mobileSignedInAsFg": "#2c662d",
 	"mobileSignoutBg": "#fff6f5",

From 9e319006f350e357e75654b2c5e28d803c08a617 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 15:19:11 +0900
Subject: [PATCH 21/72] wip

---
 .../views/components/ui.header.account.vue    |  7 +--
 .../views/components/ui.header.nav.vue        | 14 +----
 .../components/ui.header.notifications.vue    | 18 +-----
 .../views/components/ui.header.search.vue     | 19 ++----
 .../desktop/views/components/ui.header.vue    | 63 +------------------
 src/client/theme/dark.json                    |  6 ++
 src/client/theme/light.json                   |  6 ++
 7 files changed, 27 insertions(+), 106 deletions(-)

diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index c728fa42be..77221f81d2 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -134,7 +134,7 @@ root(isDark)
 		display block
 		margin 0
 		padding 0
-		color #9eaba8
+		color var(--desktopHeaderFg)
 		border none
 		background transparent
 		cursor pointer
@@ -144,14 +144,11 @@ root(isDark)
 
 		&:hover
 		&[data-active='true']
-			color isDark ? #fff : darken(#9eaba8, 20%)
+			color var(--desktopHeaderHoverFg)
 
 			> .avatar
 				filter saturate(150%)
 
-		&:active
-			color isDark ? #fff : darken(#9eaba8, 30%)
-
 		> .username
 			display block
 			float left
diff --git a/src/client/app/desktop/views/components/ui.header.nav.vue b/src/client/app/desktop/views/components/ui.header.nav.vue
index f41d4b8ecf..4f679db938 100644
--- a/src/client/app/desktop/views/components/ui.header.nav.vue
+++ b/src/client/app/desktop/views/components/ui.header.nav.vue
@@ -95,9 +95,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.nav
 	display inline-block
 	margin 0
 	padding 0
@@ -129,7 +127,7 @@ root(isDark)
 				padding 0 24px
 				font-size 13px
 				font-variant small-caps
-				color isDark ? #b8c5ca : #9eaba8
+				color var(--desktopHeaderFg)
 				text-decoration none
 				transition none
 				cursor pointer
@@ -138,7 +136,7 @@ root(isDark)
 					pointer-events none
 
 				&:hover
-					color isDark ? #fff : darken(#9eaba8, 20%)
+					color var(--desktopHeaderHoverFg)
 					text-decoration none
 
 				> [data-fa]:first-child
@@ -162,10 +160,4 @@ root(isDark)
 				@media (max-width 700px)
 					padding 0 12px
 
-.nav[data-darkmode]
-	root(true)
-
-.nav:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/ui.header.notifications.vue b/src/client/app/desktop/views/components/ui.header.notifications.vue
index 2a38655f3a..c59a49556d 100644
--- a/src/client/app/desktop/views/components/ui.header.notifications.vue
+++ b/src/client/app/desktop/views/components/ui.header.notifications.vue
@@ -61,16 +61,13 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
-
+.notifications
 	> button
 		display block
 		margin 0
 		padding 0
 		width 32px
-		color #9eaba8
+		color var(--desktopHeaderFg)
 		border none
 		background transparent
 		cursor pointer
@@ -80,10 +77,7 @@ root(isDark)
 
 		&:hover
 		&[data-active='true']
-			color isDark ? #fff : darken(#9eaba8, 20%)
-
-		&:active
-			color isDark ? #fff : darken(#9eaba8, 30%)
+			color var(--desktopHeaderHoverFg)
 
 		> [data-fa].bell
 			font-size 1.2em
@@ -135,10 +129,4 @@ root(isDark)
 			font-size 1rem
 			overflow auto
 
-.notifications[data-darkmode]
-	root(true)
-
-.notifications:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/ui.header.search.vue b/src/client/app/desktop/views/components/ui.header.search.vue
index d5794dc882..d22efbf84f 100644
--- a/src/client/app/desktop/views/components/ui.header.search.vue
+++ b/src/client/app/desktop/views/components/ui.header.search.vue
@@ -28,8 +28,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-root(isDark)
+.search
 	> [data-fa]
 		display block
 		position absolute
@@ -38,7 +37,7 @@ root(isDark)
 		width 48px
 		text-align center
 		line-height 48px
-		color #9eaba8
+		color var(--desktopHeaderFg)
 		pointer-events none
 
 		> *
@@ -52,26 +51,20 @@ root(isDark)
 		width 14em
 		height 32px
 		font-size 1em
-		background rgba(#000, 0.05)
+		background var(--desktopHeaderSearchBg)
 		outline none
-		//border solid 1px #ddd
 		border none
 		border-radius 16px
 		transition color 0.5s ease, border 0.5s ease
-		color isDark ? #fff : #000
+		color var(--desktopHeaderSearchFg)
 
 		&::placeholder
-			color #9eaba8
+			color var(--desktopHeaderFg)
 
 		&:hover
-			background isDark ? rgba(#fff, 0.04) : rgba(#000, 0.08)
+			background var(--desktopHeaderSearchHoverBg)
 
 		&:focus
 			box-shadow 0 0 0 2px var(--primaryAlpha05) !important
 
-.search[data-darkmode]
-	root(true)
-
-.search:not([data-darkmode])
-	root(false)
 </style>
diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
index 264da8bef8..5089232b06 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -5,7 +5,6 @@
 	<div class="main" ref="main">
 		<div class="backdrop"></div>
 		<div class="main">
-			<p ref="welcomeback" v-if="$store.getters.isSignedIn">%i18n:@welcome-back%<b>{{ $store.state.i | userName }}</b>%i18n:@adjective%</p>
 			<div class="container" ref="mainContainer">
 				<div class="left">
 					<x-nav/>
@@ -64,55 +63,6 @@ export default Vue.extend({
 
 	mounted() {
 		this.$store.commit('setUiHeaderHeight', this.$el.offsetHeight);
-
-		if (this.$store.getters.isSignedIn) {
-			const ago = (new Date().getTime() - new Date(this.$store.state.i.lastUsedAt).getTime()) / 1000;
-			const isHisasiburi = ago >= 3600;
-			this.$store.state.i.lastUsedAt = new Date();
-
-			if (isHisasiburi) {
-				(this.$refs.welcomeback as any).style.display = 'block';
-				(this.$refs.main as any).style.overflow = 'hidden';
-
-				anime({
-					targets: this.$refs.welcomeback,
-					top: '0',
-					opacity: 1,
-					delay: 1000,
-					duration: 500,
-					easing: 'easeOutQuad'
-				});
-
-				anime({
-					targets: this.$refs.mainContainer,
-					opacity: 0,
-					delay: 1000,
-					duration: 500,
-					easing: 'easeOutQuad'
-				});
-
-				setTimeout(() => {
-					anime({
-						targets: this.$refs.welcomeback,
-						top: '-48px',
-						opacity: 0,
-						duration: 500,
-						complete: () => {
-							(this.$refs.welcomeback as any).style.display = 'none';
-							(this.$refs.main as any).style.overflow = 'initial';
-						},
-						easing: 'easeInQuad'
-					});
-
-					anime({
-						targets: this.$refs.mainContainer,
-						opacity: 1,
-						duration: 500,
-						easing: 'easeInQuad'
-					});
-				}, 2500);
-			}
-		}
 	},
 
 	methods: {
@@ -161,17 +111,6 @@ root(isDark)
 			font-size 0.9rem
 			user-select none
 
-			> p
-				display none
-				position absolute
-				top 48px
-				width 100%
-				line-height 48px
-				margin 0
-				text-align center
-				color isDark ? #fff : #888
-				opacity 0
-
 			> .container
 				display flex
 				width 100%
@@ -190,7 +129,7 @@ root(isDark)
 						display block
 						width 48px
 						height 48px
-						background-image isDark ? url('/assets/desktop/header-icon.dark.svg') : url('/assets/desktop/header-icon.light.svg')
+						background-image var(--desktopHeaderIcon)
 						background-size 24px
 						background-position center
 						background-repeat no-repeat
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index d563409564..403a5ded1d 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -49,6 +49,12 @@
 	"cwButtonHoverBg": "#707b97",
 	"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
 	"desktopHeaderBg": "#313543",
+	"desktopHeaderFg": "#b8c5ca",
+	"desktopHeaderHoverFg": "#fff",
+	"desktopHeaderIcon": "url('/assets/desktop/header-icon.dark.svg')",
+	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)",
+	"desktopHeaderSearchHoverBg": "rgba(255, 255, 255, 0.04)",
+	"desktopHeaderSearchFg": "#fff",
 	"desktopPostFormBg": "@face",
 	"desktopPostFormTextareaBg": "rgba(0, 0, 0, 0.25)",
 	"desktopPostFormTextareaFg": "#fff",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index bdcf282e3d..f9f9a9a52d 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -49,6 +49,12 @@
 	"cwButtonHoverBg": "#bbc4ce",
 	"reactionPickerButtonHoverBg": "#eee",
 	"desktopHeaderBg": "#f7f7f7",
+	"desktopHeaderFg": "#9eaba8",
+	"desktopHeaderHoverFg": "#7b8c88",
+	"desktopHeaderIcon": "url('/assets/desktop/header-icon.light.svg')",
+	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)",
+	"desktopHeaderSearchHoverBg": "rgba(0, 0, 0, 0.08)",
+	"desktopHeaderSearchFg": "#000",
 	"desktopPostFormBg": "#fff6f6",
 	"desktopPostFormTextareaBg": "#fff",
 	"desktopPostFormTextareaFg": "#333",

From a36d73cb5271b09a75d656043d8e928f9f821c66 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 16:49:18 +0900
Subject: [PATCH 22/72] wip

---
 .../app/common/views/widgets/calendar.vue     |  2 +-
 .../app/desktop/views/components/calendar.vue | 45 +++++++------------
 .../views/components/notifications.vue        | 22 ++++-----
 .../desktop/views/pages/deck/deck.notes.vue   |  4 +-
 .../views/pages/deck/deck.notifications.vue   |  4 +-
 .../app/mobile/views/components/notes.vue     |  4 +-
 .../mobile/views/components/notifications.vue | 14 ++----
 src/client/theme/dark.json                    |  7 ++-
 src/client/theme/halloween.json               |  2 +-
 src/client/theme/light.json                   |  5 +++
 10 files changed, 47 insertions(+), 62 deletions(-)

diff --git a/src/client/app/common/views/widgets/calendar.vue b/src/client/app/common/views/widgets/calendar.vue
index a24524d1c5..238b493a61 100644
--- a/src/client/app/common/views/widgets/calendar.vue
+++ b/src/client/app/common/views/widgets/calendar.vue
@@ -124,7 +124,7 @@ root(isDark)
 
 	.mkw-calendar--body
 		padding 16px 0
-		color isDark ? #c5ced6 : #777
+		color var(--calendarDay)
 
 		&:after
 			content ""
diff --git a/src/client/app/desktop/views/components/calendar.vue b/src/client/app/desktop/views/components/calendar.vue
index 6b753068fa..e2f1329b3b 100644
--- a/src/client/app/desktop/views/components/calendar.vue
+++ b/src/client/app/desktop/views/components/calendar.vue
@@ -128,10 +128,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
-	color isDark ? #c5ced6 : #777
+.mk-calendar
+	color var(--calendarDay)
 	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
@@ -149,12 +147,10 @@ root(isDark)
 		line-height 42px
 		font-size 0.9em
 		font-weight bold
-		color isDark ? #c5ced6 : #888
+		color var(--faceHeaderText)
+		background var(--faceHeader)
 		box-shadow 0 1px rgba(#000, 0.07)
 
-		if isDark
-			background #313543
-
 		> [data-fa]
 			margin-right 4px
 
@@ -172,7 +168,7 @@ root(isDark)
 			color var(--faceTextButtonHover)
 
 		&:active
-			color isDark ? #b2c1d5 : #999
+			color var(--faceTextButtonActive)
 
 		&:first-of-type
 			left 0
@@ -195,49 +191,46 @@ root(isDark)
 			font-size 14px
 
 			&.weekday
-				color isDark ? #43d5dc : #19a2a9
+				color var(--calendarWeek)
 
 				&[data-is-donichi]
-					color isDark ? #ff6679 : #ef95a0
+					color var(--calendarSaturdayOrSunday)
 
 				&[data-today]
-					box-shadow 0 0 0 1px isDark ? #43d5dc : #19a2a9 inset
+					box-shadow 0 0 0 1px var(--calendarWeek) inset
 					border-radius 6px
 
 					&[data-is-donichi]
-						box-shadow 0 0 0 1px isDark ? #ff6679 : #ef95a0 inset
+						box-shadow 0 0 0 1px var(--calendarSaturdayOrSunday) inset
 
 			&.day
 				cursor pointer
-				color isDark ? #c5ced6 : #777
+				color var(--calendarDay)
 
 				> div
 					border-radius 6px
 
 				&:hover > div
-					background rgba(#000, isDark ? 0.1 : 0.025)
+					background var(--faceClearButtonHover)
 
 				&:active > div
-					background rgba(#000, isDark ? 0.2 : 0.05)
+					background var(--faceClearButtonActive)
 
 				&[data-is-donichi]
-					color isDark ? #ff6679 : #ef95a0
+					color var(--calendarSaturdayOrSunday)
 
 				&[data-is-out-of-range]
 					cursor default
-					color rgba(isDark ? #c5ced6 : #777, 0.5)
-
-					&[data-is-donichi]
-						color rgba(isDark ? #ff6679 : #ef95a0, 0.5)
+					opacity 0.5
 
 				&[data-selected]
 					font-weight bold
 
 					> div
-						background rgba(#000, isDark ? 0.1 : 0.025)
+						background var(--faceClearButtonHover)
 
 					&:active > div
-						background rgba(#000, isDark ? 0.2 : 0.05)
+						background var(--faceClearButtonActive)
 
 				&[data-today]
 					> div
@@ -250,10 +243,4 @@ root(isDark)
 					&:active > div
 						background var(--primaryDarken10)
 
-.mk-calendar[data-darkmode]
-	root(true)
-
-.mk-calendar:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
index 2eb80dcd01..1f3f62395a 100644
--- a/src/client/app/desktop/views/components/notifications.vue
+++ b/src/client/app/desktop/views/components/notifications.vue
@@ -191,7 +191,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-notifications
 	.transition
 		.mk-notifications-enter
 		.mk-notifications-leave-to
@@ -208,7 +208,7 @@ root(isDark)
 				padding 16px
 				overflow-wrap break-word
 				font-size 13px
-				border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05)
+				border-bottom solid 1px var(--faceDivider)
 
 				&:last-child
 					border-bottom none
@@ -219,7 +219,7 @@ root(isDark)
 					top 16px
 					right 12px
 					vertical-align top
-					color isDark ? #606984 : rgba(#000, 0.6)
+					color var(--noteHeaderInfo)
 					font-size small
 
 				&:after
@@ -249,10 +249,10 @@ root(isDark)
 							margin-right 4px
 
 				.note-preview
-					color isDark ? #c2cad4 : rgba(#000, 0.7)
+					color var(--noteText)
 
 				.note-ref
-					color isDark ? #c2cad4 : rgba(#000, 0.7)
+					color var(--noteText)
 
 					[data-fa]
 						font-size 1em
@@ -283,9 +283,9 @@ root(isDark)
 				line-height 32px
 				text-align center
 				font-size 0.8em
-				color isDark ? #666b79 : #aaa
-				background isDark ? #242731 : #fdfdfd
-				border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05)
+				color var(--dateDividerFg)
+				background var(--dateDividerBg)
+				border-bottom solid 1px var(--faceDivider)
 
 				span
 					margin 0 16px
@@ -327,10 +327,4 @@ root(isDark)
 		> [data-fa]
 			margin-right 4px
 
-.mk-notifications[data-darkmode]
-	root(true)
-
-.mk-notifications:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.notes.vue b/src/client/app/desktop/views/pages/deck/deck.notes.vue
index 214ec3cdf7..7e171a2397 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notes.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notes.vue
@@ -214,8 +214,8 @@ root(isDark)
 			line-height 32px
 			font-size 14px
 			text-align center
-			color isDark ? #666b79 : #aaa
-			background isDark ? #242731 : #fdfdfd
+			color var(--dateDividerFg)
+			background var(--dateDividerBg)
 			border-bottom solid 1px var(--faceDivider)
 
 			span
diff --git a/src/client/app/desktop/views/pages/deck/deck.notifications.vue b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
index 8a28061260..aa48571a5b 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notifications.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
@@ -177,8 +177,8 @@ root(isDark)
 			line-height 32px
 			text-align center
 			font-size 0.8em
-			color isDark ? #666b79 : #aaa
-			background isDark ? #242731 : #fdfdfd
+			color var(--dateDividerFg)
+			background var(--dateDividerBg)
 			border-bottom solid 1px var(--faceDivider)
 
 			span
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index 8841b0e6bf..9153b1d551 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -243,8 +243,8 @@ root(isDark)
 			line-height 32px
 			text-align center
 			font-size 0.9em
-			color isDark ? #666b79 : #aaa
-			background isDark ? #242731 : #fdfdfd
+			color var(--dateDividerFg)
+			background var(--dateDividerBg)
 			border-bottom solid 1px var(--faceDivider)
 
 			span
diff --git a/src/client/app/mobile/views/components/notifications.vue b/src/client/app/mobile/views/components/notifications.vue
index 8243a9bfb3..bfb6c1e62a 100644
--- a/src/client/app/mobile/views/components/notifications.vue
+++ b/src/client/app/mobile/views/components/notifications.vue
@@ -104,9 +104,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-notifications
 	margin 0 auto
-	background isDark ? #282C37 :#fff
+	background var(--face)
 	border-radius 8px
 	box-shadow 0 0 2px rgba(#000, 0.1)
 	overflow hidden
@@ -134,8 +134,8 @@ root(isDark)
 			line-height 32px
 			text-align center
 			font-size 0.8em
-			color isDark ? #666b79 : #aaa
-			background isDark ? #242731 : #fdfdfd
+			color var(--dateDividerFg)
+			background var(--dateDividerBg)
 			border-bottom solid 1px var(--faceDivider)
 
 			span
@@ -169,10 +169,4 @@ root(isDark)
 		> [data-fa]
 			margin-right 4px
 
-.mk-notifications[data-darkmode]
-	root(true)
-
-.mk-notifications:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 403a5ded1d..ef5170e71e 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -17,6 +17,8 @@
 	"faceTextButton": "#9baec8",
 	"faceTextButtonHover": "#b2c1d5",
 	"faceTextButtonActive": "#b2c1d5",
+	"faceClearButtonHover": "rgba(0, 0, 0, 0.1)",
+	"faceClearButtonActive": "rgba(0, 0, 0, 0.2)",
 	"popupBg": "#2c303c",
 	"popupFg": "#d6dce2",
 	"subNoteBg": "rgba(0, 0, 0, 0.18)",
@@ -48,11 +50,14 @@
 	"cwButtonFg": "#393f4f",
 	"cwButtonHoverBg": "#707b97",
 	"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
+	"calendarWeek": "#43d5dc",
+	"calendarSaturdayOrSunday": "#ff6679",
+	"calendarDay": "#c5ced6",
 	"desktopHeaderBg": "#313543",
 	"desktopHeaderFg": "#b8c5ca",
 	"desktopHeaderHoverFg": "#fff",
 	"desktopHeaderIcon": "url('/assets/desktop/header-icon.dark.svg')",
-	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)",
+	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.1)",
 	"desktopHeaderSearchHoverBg": "rgba(255, 255, 255, 0.04)",
 	"desktopHeaderSearchFg": "#fff",
 	"desktopPostFormBg": "@face",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index 474fc7ea8f..420a03d2cd 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -16,5 +16,5 @@
 	"renoteGradient": "#5d2d1a",
 	"renoteText": "#ff6c00",
 	"reactionPickerButtonHoverBg": "rgba(0, 0, 0, 0.18)",
-	"desktopHeaderBg": "#0c0b19"
+	"desktopHeaderBg": "#36314e"
 }
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index f9f9a9a52d..bbffc8e143 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -17,6 +17,8 @@
 	"faceTextButton": "#ccc",
 	"faceTextButtonHover": "#aaa",
 	"faceTextButtonActive": "#999",
+	"faceClearButtonHover": "rgba(0, 0, 0, 0.025)",
+	"faceClearButtonActive": "rgba(0, 0, 0, 0.05)",
 	"popupBg": "#fff",
 	"popupFg": "#586069",
 	"subNoteBg": "rgba(0, 0, 0, 0.01)",
@@ -48,6 +50,9 @@
 	"cwButtonFg": "#fff",
 	"cwButtonHoverBg": "#bbc4ce",
 	"reactionPickerButtonHoverBg": "#eee",
+	"calendarWeek": "#19a2a9",
+	"calendarSaturdayOrSunday": "#ef95a0",
+	"calendarDay": "#777",
 	"desktopHeaderBg": "#f7f7f7",
 	"desktopHeaderFg": "#9eaba8",
 	"desktopHeaderHoverFg": "#7b8c88",

From 5f289e47676b790b6ac2d6c8cb887300e190fd73 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 16:58:00 +0900
Subject: [PATCH 23/72] wip

---
 .../views/components/visibility-chooser.vue   | 19 +++++--------------
 src/client/theme/halloween.json               |  4 ++--
 2 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/src/client/app/common/views/components/visibility-chooser.vue b/src/client/app/common/views/components/visibility-chooser.vue
index 5faf09fa11..02f33bfbc0 100644
--- a/src/client/app/common/views/components/visibility-chooser.vue
+++ b/src/client/app/common/views/components/visibility-chooser.vue
@@ -127,11 +127,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
 $border-color = rgba(27, 31, 35, 0.15)
 
-root(isDark)
+.mk-visibility-chooser
 	position initial
 
 	> .backdrop
@@ -141,7 +139,7 @@ root(isDark)
 		z-index 10000
 		width 100%
 		height 100%
-		background isDark ? rgba(#000, 0.4) : rgba(#000, 0.1)
+		background var(--modalBackdrop)
 		opacity 0
 
 	> .popover
@@ -189,14 +187,14 @@ root(isDark)
 			display flex
 			padding 8px 14px
 			font-size 12px
-			color isDark ? #fff : #666
+			color var(--popupFg)
 			cursor pointer
 
 			&:hover
-				background isDark ? #252731 : #eee
+				background var(--faceClearButtonHover)
 
 			&:active
-				background isDark ? #21242b : #ddd
+				background var(--faceClearButtonActive)
 
 			&.active
 				color var(--primaryForeground)
@@ -222,11 +220,4 @@ root(isDark)
 
 				> span:last-child:not(:first-child)
 					opacity 0.6
-
-.mk-visibility-chooser[data-darkmode]
-	root(true)
-
-.mk-visibility-chooser:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index 420a03d2cd..154755fe90 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -5,13 +5,13 @@
 		"author": "syuilo",
 		"inherit": "9978f7f9-5616-44fd-a704-cc5985efdd63"
 	},
-	"primary": "#fb8d4e",
+	"primary": "#d67036",
 	"primaryForeground": "#fff",
 	"bg": "#1b1a35",
 	"face": "#322e44",
 	"faceHeader": "#36314e",
 	"dateDividerBg": "#26253c",
-	"popupBg": "#2c303c",
+	"popupBg": "@face",
 	"popupFg": "#d6dce2",
 	"renoteGradient": "#5d2d1a",
 	"renoteText": "#ff6c00",

From 5b0b83faa7af45ddae740a203651eedff9863b41 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 17:29:57 +0900
Subject: [PATCH 24/72] wip

---
 .../app/common/views/components/messaging.vue | 26 +++++--------------
 .../app/common/views/components/ui/card.vue   | 19 ++++----------
 src/client/theme/dark.json                    |  1 +
 src/client/theme/light.json                   |  1 +
 4 files changed, 14 insertions(+), 33 deletions(-)

diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue
index a984c980b1..8e5393e6e5 100644
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@@ -204,12 +204,10 @@ root(isDark)
 		left 0
 		z-index 1
 		width 100%
-		background #fff
 		box-shadow 0 0px 2px rgba(#000, 0.2)
 
 		> .form
-			padding 8px
-			background isDark ? #282c37 : #f7f7f7
+			background rgba(0, 0, 0, 0.02)
 
 			> label
 				display block
@@ -229,32 +227,22 @@ root(isDark)
 					bottom 0
 					left 0
 					width 1em
-					line-height 56px
+					line-height 48px
 					margin auto
 					color #555
 
 			> input
 				margin 0
-				padding 0 0 0 32px
+				padding 0 0 0 42px
 				width 100%
 				font-size 1em
-				line-height 38px
-				color #000
+				line-height 48px
+				color var(--faceText)
 				outline none
-				background isDark ? #191b22 : #fff
-				border solid 1px isDark ? #495156 : #eee
+				background transparent
+				border none
 				border-radius 5px
 				box-shadow none
-				transition color 0.5s ease, border 0.5s ease
-
-				&:hover
-					border solid 1px isDark ? #b0b0b0 : #ddd
-					transition border 0.2s ease
-
-				&:focus
-					color var(--primaryDarken20)
-					border solid 1px var(--primary)
-					transition color 0, border 0
 
 		> .result
 			display block
diff --git a/src/client/app/common/views/components/ui/card.vue b/src/client/app/common/views/components/ui/card.vue
index be24027f6c..a37a38d340 100644
--- a/src/client/app/common/views/components/ui/card.vue
+++ b/src/client/app/common/views/components/ui/card.vue
@@ -20,11 +20,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.ui-card
 	margin 16px
-	color isDark ? #fff : #000
+	color var(--faceText)
 	background var(--face)
 	box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
 
@@ -32,14 +30,14 @@ root(isDark)
 		padding 16px
 		font-weight bold
 		font-size 20px
-		color isDark ? #fff : #444
+		color var(--faceText)
 
 		@media (min-width 500px)
 			padding 24px 32px
 
 	> section
 		padding 20px 16px
-		border-top solid 1px isDark ? rgba(#000, 0.3) : rgba(#000, 0.1)
+		border-top solid 1px var(--faceDivider)
 
 		@media (min-width 500px)
 			padding 32px
@@ -50,12 +48,5 @@ root(isDark)
 		> header
 			margin-bottom 16px
 			font-weight bold
-			color isDark ? #fff : #444
-
-.ui-card[data-darkmode]
-	root(true)
-
-.ui-card:not([data-darkmode])
-	root(false)
-
+			color var(--faceText)
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index ef5170e71e..7e0df42365 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -11,6 +11,7 @@
 	"scrollbarHandle": "#454954",
 	"scrollbarHandleHover": "#535660",
 	"face": "#282c37",
+	"faceText": "#fff",
 	"faceHeader": "#313543",
 	"faceHeaderText": "#e3e5e8",
 	"faceDivider": "rgba(0, 0, 0, 0.3)",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index bbffc8e143..482276f638 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -11,6 +11,7 @@
 	"scrollbarHandle": "#00000033",
 	"scrollbarHandleHover": "#00000066",
 	"face": "#fff",
+	"faceText": "#444",
 	"faceHeader": "#fff",
 	"faceHeaderText": "#888",
 	"faceDivider": "rgba(0, 0, 0, 0.082)",

From f3eeadcd8f3f0513250dc6ed13cabd6636da3a89 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 17:42:51 +0900
Subject: [PATCH 25/72] wip

---
 .../app/common/views/components/messaging.vue | 28 +++++++------------
 .../desktop/views/components/post-form.vue    |  4 +--
 2 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue
index 8e5393e6e5..91453e16ec 100644
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@@ -167,9 +167,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-messaging
 
 	&[data-compact]
 		font-size 0.8em
@@ -318,20 +316,20 @@ root(isDark)
 			display block
 			text-decoration none
 			background var(--face)
-			border-bottom solid 1px isDark ? #1c2023 : #eee
+			border-bottom solid 1px var(--faceDivider)
 
 			*
 				pointer-events none
 				user-select none
 
 			&:hover
-				background isDark ? #1e2129 : #fafafa
+				box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
 
-				> .avatar
+				.avatar
 					filter saturate(200%)
 
 			&:active
-				background isDark ? #14161b : #eee
+				box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
 
 			&[data-is-read]
 			&[data-is-me]
@@ -371,17 +369,17 @@ root(isDark)
 						overflow hidden
 						text-overflow ellipsis
 						font-size 1em
-						color isDark ? #fff : rgba(#000, 0.9)
+						color var(--noteHeaderName)
 						font-weight bold
 						transition all 0.1s ease
 
 					> .username
 						margin 0 8px
-						color isDark ? #606984 : rgba(#000, 0.5)
+						color var(--noteHeaderAcct)
 
 					> .mk-time
 						margin 0 0 0 auto
-						color isDark ? #606984 : rgba(#000, 0.5)
+						color var(--noteHeaderInfo)
 						font-size 80%
 
 				> .avatar
@@ -401,10 +399,10 @@ root(isDark)
 						overflow hidden
 						overflow-wrap break-word
 						font-size 1.1em
-						color isDark ? #fff : rgba(#000, 0.8)
+						color var(--faceText)
 
 						.me
-							color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.4)
+							opacity 0.7
 
 					> .image
 						display block
@@ -449,10 +447,4 @@ root(isDark)
 					> .avatar
 						margin 0 12px 0 0
 
-.mk-messaging[data-darkmode]
-	root(true)
-
-.mk-messaging:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index 5a5f9d63db..0d600dd08e 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -503,7 +503,7 @@ root(isDark)
 
 			> span
 				margin-right 16px
-				color isDark ? #fff : #666
+				color var(--primary)
 
 		> .hashtags
 			margin 0 0 8px 0
@@ -512,7 +512,7 @@ root(isDark)
 			font-size 14px
 
 			> b
-				color isDark ? #9baec8 : var(--primaryDarken20)
+				color var(--primary)
 
 			> *
 				margin-right 8px

From cc6af402be152702488645f87fa9464e52caf36e Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 18:01:23 +0900
Subject: [PATCH 26/72] wip

---
 src/client/app/desktop/views/components/post-form.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index 0d600dd08e..5dd40c9ba5 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -521,7 +521,7 @@ root(isDark)
 		> .files
 			margin 0
 			padding 0
-			background isDark ? #181b23 : var(--primaryLighten98)
+			background var(--desktopPostFormTextareaBg)
 			border solid 1px var(--primaryAlpha01)
 			border-top none
 			border-radius 0 0 4px 4px
@@ -572,7 +572,7 @@ root(isDark)
 						cursor pointer
 
 		> .mk-poll-editor
-			background isDark ? #181b23 : var(--primaryLighten98)
+			background var(--desktopPostFormTextareaBg)
 			border solid 1px var(--primaryAlpha01)
 			border-top none
 			border-radius 0 0 4px 4px

From 459b374d612e53cfd4244649ac2c812618f827f5 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 19:14:35 +0900
Subject: [PATCH 27/72] wip

---
 src/client/app/common/scripts/theme.ts        | 17 +++++++++++++++++
 .../app/common/views/widgets/broadcast.vue    | 14 ++++----------
 src/client/theme/dark.json                    | 19 +++++++++++++------
 src/client/theme/halloween.json               | 16 +++++++---------
 src/client/theme/light.json                   | 19 +++++++++++++------
 5 files changed, 54 insertions(+), 31 deletions(-)

diff --git a/src/client/app/common/scripts/theme.ts b/src/client/app/common/scripts/theme.ts
index a08028ff9a..db1cd7c394 100644
--- a/src/client/app/common/scripts/theme.ts
+++ b/src/client/app/common/scripts/theme.ts
@@ -7,6 +7,7 @@ type Theme = {
 		id: string;
 		name: string;
 		inherit: string;
+		vars: any;
 	};
 } & {
 	[key: string]: string;
@@ -34,6 +35,22 @@ function compile(theme: Theme): { [key: string]: string } {
 		if (code[0] == '@') {
 			return getColor(theme[code.substr(1)]);
 		}
+		if (code[0] == '$') {
+			return getColor(theme.meta.vars[code.substr(1)]);
+		}
+
+		// func
+		if (code[0] == ':') {
+			const parts = code.split('<');
+			const func = parts.shift().substr(1);
+			const arg = parseInt(parts.shift(), 10);
+			const color = getColor(parts.join('<'));
+
+			switch (func) {
+				case 'darken': return color.darken(arg);
+				case 'lighten': return color.lighten(arg);
+			}
+		}
 
 		return tinycolor(code);
 	}
diff --git a/src/client/app/common/views/widgets/broadcast.vue b/src/client/app/common/views/widgets/broadcast.vue
index c471229f15..65e37bfc69 100644
--- a/src/client/app/common/views/widgets/broadcast.vue
+++ b/src/client/app/common/views/widgets/broadcast.vue
@@ -71,9 +71,9 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.anltbovirfeutcigvwgmgxipejaeozxi-body
 	padding 10px
-	background isDark ? #253a50 : #f3f9ff
+	background var(--announcementsBg)
 
 	&[data-melt]
 		background transparent
@@ -130,14 +130,14 @@ root(isDark)
 		margin 0
 		font-size 0.95em
 		font-weight normal
-		color isDark ? #539eff : #4078c0
+		color var(--announcementsTitle)
 
 	> p
 		display block
 		z-index 1
 		margin 0
 		font-size 0.7em
-		color isDark ? #fff : #57616f
+		color var(--announcementsText)
 
 		&.fetching
 			text-align center
@@ -150,10 +150,4 @@ root(isDark)
 		> p
 			color #fff
 
-.anltbovirfeutcigvwgmgxipejaeozxi-body[data-darkmode]
-	root(true)
-
-.anltbovirfeutcigvwgmgxipejaeozxi-body:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 7e0df42365..c4d1fa9d62 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -2,17 +2,21 @@
 	"meta": {
 		"id": "9978f7f9-5616-44fd-a704-cc5985efdd63",
 		"name": "Dark",
-		"author": "syuilo"
+		"author": "syuilo",
+		"vars": {
+			"primary": "#fb4e4e",
+			"secondary": "#282C37"
+		}
 	},
-	"primary": "#fb4e4e",
+	"primary": "$primary",
 	"primaryForeground": "#fff",
-	"bg": "#191b22",
+	"bg": ":darken<8<$secondary",
 	"scrollbarTrack": "#282c37",
 	"scrollbarHandle": "#454954",
 	"scrollbarHandleHover": "#535660",
-	"face": "#282c37",
+	"face": "$secondary",
 	"faceText": "#fff",
-	"faceHeader": "#313543",
+	"faceHeader": ":lighten<5<$secondary",
 	"faceHeaderText": "#e3e5e8",
 	"faceDivider": "rgba(0, 0, 0, 0.3)",
 	"faceTextButton": "#9baec8",
@@ -20,7 +24,7 @@
 	"faceTextButtonActive": "#b2c1d5",
 	"faceClearButtonHover": "rgba(0, 0, 0, 0.1)",
 	"faceClearButtonActive": "rgba(0, 0, 0, 0.2)",
-	"popupBg": "#2c303c",
+	"popupBg": ":lighten<5<$secondary",
 	"popupFg": "#d6dce2",
 	"subNoteBg": "rgba(0, 0, 0, 0.18)",
 	"renoteGradient": "#314027",
@@ -54,6 +58,9 @@
 	"calendarWeek": "#43d5dc",
 	"calendarSaturdayOrSunday": "#ff6679",
 	"calendarDay": "#c5ced6",
+	"announcementsBg": "#253a50",
+	"announcementsTitle": "#539eff",
+	"announcementsText": "#fff",
 	"desktopHeaderBg": "#313543",
 	"desktopHeaderFg": "#b8c5ca",
 	"desktopHeaderHoverFg": "#fff",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index 154755fe90..81c773f574 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -3,18 +3,16 @@
 		"id": "42e4f09b-67d5-498c-af7d-29faa54745b0",
 		"name": "Halloween",
 		"author": "syuilo",
-		"inherit": "9978f7f9-5616-44fd-a704-cc5985efdd63"
+		"inherit": "9978f7f9-5616-44fd-a704-cc5985efdd63",
+		"vars": {
+			"primary": "#d67036",
+			"primaryForeground": "#fff",
+			"secondary": "#1f1d30",
+			"text": "#b1bee3"
+		}
 	},
-	"primary": "#d67036",
-	"primaryForeground": "#fff",
 	"bg": "#1b1a35",
-	"face": "#322e44",
-	"faceHeader": "#36314e",
-	"dateDividerBg": "#26253c",
-	"popupBg": "@face",
-	"popupFg": "#d6dce2",
 	"renoteGradient": "#5d2d1a",
 	"renoteText": "#ff6c00",
-	"reactionPickerButtonHoverBg": "rgba(0, 0, 0, 0.18)",
 	"desktopHeaderBg": "#36314e"
 }
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 482276f638..a7037b8e54 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -2,17 +2,21 @@
 	"meta": {
 		"id": "406cfea3-a4e7-486c-9057-30ede1353c3f",
 		"name": "Light",
-		"author": "syuilo"
+		"author": "syuilo",
+		"vars": {
+			"primary": "#fb4e4e",
+			"secondary": "#fff"
+		}
 	},
-	"primary": "#fb4e4e",
+	"primary": "$primary",
 	"primaryForeground": "#fff",
-	"bg": "#f7f7f7",
+	"bg": ":darken<8<$secondary",
 	"scrollbarTrack": "#fff",
 	"scrollbarHandle": "#00000033",
 	"scrollbarHandleHover": "#00000066",
-	"face": "#fff",
+	"face": "$secondary",
 	"faceText": "#444",
-	"faceHeader": "#fff",
+	"faceHeader": ":lighten<5<$secondary",
 	"faceHeaderText": "#888",
 	"faceDivider": "rgba(0, 0, 0, 0.082)",
 	"faceTextButton": "#ccc",
@@ -20,7 +24,7 @@
 	"faceTextButtonActive": "#999",
 	"faceClearButtonHover": "rgba(0, 0, 0, 0.025)",
 	"faceClearButtonActive": "rgba(0, 0, 0, 0.05)",
-	"popupBg": "#fff",
+	"popupBg": ":lighten<5<$secondary",
 	"popupFg": "#586069",
 	"subNoteBg": "rgba(0, 0, 0, 0.01)",
 	"renoteGradient": "#edfde2",
@@ -54,6 +58,9 @@
 	"calendarWeek": "#19a2a9",
 	"calendarSaturdayOrSunday": "#ef95a0",
 	"calendarDay": "#777",
+	"announcementsBg": "#f3f9ff",
+	"announcementsTitle": "#4078c0",
+	"announcementsText": "#57616f",
 	"desktopHeaderBg": "#f7f7f7",
 	"desktopHeaderFg": "#9eaba8",
 	"desktopHeaderHoverFg": "#7b8c88",

From 7a0a8b5d2b1d9f4f0bbacdb6b30cfbedab75f59d Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 19:32:06 +0900
Subject: [PATCH 28/72] wip

---
 .../app/common/views/components/google.vue    | 20 +++++++------------
 src/client/theme/dark.json                    | 16 +++++++++++++++
 src/client/theme/light.json                   | 16 +++++++++++++++
 3 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/src/client/app/common/views/components/google.vue b/src/client/app/common/views/components/google.vue
index 8272961ef2..ac71a5e56d 100644
--- a/src/client/app/common/views/components/google.vue
+++ b/src/client/app/common/views/components/google.vue
@@ -26,7 +26,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-google
 	display flex
 	margin 8px 0
 
@@ -37,31 +37,25 @@ root(isDark)
 		height 40px
 		font-family sans-serif
 		font-size 16px
-		color isDark ? #dee4e8 : #55595c
-		background isDark ? #191b22 : #fff
-		border solid 1px isDark ? #495156 : #dadada
+		color var(--googleSearchFg)
+		background var(--googleSearchBg)
+		border solid 1px var(--googleSearchBorder)
 		border-radius 4px 0 0 4px
 
 		&:hover
-			border-color isDark ? #777c86 : #b0b0b0
+			border-color var(--googleSearchHoverBorder)
 
 	> button
 		flex-shrink 0
 		padding 0 16px
-		border solid 1px isDark ? #495156 : #dadada
+		border solid 1px var(--googleSearchBorder)
 		border-left none
 		border-radius 0 4px 4px 0
 
 		&:hover
-			background-color isDark ? #2e3440 : #eee
+			background-color var(--googleSearchHoverButton)
 
 		&:active
 			box-shadow 0 2px 4px rgba(#000, 0.15) inset
 
-.mk-google[data-darkmode]
-	root(true)
-
-.mk-google:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index c4d1fa9d62..0422eb021b 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -38,29 +38,45 @@
 	"noteHeaderAdminBg": "#5d282e",
 	"noteHeaderAcct": "#606984",
 	"noteHeaderInfo": "#606984",
+
 	"noteActions": "#606984",
 	"noteActionsHover": "#a1a8bf",
 	"noteActionsReplyHover": "#0af",
 	"noteActionsRenoteHover": "#8d0",
 	"noteActionsReactionHover": "#fa0",
 	"noteActionsHighlighted": "#707b97",
+
 	"modalBackdrop": "rgba(0, 0, 0, 0.5)",
+
 	"dateDividerBg": "#242731",
 	"dateDividerFg": "#666b79",
+
 	"switchTrack": "rgba(255, 255, 255, 0.15)",
+
 	"autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)",
 	"autocompleteItemText": "rgba(255, 255, 255, 0.8)",
 	"autocompleteItemTextSub": "rgba(255, 255, 255, 0.3)",
+
 	"cwButtonBg": "#687390",
 	"cwButtonFg": "#393f4f",
 	"cwButtonHoverBg": "#707b97",
+
 	"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
+
 	"calendarWeek": "#43d5dc",
 	"calendarSaturdayOrSunday": "#ff6679",
 	"calendarDay": "#c5ced6",
+
 	"announcementsBg": "#253a50",
 	"announcementsTitle": "#539eff",
 	"announcementsText": "#fff",
+
+	"googleSearchBg": "rgba(0, 0, 0, 0.2)",
+	"googleSearchFg": "#dee4e8",
+	"googleSearchBorder": "rgba(255, 255, 255, 0.2)",
+	"googleSearchHoverBorder": "rgba(255, 255, 255, 0.3)",
+	"googleSearchHoverButton": "rgba(255, 255, 255, 0.1)",
+
 	"desktopHeaderBg": "#313543",
 	"desktopHeaderFg": "#b8c5ca",
 	"desktopHeaderHoverFg": "#fff",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index a7037b8e54..83e4ee05c3 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -38,29 +38,45 @@
 	"noteHeaderAdminBg": "#5d282e",
 	"noteHeaderAcct": "#ccc",
 	"noteHeaderInfo": "#c0c0c0",
+
 	"noteActions": "#ddd",
 	"noteActionsHover": "#444",
 	"noteActionsReplyHover": "#0af",
 	"noteActionsRenoteHover": "#8d0",
 	"noteActionsReactionHover": "#fa0",
 	"noteActionsHighlighted": "#888",
+
 	"modalBackdrop": "rgba(0, 0, 0, 0.1)",
+
 	"dateDividerBg": "#fdfdfd",
 	"dateDividerFg": "#aaa",
+
 	"switchTrack": "rgba(0, 0, 0, 0.25)",
+
 	"autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)",
 	"autocompleteItemText": "rgba(0, 0, 0, 0.8)",
 	"autocompleteItemTextSub": "rgba(0, 0, 0, 0.3)",
+
 	"cwButtonBg": "#b1b9c1",
 	"cwButtonFg": "#fff",
 	"cwButtonHoverBg": "#bbc4ce",
+
 	"reactionPickerButtonHoverBg": "#eee",
+
 	"calendarWeek": "#19a2a9",
 	"calendarSaturdayOrSunday": "#ef95a0",
 	"calendarDay": "#777",
+
 	"announcementsBg": "#f3f9ff",
 	"announcementsTitle": "#4078c0",
 	"announcementsText": "#57616f",
+
+	"googleSearchBg": "#fff",
+	"googleSearchFg": "#55595c",
+	"googleSearchBorder": "rgba(0, 0, 0, 0.2)",
+	"googleSearchHoverBorder": "rgba(0, 0, 0, 0.3)",
+	"googleSearchHoverButton": "rgba(0, 0, 0, 0.05)",
+
 	"desktopHeaderBg": "#f7f7f7",
 	"desktopHeaderFg": "#9eaba8",
 	"desktopHeaderHoverFg": "#7b8c88",

From b032f78769d7d70b2265cb5318276fa582c20bf7 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 21:43:11 +0900
Subject: [PATCH 29/72] wip

---
 .../components/messaging-room.message.vue     | 20 ++-----
 .../views/components/messaging-room.vue       | 36 ++++-------
 .../app/mobile/views/components/ui.header.vue | 60 -------------------
 src/client/theme/dark.json                    |  8 +++
 src/client/theme/halloween.json               |  1 -
 src/client/theme/light.json                   |  8 +++
 6 files changed, 30 insertions(+), 103 deletions(-)

diff --git a/src/client/app/common/views/components/messaging-room.message.vue b/src/client/app/common/views/components/messaging-room.message.vue
index e0528d5432..77bf55c52c 100644
--- a/src/client/app/common/views/components/messaging-room.message.vue
+++ b/src/client/app/common/views/components/messaging-room.message.vue
@@ -59,9 +59,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.message
 	$me-balloon-color = var(--primary)
 
 	padding 10px 12px 10px 12px
@@ -179,7 +177,7 @@ root(isDark)
 			display block
 			margin 2px 0 0 0
 			font-size 10px
-			color isDark ? rgba(#fff, 0.4) : rgba(#000, 0.4)
+			color var(--messagingRoomMessageInfo)
 
 			> [data-fa]
 				margin-left 4px
@@ -192,7 +190,7 @@ root(isDark)
 			padding-left 66px
 
 			> .balloon
-				$color = isDark ? #2d3338 : #eee
+				$color = var(--messagingRoomMessageBg)
 				float left
 				background $color
 
@@ -208,8 +206,7 @@ root(isDark)
 
 				> .content
 					> .text
-						if isDark
-							color #fff
+							color var(--messagingRoomMessageFg)
 
 			> footer
 				text-align left
@@ -250,18 +247,9 @@ root(isDark)
 
 				> .read
 					user-select none
-					margin 0 4px 0 0
-					color isDark ? rgba(#fff, 0.5) : rgba(#000, 0.5)
-					font-size 11px
 
 	&[data-is-deleted]
 		> .balloon
 			opacity 0.5
 
-.message[data-darkmode]
-	root(true)
-
-.message:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/messaging-room.vue b/src/client/app/common/views/components/messaging-room.vue
index 52abfa4e1d..98661bc39d 100644
--- a/src/client/app/common/views/components/messaging-room.vue
+++ b/src/client/app/common/views/components/messaging-room.vue
@@ -262,14 +262,12 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-messaging-room
 	display flex
 	flex 1
 	flex-direction column
 	height 100%
-	background isDark ? #191b22 : #fff
+	background var(--messagingRoomBg)
 
 	> .body
 		width 100%
@@ -277,24 +275,15 @@ root(isDark)
 		margin 0 auto
 		flex 1
 
-		> .init
-			width 100%
-			margin 0
-			padding 16px 8px 8px 8px
-			text-align center
-			font-size 0.8em
-			color rgba(isDark ? #fff : #000, 0.4)
-
-			[data-fa]
-				margin-right 4px
-
+		> .init,
 		> .empty
 			width 100%
 			margin 0
 			padding 16px 8px 8px 8px
 			text-align center
 			font-size 0.8em
-			color rgba(isDark ? #fff : #000, 0.4)
+			color var(--messagingRoomInfo)
+			opacity 0.5
 
 			[data-fa]
 				margin-right 4px
@@ -305,7 +294,8 @@ root(isDark)
 			padding 16px
 			text-align center
 			font-size 0.8em
-			color rgba(isDark ? #fff : #000, 0.4)
+			color var(--messagingRoomInfo)
+			opacity 0.5
 
 			[data-fa]
 				margin-right 4px
@@ -349,7 +339,7 @@ root(isDark)
 				left 0
 				right 0
 				margin 0 auto
-				background rgba(isDark ? #fff : #000, 0.1)
+				background var(--messagingRoomDateDividerLine)
 
 			> span
 				display inline-block
@@ -357,8 +347,8 @@ root(isDark)
 				padding 0 16px
 				//font-weight bold
 				line-height 32px
-				color rgba(isDark ? #fff : #000, 0.3)
-				background isDark ? #191b22 : #fff
+				color var(--messagingRoomDateDividerText)
+				background var(--messagingRoomBg)
 
 	> footer
 		position -webkit-sticky
@@ -410,10 +400,4 @@ root(isDark)
 	transition opacity 0.5s
 	opacity 0
 
-.mk-messaging-room[data-darkmode]
-	root(true)
-
-.mk-messaging-room:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
index b859c22887..d3e258f052 100644
--- a/src/client/app/mobile/views/components/ui.header.vue
+++ b/src/client/app/mobile/views/components/ui.header.vue
@@ -4,7 +4,6 @@
 	<mk-special-message/>
 	<div class="main" ref="main">
 		<div class="backdrop"></div>
-		<p ref="welcomeback" v-if="$store.getters.isSignedIn">%i18n:@welcome-back%<b>{{ $store.state.i | userName }}</b>%i18n:@adjective%</p>
 		<div class="content" ref="mainContainer">
 			<button class="nav" @click="$parent.isDrawerOpening = true">%fa:bars%</button>
 			<template v-if="hasUnreadNotification || hasUnreadMessagingMessage || hasGameInvitation">%fa:circle%</template>
@@ -50,53 +49,6 @@ export default Vue.extend({
 
 			this.connection.on('reversi_invited', this.onReversiInvited);
 			this.connection.on('reversi_no_invites', this.onReversiNoInvites);
-
-			const ago = (new Date().getTime() - new Date(this.$store.state.i.lastUsedAt).getTime()) / 1000;
-			const isHisasiburi = ago >= 3600;
-			this.$store.state.i.lastUsedAt = new Date();
-
-			if (isHisasiburi) {
-				(this.$refs.welcomeback as any).style.display = 'block';
-				(this.$refs.main as any).style.overflow = 'hidden';
-
-				anime({
-					targets: this.$refs.welcomeback,
-					top: '0',
-					opacity: 1,
-					delay: 1000,
-					duration: 500,
-					easing: 'easeOutQuad'
-				});
-
-				anime({
-					targets: this.$refs.mainContainer,
-					opacity: 0,
-					delay: 1000,
-					duration: 500,
-					easing: 'easeOutQuad'
-				});
-
-				setTimeout(() => {
-					anime({
-						targets: this.$refs.welcomeback,
-						top: '-48px',
-						opacity: 0,
-						duration: 500,
-						complete: () => {
-							(this.$refs.welcomeback as any).style.display = 'none';
-							(this.$refs.main as any).style.overflow = 'initial';
-						},
-						easing: 'easeInQuad'
-					});
-
-					anime({
-						targets: this.$refs.mainContainer,
-						opacity: 1,
-						duration: 500,
-						easing: 'easeInQuad'
-					});
-				}, 2500);
-			}
 		}
 	},
 	beforeDestroy() {
@@ -159,18 +111,6 @@ root(isDark)
 			//background-color rgba(#1b2023, 0.75)
 			background-color isDark ? #313543 : #595f6f
 
-		> p
-			display none
-			position absolute
-			z-index 1002
-			top $height
-			width 100%
-			line-height $height
-			margin 0
-			text-align center
-			color #fff
-			opacity 0
-
 		> .content
 			z-index 1001
 
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 0422eb021b..7a9a06187f 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -77,6 +77,14 @@
 	"googleSearchHoverBorder": "rgba(255, 255, 255, 0.3)",
 	"googleSearchHoverButton": "rgba(255, 255, 255, 0.1)",
 
+	"messagingRoomBg": "@bg",
+	"messagingRoomInfo": "#fff",
+	"messagingRoomDateDividerLine": "rgba(255, 255, 255, 0.1)",
+	"messagingRoomDateDividerText": "rgba(255, 255, 255, 0.3)",
+	"messagingRoomMessageInfo": "rgba(255, 255, 255, 0.4)",
+	"messagingRoomMessageBg": "$secondary",
+	"messagingRoomMessageFg": "#fff",
+
 	"desktopHeaderBg": "#313543",
 	"desktopHeaderFg": "#b8c5ca",
 	"desktopHeaderHoverFg": "#fff",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index 81c773f574..327d04cad6 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -11,7 +11,6 @@
 			"text": "#b1bee3"
 		}
 	},
-	"bg": "#1b1a35",
 	"renoteGradient": "#5d2d1a",
 	"renoteText": "#ff6c00",
 	"desktopHeaderBg": "#36314e"
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 83e4ee05c3..ca0dad0718 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -77,6 +77,14 @@
 	"googleSearchHoverBorder": "rgba(0, 0, 0, 0.3)",
 	"googleSearchHoverButton": "rgba(0, 0, 0, 0.05)",
 
+	"messagingRoomBg": "#fff",
+	"messagingRoomInfo": "#000",
+	"messagingRoomDateDividerLine": "rgba(0, 0, 0, 0.1)",
+	"messagingRoomDateDividerText": "rgba(0, 0, 0, 0.3)",
+	"messagingRoomMessageInfo": "rgba(0, 0, 0, 0.4)",
+	"messagingRoomMessageBg": "#eee",
+	"messagingRoomMessageFg": "#333",
+
 	"desktopHeaderBg": "#f7f7f7",
 	"desktopHeaderFg": "#9eaba8",
 	"desktopHeaderHoverFg": "#7b8c88",

From ef74653a4bb80215482b25c2028924c5c04717e3 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 22:25:10 +0900
Subject: [PATCH 30/72] wip

---
 src/client/app/common/scripts/theme.ts        |  3 ++-
 .../app/desktop/views/components/settings.vue | 27 +++++++------------
 src/client/theme/dark.json                    |  7 ++++-
 src/client/theme/light.json                   |  7 ++++-
 4 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/client/app/common/scripts/theme.ts b/src/client/app/common/scripts/theme.ts
index db1cd7c394..f27ded8685 100644
--- a/src/client/app/common/scripts/theme.ts
+++ b/src/client/app/common/scripts/theme.ts
@@ -43,12 +43,13 @@ function compile(theme: Theme): { [key: string]: string } {
 		if (code[0] == ':') {
 			const parts = code.split('<');
 			const func = parts.shift().substr(1);
-			const arg = parseInt(parts.shift(), 10);
+			const arg = parseFloat(parts.shift());
 			const color = getColor(parts.join('<'));
 
 			switch (func) {
 				case 'darken': return color.darken(arg);
 				case 'lighten': return color.lighten(arg);
+				case 'alpha': return color.setAlpha(arg);
 			}
 		}
 
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index e95e7a735d..4d839f1dc9 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -486,9 +486,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-settings
 	display flex
 	width 100%
 	height 100%
@@ -499,13 +497,13 @@ root(isDark)
 		height 100%
 		padding 16px 0 0 0
 		overflow auto
-		border-right solid 1px isDark ? #1c2023 : #ddd
+		border-right solid 1px var(--faceDivider)
 
 		> p
 			display block
 			padding 10px 16px
 			margin 0
-			color isDark ? #9aa2a7 : #666
+			color var(--desktopSettingsNavItem)
 			cursor pointer
 			user-select none
 			transition margin-left 0.2s ease
@@ -514,7 +512,7 @@ root(isDark)
 				margin-right 4px
 
 			&:hover
-				color isDark ? #fff : #555
+				color var(--desktopSettingsNavItemHover)
 
 			&.active
 				margin-left 8px
@@ -528,14 +526,13 @@ root(isDark)
 
 		> section
 			margin 32px
-			color isDark ? #c4ccd2 : #4a535a
+			color var(--text)
 
 			> h1
 				margin 0 0 1em 0
 				padding 0 0 8px 0
 				font-size 1em
-				color isDark ? #e3e7ea : #555
-				border-bottom solid 1px isDark ? #1c2023 : #eee
+				border-bottom solid 1px var(--faceDivider)
 
 			&, >>> *
 				.ui.button.block
@@ -548,18 +545,12 @@ root(isDark)
 						margin 0 0 1em 0
 						padding 0 0 8px 0
 						font-size 1em
-						color isDark ? #e3e7ea : #555
-						border-bottom solid 1px isDark ? #1c2023 : #eee
+						color var(--text)
+						border-bottom solid 1px var(--faceDivider)
 
 		> .web
 			> .div
-				border-bottom solid 1px isDark ? #1c2023 : #eee
+				border-bottom solid 1px var(--faceDivider)
 				margin 16px 0
 
-.mk-settings[data-darkmode]
-	root(true)
-
-.mk-settings:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 7a9a06187f..8962235f2f 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -5,12 +5,14 @@
 		"author": "syuilo",
 		"vars": {
 			"primary": "#fb4e4e",
-			"secondary": "#282C37"
+			"secondary": "#282C37",
+			"text": "#d0e0ea"
 		}
 	},
 	"primary": "$primary",
 	"primaryForeground": "#fff",
 	"bg": ":darken<8<$secondary",
+	"text": "$text",
 	"scrollbarTrack": "#282c37",
 	"scrollbarHandle": "#454954",
 	"scrollbarHandleHover": "#535660",
@@ -99,6 +101,9 @@
 	"desktopTimelineSrc": "@faceTextButton",
 	"desktopTimelineSrcHover": "@faceTextButtonHover",
 	"desktopWindowTitle": "@faceHeaderText",
+	"desktopSettingsNavItem": ":alpha<0.8<$text",
+	"desktopSettingsNavItemHover": ":lighten<10<$text",
+
 	"mobileSignedInAsBg": "#273c34",
 	"mobileSignedInAsFg": "#49ab63",
 	"mobileSignoutBg": "#652222",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index ca0dad0718..11b001ceb1 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -5,12 +5,14 @@
 		"author": "syuilo",
 		"vars": {
 			"primary": "#fb4e4e",
-			"secondary": "#fff"
+			"secondary": "#fff",
+			"text": "#666"
 		}
 	},
 	"primary": "$primary",
 	"primaryForeground": "#fff",
 	"bg": ":darken<8<$secondary",
+	"text": "$text",
 	"scrollbarTrack": "#fff",
 	"scrollbarHandle": "#00000033",
 	"scrollbarHandleHover": "#00000066",
@@ -99,6 +101,9 @@
 	"desktopTimelineSrc": "#6f7477",
 	"desktopTimelineSrcHover": "#525a5f",
 	"desktopWindowTitle": "#666",
+	"desktopSettingsNavItem": ":alpha<0.8<$text",
+	"desktopSettingsNavItemHover": ":darken<10<$text",
+
 	"mobileSignedInAsBg": "#fcfff5",
 	"mobileSignedInAsFg": "#2c662d",
 	"mobileSignoutBg": "#fff6f5",

From 0c7111b438d8a1242008412dfa01504f2a116cd7 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 22:30:52 +0900
Subject: [PATCH 31/72] wip

---
 src/client/app/common/scripts/theme.ts | 4 ----
 src/client/style.styl                  | 4 ++--
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/client/app/common/scripts/theme.ts b/src/client/app/common/scripts/theme.ts
index f27ded8685..7a1c6abb76 100644
--- a/src/client/app/common/scripts/theme.ts
+++ b/src/client/app/common/scripts/theme.ts
@@ -62,10 +62,6 @@ function compile(theme: Theme): { [key: string]: string } {
 		if (k == 'meta') return;
 		const c = getColor(v);
 		props[k] = genValue(c);
-		props[`${k}-r`] = c.toRgb().r;
-		props[`${k}-g`] = c.toRgb().g;
-		props[`${k}-b`] = c.toRgb().b;
-		props[`${k}-a`] = c.toRgb().a;
 	});
 
 	const primary = getColor(props['primary']);
diff --git a/src/client/style.styl b/src/client/style.styl
index 111e167204..8ebba2f15e 100644
--- a/src/client/style.styl
+++ b/src/client/style.styl
@@ -33,7 +33,7 @@ a
 
 @css {
 	a {
-		tap-highlight-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.7) !important;
-		-webkit-tap-highlight-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.7) !important;
+		tap-highlight-color: var(--primaryAlpha07) !important;
+		-webkit-tap-highlight-color: var(--primaryAlpha07) !important;
 	}
 }

From 1e9eeeb980fc416efcda68b4020d65425c0e8e31 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 22:50:34 +0900
Subject: [PATCH 32/72] wip

---
 .../views/components/messaging-room.form.vue  |  2 +-
 .../common/views/components/poll-editor.vue   |  2 +-
 .../common/views/components/ui/form/radio.vue |  2 +-
 .../app/common/views/components/ui/input.vue  | 10 ++++----
 .../app/common/views/components/ui/radio.vue  |  2 +-
 .../app/common/views/components/ui/select.vue |  4 ++--
 .../common/views/components/ui/textarea.vue   | 24 +++++++------------
 .../common/views/components/url-preview.vue   | 18 +++++---------
 src/client/theme/dark.json                    | 12 +++++++++-
 src/client/theme/halloween.json               |  1 +
 src/client/theme/light.json                   | 10 ++++++++
 11 files changed, 47 insertions(+), 40 deletions(-)

diff --git a/src/client/app/common/views/components/messaging-room.form.vue b/src/client/app/common/views/components/messaging-room.form.vue
index 90668aee6e..8e62587c20 100644
--- a/src/client/app/common/views/components/messaging-room.form.vue
+++ b/src/client/app/common/views/components/messaging-room.form.vue
@@ -209,7 +209,7 @@ root(isDark)
 		padding 8px
 		resize none
 		font-size 1em
-		color isDark ? #fff : #000
+		color var(--inputText)
 		outline none
 		border none
 		border-top solid 1px isDark ? #4b5056 : #eee
diff --git a/src/client/app/common/views/components/poll-editor.vue b/src/client/app/common/views/components/poll-editor.vue
index 219f0a7fd5..7f52c62c23 100644
--- a/src/client/app/common/views/components/poll-editor.vue
+++ b/src/client/app/common/views/components/poll-editor.vue
@@ -103,7 +103,7 @@ root(isDark)
 				padding 6px 8px
 				width 300px
 				font-size 14px
-				color isDark ? #fff : #000
+				color var(--inputText)
 				background isDark ? #191b22 : #fff
 				border solid 1px var(--primaryAlpha01)
 				border-radius 4px
diff --git a/src/client/app/common/views/components/ui/form/radio.vue b/src/client/app/common/views/components/ui/form/radio.vue
index 13cabbdc04..5728a8171b 100644
--- a/src/client/app/common/views/components/ui/form/radio.vue
+++ b/src/client/app/common/views/components/ui/form/radio.vue
@@ -62,7 +62,7 @@ root(isDark)
 
 	&:hover
 		> .button
-			border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+			border solid 2px var(--inputLabel)
 
 	&.disabled
 		opacity 0.6
diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue
index 98c9bf7f5a..d7b83d81cd 100644
--- a/src/client/app/common/views/components/ui/input.vue
+++ b/src/client/app/common/views/components/ui/input.vue
@@ -167,7 +167,7 @@ root(isDark, fill)
 		width 24px
 		text-align center
 		line-height 32px
-		color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+		color var(--inputLabel)
 
 		&:not(:empty) + .input
 			margin-left 28px
@@ -183,7 +183,7 @@ root(isDark, fill)
 				left 0
 				right 0
 				height 1px
-				background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
+				background var(--inputBorder)
 
 			&:after
 				content ''
@@ -242,7 +242,7 @@ root(isDark, fill)
 			transition-duration 0.3s
 			font-size 16px
 			line-height 32px
-			color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+			color var(--inputLabel)
 			pointer-events none
 			//will-change transform
 			transform-origin top left
@@ -257,7 +257,7 @@ root(isDark, fill)
 			font-weight fill ? bold : normal
 			font-size 16px
 			line-height 32px
-			color isDark ? #fff : #000
+			color var(--inputText)
 			background transparent
 			border none
 			border-radius 0
@@ -280,7 +280,7 @@ root(isDark, fill)
 			top 0
 			font-size 16px
 			line-height fill ? 44px : 32px
-			color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+			color var(--inputLabel)
 			pointer-events none
 
 			&:empty
diff --git a/src/client/app/common/views/components/ui/radio.vue b/src/client/app/common/views/components/ui/radio.vue
index ded6b5650c..3a4407abc0 100644
--- a/src/client/app/common/views/components/ui/radio.vue
+++ b/src/client/app/common/views/components/ui/radio.vue
@@ -87,7 +87,7 @@ root(isDark)
 		width 20px
 		height 20px
 		background none
-		border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+		border solid 2px var(--inputLabel)
 		border-radius 100%
 		transition inherit
 
diff --git a/src/client/app/common/views/components/ui/select.vue b/src/client/app/common/views/components/ui/select.vue
index c32865c690..bdb730fea9 100644
--- a/src/client/app/common/views/components/ui/select.vue
+++ b/src/client/app/common/views/components/ui/select.vue
@@ -103,7 +103,7 @@ root(isDark, fill)
 				left 0
 				right 0
 				height 1px
-				background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
+				background var(--inputBorder)
 
 			&:after
 				content ''
@@ -143,7 +143,7 @@ root(isDark, fill)
 			font-weight fill ? bold : normal
 			font-size 16px
 			height 32px
-			color isDark ? #fff : #000
+			color var(--inputText)
 			background transparent
 			border none
 			border-radius 0
diff --git a/src/client/app/common/views/components/ui/textarea.vue b/src/client/app/common/views/components/ui/textarea.vue
index 53b7dcaf8c..67898ee059 100644
--- a/src/client/app/common/views/components/ui/textarea.vue
+++ b/src/client/app/common/views/components/ui/textarea.vue
@@ -63,9 +63,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark, fill)
+root(fill)
 	margin 42px 0 32px 0
 
 	> .input
@@ -84,7 +82,7 @@ root(isDark, fill)
 				left 0
 				right 0
 				background none
-				border solid 1px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
+				border solid 1px var(--inputBorder)
 				border-radius 3px
 				pointer-events none
 
@@ -112,7 +110,7 @@ root(isDark, fill)
 			transition-duration 0.3s
 			font-size 16px
 			line-height 32px
-			color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+			color var(--inputLabel)
 			pointer-events none
 			//will-change transform
 			transform-origin top left
@@ -126,7 +124,7 @@ root(isDark, fill)
 			font inherit
 			font-weight fill ? bold : normal
 			font-size 16px
-			color isDark ? #fff : #000
+			color var(--inputText)
 			background transparent
 			border none
 			border-radius 0
@@ -159,16 +157,10 @@ root(isDark, fill)
 				left 0 !important
 				transform scale(0.75)
 
-.ui-textarea[data-darkmode]
-	&.fill
-		root(true, true)
-	&:not(.fill)
-		root(true, false)
+.ui-textarea.fill
+	root(true)
 
-.ui-textarea:not([data-darkmode])
-	&.fill
-		root(false, true)
-	&:not(.fill)
-		root(false, false)
+.ui-textarea:not(.fill)
+	root(false)
 
 </style>
diff --git a/src/client/app/common/views/components/url-preview.vue b/src/client/app/common/views/components/url-preview.vue
index f9b8415b5b..86489cf8be 100644
--- a/src/client/app/common/views/components/url-preview.vue
+++ b/src/client/app/common/views/components/url-preview.vue
@@ -200,17 +200,17 @@ export default Vue.extend({
 		top 0
 		width 100%
 
-root(isDark)
+.mk-url-preview
 	> a
 		display block
 		font-size 14px
-		border solid 1px isDark ? #191b1f : #eee
+		border solid 1px var(--urlPreviewBorder)
 		border-radius 4px
 		overflow hidden
 
 		&:hover
 			text-decoration none
-			border-color isDark ? #4f5561 : #ddd
+			border-color var(--urlPreviewBorderHover)
 
 			> article > header > h1
 				text-decoration underline
@@ -235,11 +235,11 @@ root(isDark)
 				> h1
 					margin 0
 					font-size 1em
-					color isDark ? #d6dae0 : #555
+					color var(--urlPreviewTitle)
 
 			> p
 				margin 0
-				color isDark ? #a4aab3 : #777
+				color var(--urlPreviewText)
 				font-size 0.8em
 
 			> footer
@@ -256,7 +256,7 @@ root(isDark)
 				> p
 					display inline-block
 					margin 0
-					color isDark ? #b0b4bf : #666
+					color var(--urlPreviewInfo)
 					font-size 0.8em
 					line-height 16px
 					vertical-align top
@@ -322,10 +322,4 @@ root(isDark)
 						width 12px
 						height 12px
 
-.mk-url-preview[data-darkmode]
-	root(true)
-
-.mk-url-preview:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 8962235f2f..44a8e0e568 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -6,9 +6,10 @@
 		"vars": {
 			"primary": "#fb4e4e",
 			"secondary": "#282C37",
-			"text": "#d0e0ea"
+			"text": "#d6dae0"
 		}
 	},
+
 	"primary": "$primary",
 	"primaryForeground": "#fff",
 	"bg": ":darken<8<$secondary",
@@ -54,6 +55,9 @@
 	"dateDividerFg": "#666b79",
 
 	"switchTrack": "rgba(255, 255, 255, 0.15)",
+	"inputBorder": "rgba(255, 255, 255, 0.7)",
+	"inputLabel": "rgba(255, 255, 255, 0.7)",
+	"inputText": "#fff",
 
 	"autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)",
 	"autocompleteItemText": "rgba(255, 255, 255, 0.8)",
@@ -65,6 +69,12 @@
 
 	"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
 
+	"urlPreviewBorder": "rgba(0, 0, 0, 0.4)",
+	"urlPreviewBorderHover": "rgba(255, 255, 255, 0.2)",
+	"urlPreviewTitle": "$text",
+	"urlPreviewText": ":alpha<0.7<$text",
+	"urlPreviewInfo": ":alpha<0.8<$text",
+
 	"calendarWeek": "#43d5dc",
 	"calendarSaturdayOrSunday": "#ff6679",
 	"calendarDay": "#c5ced6",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index 327d04cad6..1fc60c00ad 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -11,6 +11,7 @@
 			"text": "#b1bee3"
 		}
 	},
+
 	"renoteGradient": "#5d2d1a",
 	"renoteText": "#ff6c00",
 	"desktopHeaderBg": "#36314e"
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 11b001ceb1..8dd4b1fe7b 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -9,6 +9,7 @@
 			"text": "#666"
 		}
 	},
+
 	"primary": "$primary",
 	"primaryForeground": "#fff",
 	"bg": ":darken<8<$secondary",
@@ -54,6 +55,9 @@
 	"dateDividerFg": "#aaa",
 
 	"switchTrack": "rgba(0, 0, 0, 0.25)",
+	"inputBorder": "rgba(0, 0, 0, 0.42)",
+	"inputLabel": "rgba(0, 0, 0, 0.54)",
+	"inputText": "#000",
 
 	"autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)",
 	"autocompleteItemText": "rgba(0, 0, 0, 0.8)",
@@ -65,6 +69,12 @@
 
 	"reactionPickerButtonHoverBg": "#eee",
 
+	"urlPreviewBorder": "rgba(0, 0, 0, 0.1)",
+	"urlPreviewBorderHover": "rgba(0, 0, 0, 0.2)",
+	"urlPreviewTitle": "$text",
+	"urlPreviewText": ":alpha<0.7<$text",
+	"urlPreviewInfo": ":alpha<0.8<$text",
+
 	"calendarWeek": "#19a2a9",
 	"calendarSaturdayOrSunday": "#ef95a0",
 	"calendarDay": "#777",

From e82a44c03d9b17bb3a9852cccec5edbb2cf76be2 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 22:55:17 +0900
Subject: [PATCH 33/72] wip

---
 .../desktop/views/components/ui.header.account.vue | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index 77221f81d2..a541dea121 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -127,9 +127,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.account
 	> .header
 		display block
 		margin 0
@@ -217,7 +215,7 @@ root(isDark)
 
 			& + ul
 				padding-top 10px
-				border-top solid 1px isDark ? #1c2023 : #eee
+				border-top solid 1px var(--faceDivider)
 
 			> li
 				display block
@@ -231,7 +229,7 @@ root(isDark)
 					padding 0 28px
 					margin 0
 					line-height 40px
-					color isDark ? #c8cece : #868C8C
+					color var(--text)
 					cursor pointer
 
 					*
@@ -287,10 +285,4 @@ root(isDark)
 	transform-origin: center -16px;
 }
 
-.account[data-darkmode]
-	root(true)
-
-.account:not([data-darkmode])
-	root(false)
-
 </style>

From 74be1c81b111bca81047b21083249d8be4b35ed8 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 22:59:56 +0900
Subject: [PATCH 34/72] wip

---
 .../common/views/components/reactions-viewer.vue  | 15 ++++-----------
 src/client/theme/dark.json                        |  2 ++
 src/client/theme/light.json                       |  2 ++
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/client/app/common/views/components/reactions-viewer.vue b/src/client/app/common/views/components/reactions-viewer.vue
index c30fa2a1dc..9212a84b31 100644
--- a/src/client/app/common/views/components/reactions-viewer.vue
+++ b/src/client/app/common/views/components/reactions-viewer.vue
@@ -39,10 +39,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
-	$borderColor = isDark ? #5e6673 : #eee
-	border-top dashed 1px $borderColor
-	border-bottom dashed 1px $borderColor
+.mk-reactions-viewer
+	border-top dashed 1px var(--reactionViewerBorder)
+	border-bottom dashed 1px var(--reactionViewerBorder)
 	margin 4px 0
 
 	&:empty
@@ -60,12 +59,6 @@ root(isDark)
 		> span
 			margin-left 4px
 			font-size 1.2em
-			color isDark ? #d1d5dc : #444
-
-.mk-reactions-viewer[data-darkmode]
-	root(true)
-
-.mk-reactions-viewer:not([data-darkmode])
-	root(false)
+			color var(--text)
 
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 44a8e0e568..39828e364e 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -69,6 +69,8 @@
 
 	"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
 
+	"reactionViewerBorder": "rgba(255, 255, 255, 0.1)",
+
 	"urlPreviewBorder": "rgba(0, 0, 0, 0.4)",
 	"urlPreviewBorderHover": "rgba(255, 255, 255, 0.2)",
 	"urlPreviewTitle": "$text",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 8dd4b1fe7b..2c45a57705 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -69,6 +69,8 @@
 
 	"reactionPickerButtonHoverBg": "#eee",
 
+	"reactionViewerBorder": "rgba(0, 0, 0, 0.1)",
+
 	"urlPreviewBorder": "rgba(0, 0, 0, 0.1)",
 	"urlPreviewBorderHover": "rgba(0, 0, 0, 0.2)",
 	"urlPreviewTitle": "$text",

From a0305c4c040f769f1992cdd2eea70095af802365 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 23:02:59 +0900
Subject: [PATCH 35/72] wip

---
 src/client/app/common/views/components/instance.vue | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/client/app/common/views/components/instance.vue b/src/client/app/common/views/components/instance.vue
index 14c6664eff..c3935cce0e 100644
--- a/src/client/app/common/views/components/instance.vue
+++ b/src/client/app/common/views/components/instance.vue
@@ -26,9 +26,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
-	color isDark ? #fff : #5b646f
-	background isDark ? #21242f : #fff
+.nhasjydimbopojusarffqjyktglcuxjy
+	color var(--text)
+	background var(--face)
 	text-align center
 
 	> .banner
@@ -48,10 +48,4 @@ root(isDark)
 		display block
 		padding-bottom 16px
 
-.nhasjydimbopojusarffqjyktglcuxjy[data-darkmode]
-	root(true)
-
-.nhasjydimbopojusarffqjyktglcuxjy:not([data-darkmode])
-	root(false)
-
 </style>

From 32942709bfdb799f1ac26a087ffd4d73b558fcb5 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 23:09:23 +0900
Subject: [PATCH 36/72] wip

---
 src/client/app/desktop/views/components/note-detail.vue   | 2 +-
 src/client/app/desktop/views/components/notes.note.vue    | 8 ++++----
 .../app/desktop/views/components/sub-note-content.vue     | 2 +-
 src/client/app/desktop/views/pages/deck/deck.note.vue     | 6 +++---
 src/client/app/mobile/views/components/note-detail.vue    | 2 +-
 src/client/app/mobile/views/components/note.vue           | 6 +++---
 .../app/mobile/views/components/sub-note-content.vue      | 2 +-
 src/client/theme/dark.json                                | 2 ++
 src/client/theme/halloween.json                           | 1 +
 src/client/theme/light.json                               | 2 ++
 10 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index 50ad793f0b..0c4b560e98 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -365,7 +365,7 @@ export default Vue.extend({
 
 					> *
 						padding 16px
-						border dashed 1px vat(--quoteBorder)
+						border dashed 1px var(--quoteBorder)
 						border-radius 8px
 
 				> .location
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 5daaadb971..7e4f42533f 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -447,7 +447,7 @@ root(isDark)
 							padding 4px
 							font-size 90%
 							text-align center
-							background isDark ? #2f3944 : #eef1f3
+							background var(--mfmTitleBg)
 							border-radius 4px
 
 						>>> .code
@@ -461,12 +461,12 @@ root(isDark)
 
 						> .reply
 							margin-right 8px
-							color isDark ? #99abbf : #717171
+							color var(--text)
 
 						> .rp
 							margin-left 4px
 							font-style oblique
-							color #a0bf46
+							color var(--renoteText)
 
 					> .location
 						margin 4px 0
@@ -491,7 +491,7 @@ root(isDark)
 
 						> *
 							padding 16px
-							border dashed 1px vat(--quoteBorder)
+							border dashed 1px var(--quoteBorder)
 							border-radius 8px
 
 			> footer
diff --git a/src/client/app/desktop/views/components/sub-note-content.vue b/src/client/app/desktop/views/components/sub-note-content.vue
index 6889dc231e..fd8e658056 100644
--- a/src/client/app/desktop/views/components/sub-note-content.vue
+++ b/src/client/app/desktop/views/components/sub-note-content.vue
@@ -38,7 +38,7 @@ export default Vue.extend({
 		> .rp
 			margin-left 4px
 			font-style oblique
-			color #a0bf46
+			color var(--renoteText)
 
 	mk-poll
 		font-size 80%
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index bdc4368e7b..3bc4f26823 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -329,7 +329,7 @@ root(isDark)
 							padding 4px
 							font-size 90%
 							text-align center
-							background isDark ? #2f3944 : #eef1f3
+							background var(--mfmTitleBg)
 							border-radius 4px
 
 						>>> .code
@@ -348,7 +348,7 @@ root(isDark)
 						> .rp
 							margin-left 4px
 							font-style oblique
-							color #a0bf46
+							color var(--renoteText)
 
 						[data-is-me]:after
 							content "you"
@@ -387,7 +387,7 @@ root(isDark)
 
 						> *
 							padding 16px
-							border dashed 1px vat(--quoteBorder)
+							border dashed 1px var(--quoteBorder)
 							border-radius 8px
 
 				> .app
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index ade518b1fc..48d6d32868 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -368,7 +368,7 @@ export default Vue.extend({
 
 					> *
 						padding 16px
-						border dashed 1px vat(--quoteBorder)
+						border dashed 1px var(--quoteBorder)
 						border-radius 8px
 
 				> .location
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index ed175b4f6f..b1c5835692 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -369,7 +369,7 @@ root(isDark)
 							padding 4px
 							font-size 90%
 							text-align center
-							background isDark ? #2f3944 : #eef1f3
+							background var(--mfmTitleBg)
 							border-radius 4px
 
 						>>> .code
@@ -388,7 +388,7 @@ root(isDark)
 						> .rp
 							margin-left 4px
 							font-style oblique
-							color #a0bf46
+							color var(--renoteText)
 
 						[data-is-me]:after
 							content "you"
@@ -427,7 +427,7 @@ root(isDark)
 
 						> *
 							padding 16px
-							border dashed 1px vat(--quoteBorder)
+							border dashed 1px var(--quoteBorder)
 							border-radius 8px
 
 				> .app
diff --git a/src/client/app/mobile/views/components/sub-note-content.vue b/src/client/app/mobile/views/components/sub-note-content.vue
index 4d0aa25f34..2238edf278 100644
--- a/src/client/app/mobile/views/components/sub-note-content.vue
+++ b/src/client/app/mobile/views/components/sub-note-content.vue
@@ -37,7 +37,7 @@ export default Vue.extend({
 		> .rp
 			margin-left 4px
 			font-style oblique
-			color #a0bf46
+			color var(--renoteText)
 
 	mk-poll
 		font-size 80%
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 39828e364e..1eb41ea52e 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -91,6 +91,8 @@
 	"googleSearchHoverBorder": "rgba(255, 255, 255, 0.3)",
 	"googleSearchHoverButton": "rgba(255, 255, 255, 0.1)",
 
+	"mfmTitleBg": "rgba(0, 0, 0, 0.2)",
+
 	"messagingRoomBg": "@bg",
 	"messagingRoomInfo": "#fff",
 	"messagingRoomDateDividerLine": "rgba(255, 255, 255, 0.1)",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index 1fc60c00ad..1bd00357e2 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -14,5 +14,6 @@
 
 	"renoteGradient": "#5d2d1a",
 	"renoteText": "#ff6c00",
+	"quoteBorder": "#c3631c",
 	"desktopHeaderBg": "#36314e"
 }
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 2c45a57705..556bd24506 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -91,6 +91,8 @@
 	"googleSearchHoverBorder": "rgba(0, 0, 0, 0.3)",
 	"googleSearchHoverButton": "rgba(0, 0, 0, 0.05)",
 
+	"mfmTitleBg": "rgba(0, 0, 0, 0.07)",
+
 	"messagingRoomBg": "#fff",
 	"messagingRoomInfo": "#000",
 	"messagingRoomDateDividerLine": "rgba(0, 0, 0, 0.1)",

From 38a6aa26bc3d8fb70215474a667ad06080660cea Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 23:17:33 +0900
Subject: [PATCH 37/72] wip

---
 .../app/desktop/views/components/notes.note.vue    | 14 +++-----------
 .../app/desktop/views/pages/deck/deck.note.vue     |  4 ++--
 src/client/app/mobile/views/components/note.vue    |  4 ++--
 src/client/theme/dark.json                         |  2 ++
 src/client/theme/light.json                        |  2 ++
 5 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 7e4f42533f..b628d045aa 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -317,9 +317,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.note
 	margin 0
 	padding 0
 	background var(--face)
@@ -456,8 +454,8 @@ root(isDark)
 						>>> .quote
 							margin 8px
 							padding 6px 12px
-							color isDark ? #6f808e : #aaa
-							border-left solid 3px isDark ? #637182 : #eee
+							color var(--mfmQuote)
+							border-left solid 3px var(--mfmQuoteLine)
 
 						> .reply
 							margin-right 8px
@@ -529,12 +527,6 @@ root(isDark)
 		padding-top 4px
 		background rgba(#000, 0.0125)
 
-.note[data-darkmode]
-	root(true)
-
-.note:not([data-darkmode])
-	root(false)
-
 </style>
 
 <style lang="stylus" module>
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index 3bc4f26823..c6925d5cec 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -338,8 +338,8 @@ root(isDark)
 						>>> .quote
 							margin 8px
 							padding 6px 12px
-							color isDark ? #6f808e : #aaa
-							border-left solid 3px isDark ? #637182 : #eee
+							color var(--mfmQuote)
+							border-left solid 3px var(--mfmQuoteLine)
 
 						> .reply
 							margin-right 8px
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index b1c5835692..8bb9f43fab 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -378,8 +378,8 @@ root(isDark)
 						>>> .quote
 							margin 8px
 							padding 6px 12px
-							color isDark ? #6f808e : #aaa
-							border-left solid 3px isDark ? #637182 : #eee
+							color var(--mfmQuote)
+							border-left solid 3px var(--mfmQuoteLine)
 
 						> .reply
 							margin-right 8px
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 1eb41ea52e..d79e348b07 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -92,6 +92,8 @@
 	"googleSearchHoverButton": "rgba(255, 255, 255, 0.1)",
 
 	"mfmTitleBg": "rgba(0, 0, 0, 0.2)",
+	"mfmQuote": ":alpha<0.7<$text",
+	"mfmQuoteLine": ":alpha<0.6<$text",
 
 	"messagingRoomBg": "@bg",
 	"messagingRoomInfo": "#fff",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 556bd24506..7d15d49ae7 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -92,6 +92,8 @@
 	"googleSearchHoverButton": "rgba(0, 0, 0, 0.05)",
 
 	"mfmTitleBg": "rgba(0, 0, 0, 0.07)",
+	"mfmQuote": ":alpha<0.6<$text",
+	"mfmQuoteLine": ":alpha<0.5<$text",
 
 	"messagingRoomBg": "#fff",
 	"messagingRoomInfo": "#000",

From 61e5cb2041523a091ba2eb434684abc3933776df Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 23:55:05 +0900
Subject: [PATCH 38/72] wip

---
 .../app/desktop/views/pages/welcome.vue       | 57 ++++++-------------
 1 file changed, 17 insertions(+), 40 deletions(-)

diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 405fcb76d0..261642cab4 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -134,12 +134,12 @@
 		</article>
 	</modal>
 
-	<modal name="signup" :class="$store.state.device.darkmode ? 'modal-dark' : 'modal-light'" width="450px" height="auto" scrollable>
+	<modal name="signup" class="modal" width="450px" height="auto" scrollable>
 		<header class="formHeader">%i18n:@signup%</header>
 		<mk-signup class="form"/>
 	</modal>
 
-	<modal name="signin" :class="$store.state.device.darkmode ? 'modal-dark' : 'modal-light'" width="450px" height="auto" scrollable>
+	<modal name="signin" class="modal" width="450px" height="auto" scrollable>
 		<header class="formHeader">%i18n:@signin%</header>
 		<mk-signin class="form"/>
 	</modal>
@@ -226,23 +226,7 @@ export default Vue.extend({
 .v--modal-overlay
 	background rgba(0, 0, 0, 0.6)
 
-.modal-light
-	.v--modal-box
-		color #777
-
-		.formHeader
-			border-bottom solid 1px #eee
-
-.modal-dark
-	.v--modal-box
-		background #313543
-		color #fff
-
-		.formHeader
-			border-bottom solid 1px rgba(#000, 0.2)
-
-.modal-light
-.modal-dark
+.modal
 	.form
 		padding 24px 48px 48px 48px
 
@@ -252,6 +236,13 @@ export default Vue.extend({
 		margin 0 48px
 		font-size 1.5em
 
+	.v--modal-box
+		background var(--face)
+		color var(--text)
+
+		.formHeader
+			border-bottom solid 1px rgba(#000, 0.2)
+
 .v--modal-overlay.about
 	.v--modal-box.v--modal
 		margin 32px 0
@@ -303,15 +294,9 @@ export default Vue.extend({
 </style>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-welcome
 	display flex
 	min-height 100vh
-	//background-color #00070F
-	//background-image url('/assets/bg.jpg')
-	//background-position center
-	//background-size cover
 
 	> .banner
 		position absolute
@@ -331,7 +316,7 @@ root(isDark)
 			left 0
 			width 100%
 			height 100px
-			background linear-gradient(transparent, isDark ? #191b22 : #f7f7f7)
+			background linear-gradient(transparent, var(--bg))
 
 	> .forkit
 		position absolute
@@ -345,7 +330,7 @@ root(isDark)
 		left 16px
 		padding 16px
 		font-size 18px
-		color isDark ? #fff : #444
+		color var(--text)
 
 	> main
 		margin 0 auto
@@ -354,7 +339,7 @@ root(isDark)
 		max-width 1200px
 
 		.block
-			color isDark ? #fff : #444
+			color var(--text)
 			background var(--face)
 			box-shadow var(--shadow)
 			//border-radius 8px
@@ -365,9 +350,7 @@ root(isDark)
 				padding 0 16px
 				line-height 48px
 				background var(--faceHeader)
-
-				if !isDark
-					box-shadow 0 1px 0px rgba(0, 0, 0, 0.1)
+				box-shadow 0 1px 0px rgba(0, 0, 0, 0.1)
 
 				& + div
 					max-height calc(100% - 48px)
@@ -406,7 +389,7 @@ root(isDark)
 						> .stats
 							margin-left 16px
 							padding-left 16px
-							border-left solid 1px isDark ? #fff : #444
+							border-left solid 1px var(--faceDivider)
 
 							> *
 								margin-right 16px
@@ -449,7 +432,7 @@ root(isDark)
 					> div
 						padding 0 0 16px 0
 						margin 0 0 16px 0
-						border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
+						border-bottom 1px solid var(--faceDivider)
 
 						> h1
 							margin 0
@@ -518,10 +501,4 @@ root(isDark)
 								display block
 								margin 0
 
-.mk-welcome[data-darkmode]
-	root(true)
-
-.mk-welcome:not([data-darkmode])
-	root(false)
-
 </style>

From cbf5d4b71d807e53e2252e8767364f7a7e761b34 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 00:48:17 +0900
Subject: [PATCH 39/72] wip

---
 package.json                                  |   1 +
 .../app/desktop/views/pages/welcome.vue       |   8 +-
 src/client/assets/title.light.svg             | 140 ------------------
 .../assets/{title.dark.svg => title.svg}      |  16 +-
 webpack.config.ts                             |   2 +
 5 files changed, 16 insertions(+), 151 deletions(-)
 delete mode 100644 src/client/assets/title.light.svg
 rename src/client/assets/{title.dark.svg => title.svg} (92%)

diff --git a/package.json b/package.json
index a3e3b56be4..347e9d0c24 100644
--- a/package.json
+++ b/package.json
@@ -214,6 +214,7 @@
 		"vue-loader": "15.4.2",
 		"vue-router": "3.0.1",
 		"vue-style-loader": "4.1.2",
+		"vue-svg-inline-loader": "1.1.3",
 		"vue-template-compiler": "2.5.17",
 		"vuedraggable": "2.16.0",
 		"vuewordcloud": "18.7.11",
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 261642cab4..f8f49bf997 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -14,7 +14,7 @@
 			<div class="main block">
 				<div>
 					<h1 v-if="name != 'Misskey'">{{ name }}</h1>
-					<h1 v-else><img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" :alt="name"></h1>
+					<h1 v-else><img svg-inline src="../../../../assets/title.svg" :alt="name"></h1>
 
 					<div class="info">
 						<span><b>{{ host }}</b> - <span v-html="'%i18n:@powered-by-misskey%'"></span></span>
@@ -377,9 +377,11 @@ export default Vue.extend({
 					> h1
 						margin 0
 
-						> img
+						> svg
 							margin -8px 0 0 -16px
-							max-width 280px
+							width 280px
+							height 100px
+							fill currentColor
 
 					> .info
 						margin 0 auto 16px auto
diff --git a/src/client/assets/title.light.svg b/src/client/assets/title.light.svg
deleted file mode 100644
index 95ad11c399..0000000000
--- a/src/client/assets/title.light.svg
+++ /dev/null
@@ -1,140 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="614.71039"
-   height="205.08009"
-   viewBox="0 0 162.64213 54.260776"
-   version="1.1"
-   id="svg8"
-   inkscape:version="0.92.1 r15371"
-   sodipodi:docname="misskey.svg"
-   inkscape:export-filename="C:\Users\Takumiya_Cho\Desktop\misskey.png"
-   inkscape:export-xdpi="96"
-   inkscape:export-ydpi="96">
-  <defs
-     id="defs2">
-    <inkscape:path-effect
-       effect="simplify"
-       id="path-effect5115"
-       is_visible="true"
-       steps="1"
-       threshold="0.000408163"
-       smooth_angles="360"
-       helper_size="0"
-       simplify_individual_paths="false"
-       simplify_just_coalesce="false"
-       simplifyindividualpaths="false"
-       simplifyJustCoalesce="false" />
-    <inkscape:path-effect
-       effect="simplify"
-       id="path-effect5104"
-       is_visible="true"
-       steps="1"
-       threshold="0.000408163"
-       smooth_angles="360"
-       helper_size="0"
-       simplify_individual_paths="false"
-       simplify_just_coalesce="false"
-       simplifyindividualpaths="false"
-       simplifyJustCoalesce="false" />
-  </defs>
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="0.9899495"
-     inkscape:cx="370.82839"
-     inkscape:cy="79.043895"
-     inkscape:document-units="mm"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     units="px"
-     inkscape:snap-bbox="true"
-     inkscape:bbox-nodes="true"
-     inkscape:snap-bbox-edge-midpoints="false"
-     inkscape:snap-smooth-nodes="true"
-     inkscape:snap-center="true"
-     inkscape:snap-page="true"
-     inkscape:window-width="1920"
-     inkscape:window-height="1017"
-     inkscape:window-x="-8"
-     inkscape:window-y="1072"
-     inkscape:window-maximized="1"
-     inkscape:object-paths="true"
-     inkscape:bbox-paths="true"
-     fit-margin-top="50"
-     fit-margin-left="50"
-     fit-margin-bottom="20"
-     fit-margin-right="50" />
-  <metadata
-     id="metadata5">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="レイヤー 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-11.097531,-173.29664)">
-    <g
-       transform="matrix(0.28612302,0,0,0.28612302,17.176981,141.74334)"
-       id="text4489-6"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:141.03404236px;line-height:476.69509888px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#212d3a;fill-opacity:1;stroke:none;stroke-width:0.92471898px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       aria-label="Mi">
-      <path
-         sodipodi:nodetypes="zccssscssccscczzzccsccsscscsccz"
-         inkscape:connector-curvature="0"
-         id="path5210"
-         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#212d3a;fill-opacity:1;stroke-width:0.92471898px"
-         d="m 75.196381,231.17126 c -5.855419,0.0202 -10.885068,-3.50766 -13.2572,-7.61584 -1.266603,-1.79454 -3.772419,-2.43291 -3.807919,0 v 11.2332 c 0,4.51309 -1.645397,8.41504 -4.936191,11.70583 -3.196772,3.19677 -7.098714,4.79516 -11.705826,4.79516 -4.513089,0 -8.415031,-1.59839 -11.705825,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -61.7729 c 0,-3.47884 0.987238,-6.6286 2.961715,-9.44928 2.068499,-2.91471 4.701135,-4.9362 7.897906,-6.06447 1.786431,-0.65816 3.666885,-0.98724 5.641362,-0.98724 5.077225,0 9.308247,1.97448 12.693064,5.92343 1.786431,1.97448 2.820681,3.00873 3.102749,3.10275 0,0 13.408119,16.21319 13.78421,16.49526 0.376091,0.28206 1.480789,2.43848 4.127113,2.43848 2.646324,0 3.89218,-2.15642 4.26827,-2.43848 0.376091,-0.28207 13.784088,-16.49526 13.784088,-16.49526 0.09402,0.094 1.081261,-0.94022 2.961715,-3.10275 3.478837,-3.94895 7.756866,-5.92343 12.834096,-5.92343 1.88045,0 3.76091,0.32908 5.64136,0.98724 3.19677,1.12827 5.7824,3.14976 7.75688,6.06447 2.06849,2.82068 3.10274,5.97044 3.10274,9.44928 v 61.7729 c 0,4.51309 -1.6454,8.41504 -4.93619,11.70583 -3.19677,3.19677 -7.09871,4.79516 -11.70582,4.79516 -4.51309,0 -8.41504,-1.59839 -11.705828,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -11.2332 c -0.277898,-3.06563 -2.987588,-1.13379 -3.948953,0 -2.538613,4.70114 -7.401781,7.59567 -13.2572,7.61584 z" />
-      <path
-         inkscape:connector-curvature="0"
-         id="path5212"
-         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#212d3a;fill-opacity:1;stroke-width:0.92471898px"
-         d="m 145.83461,185.00361 q -5.92343,0 -10.15445,-4.08999 -4.08999,-4.23102 -4.08999,-10.15445 0,-5.92343 4.08999,-10.01342 4.23102,-4.23102 10.15445,-4.23102 5.92343,0 10.15445,4.23102 4.23102,4.08999 4.23102,10.01342 0,5.92343 -4.23102,10.15445 -4.23102,4.08999 -10.15445,4.08999 z m 0.14103,2.82068 q 5.92343,0 10.01342,4.23102 4.23102,4.23102 4.23102,10.15445 v 34.83541 q 0,5.92343 -4.23102,10.15445 -4.08999,4.08999 -10.01342,4.08999 -5.92343,0 -10.15445,-4.08999 -4.23102,-4.23102 -4.23102,-10.15445 v -34.83541 q 0,-5.92343 4.23102,-10.15445 4.23102,-4.23102 10.15445,-4.23102 z" />
-    </g>
-    <path
-       inkscape:connector-curvature="0"
-       id="path5199"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#212d3a;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 72.022691,200.53715 q 0.968125,0.24203 2.420312,0.5244 2.420313,0.40339 3.791824,1.29083 2.581666,1.69422 2.581666,5.08266 0,2.74302 -1.815234,4.47758 -2.097604,2.01693 -5.849089,2.01693 -2.743021,0 -6.131458,-0.76644 -1.089141,-0.24203 -1.774896,-1.08914 -0.645417,-0.84711 -0.645417,-1.89591 0,-1.29083 0.887448,-2.17828 0.927786,-0.92779 2.178281,-0.92779 0.363047,0 0.685756,0.0807 1.169817,0.24203 4.477578,0.60508 0.443724,0 0.968125,-0.0403 0.201693,0 0.201693,-0.24203 0.04034,-0.20169 -0.242032,-0.28237 -1.37151,-0.24203 -2.541328,-0.5244 -1.331172,-0.28237 -1.895911,-0.48406 -1.12948,-0.32271 -1.895912,-0.84711 -2.581667,-1.69422 -2.622005,-5.08266 0,-2.70268 1.855573,-4.47758 2.258958,-2.17828 6.413828,-1.97659 2.783359,0.12102 5.566719,0.7261 1.048802,0.24203 1.734557,1.08914 0.685756,0.84711 0.685756,1.93625 0,1.25049 -0.927787,2.17828 -0.887448,0.88745 -2.178281,0.88745 -0.322709,0 -0.645417,-0.0807 -1.169818,-0.24203 -4.517917,-0.56474 -0.403385,-0.0403 -0.766432,0 -0.322708,0.0403 -0.322708,0.24203 0.04034,0.24203 0.322708,0.32271 z" />
-    <path
-       inkscape:connector-curvature="0"
-       id="path5201"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#212d3a;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 89.577027,200.53715 q 0.968125,0.24203 2.420312,0.5244 2.420313,0.40339 3.791823,1.29083 2.581667,1.69422 2.581667,5.08266 0,2.74302 -1.815234,4.47758 -2.097604,2.01693 -5.849089,2.01693 -2.743021,0 -6.131458,-0.76644 -1.089141,-0.24203 -1.774896,-1.08914 -0.645417,-0.84711 -0.645417,-1.89591 0,-1.29083 0.887448,-2.17828 0.927786,-0.92779 2.178281,-0.92779 0.363047,0 0.685755,0.0807 1.169818,0.24203 4.477579,0.60508 0.443724,0 0.968125,-0.0403 0.201692,0 0.201692,-0.24203 0.04034,-0.20169 -0.242031,-0.28237 -1.37151,-0.24203 -2.541328,-0.5244 -1.331172,-0.28237 -1.895912,-0.48406 -1.129479,-0.32271 -1.895911,-0.84711 -2.581667,-1.69422 -2.622005,-5.08266 0,-2.70268 1.855573,-4.47758 2.258958,-2.17828 6.413828,-1.97659 2.783359,0.12102 5.566719,0.7261 1.048802,0.24203 1.734557,1.08914 0.685755,0.84711 0.685755,1.93625 0,1.25049 -0.927786,2.17828 -0.887448,0.88745 -2.178281,0.88745 -0.322709,0 -0.645417,-0.0807 -1.169818,-0.24203 -4.517917,-0.56474 -0.403385,-0.0403 -0.766432,0 -0.322708,0.0403 -0.322708,0.24203 0.04034,0.24203 0.322708,0.32271 z" />
-    <path
-       inkscape:connector-curvature="0"
-       id="path5203"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#212d3a;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 115.65209,203.87137 q 0.12101,0.0807 2.86404,2.78336 1.25049,1.21016 1.25049,2.94471 0,1.61354 -1.16982,2.86404 -1.16982,1.21016 -2.90437,1.21016 -1.65388,0 -2.86404,-1.16982 l -4.03385,-3.91284 q -0.16136,-0.12102 -0.32271,-0.12102 -0.32271,0 -0.32271,1.21016 0,1.69422 -1.21016,2.90438 -1.21015,1.16981 -2.90437,1.16981 -1.69422,0 -2.90438,-1.16981 -1.169807,-1.21016 -1.169807,-2.90438 v -18.79776 q 0,-1.69422 1.169807,-2.86404 1.21016,-1.21015 2.90438,-1.21015 1.69422,0 2.90437,1.21015 1.21016,1.16982 1.21016,2.86404 v 6.29281 q 0,0.40339 0.28237,0.5244 0.24203,0.12102 0.5244,-0.0807 0.16135,-0.0807 4.84063,-3.18675 1.0488,-0.64542 2.25895,-0.64542 2.21862,0 3.42878,1.81524 0.64542,1.0488 0.64542,2.25896 0,2.21862 -1.81524,3.42877 l -2.54133,1.61354 v 0.0403 l -0.0807,0.0403 q -0.56474,0.36305 -0.0403,0.88745 z" />
-    <path
-       inkscape:connector-curvature="0"
-       id="path5205"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#212d3a;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 131.25181,213.92955 q -4.19521,0 -7.18026,-2.94472 -2.94472,-2.98505 -2.94472,-7.18026 0,-4.15487 2.94472,-7.09958 2.98505,-2.98505 7.18026,-2.98505 4.15487,0 6.97857,2.78335 0.92778,0.92779 0.92778,2.25896 0,1.33118 -0.92778,2.25896 l -4.67928,4.63893 q -1.00846,1.00847 -2.01692,1.00847 -1.45219,0 -2.25896,-0.80677 -0.80677,-0.80677 -0.80677,-2.13795 0,-1.29083 0.92778,-2.21862 l 0.80678,-0.84711 q 0.16135,-0.12101 0.0807,-0.24203 -0.12101,-0.0807 -0.32271,-0.0403 -0.80677,0.20169 -1.37151,0.80677 -1.12948,1.08914 -1.12948,2.622 0,1.5732 1.08915,2.70268 1.12947,1.08914 2.70268,1.08914 1.53286,0 2.622,-1.12947 0.92779,-0.92779 2.25896,-0.92779 1.33117,0 2.25896,0.92779 0.92779,0.92778 0.92779,2.25895 0,1.33118 -0.92779,2.25896 -2.98505,2.94472 -7.13992,2.94472 z" />
-    <path
-       inkscape:connector-curvature="0"
-       id="path5207"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#212d3a;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 160.51049,198.1433 v 5.60705 q 0,0.56474 -0.0807,1.21016 v 7.38195 q 0,4.51792 -2.74302,7.2206 -2.70268,2.70269 -7.30128,2.70269 -2.66234,0 -4.80028,-1.00847 -2.13795,-0.96812 -2.13795,-3.3481 0,-0.80677 0.36305,-1.53286 0.96812,-2.17828 3.3481,-2.17828 0.56474,0 1.5732,0.32271 1.00847,0.3227 1.65388,0.3227 1.69422,0 2.21862,-0.72609 0.20169,-0.28237 0.0807,-0.44372 -0.16136,-0.24204 -0.56474,-0.16136 -0.68576,0.12102 -1.49253,0.12102 -4.07419,0 -6.97856,-2.90438 -2.90438,-2.90437 -2.90438,-6.97857 v -5.60705 q 0,-1.69422 1.16982,-2.86404 1.21015,-1.21016 2.90437,-1.21016 1.69422,0 2.90438,1.21016 1.21015,1.16982 1.21015,2.86404 v 5.60705 q 0,0.68576 0.48407,1.21016 0.5244,0.48406 1.21015,0.48406 0.7261,0 1.21016,-0.48406 0.48406,-0.5244 0.48406,-1.21016 v -5.60705 q 0,-1.69422 1.21016,-2.86404 1.21015,-1.21016 2.90437,-1.21016 1.69422,0 2.86404,1.21016 1.21016,1.16982 1.21016,2.86404 z" />
-  </g>
-</svg>
diff --git a/src/client/assets/title.dark.svg b/src/client/assets/title.svg
similarity index 92%
rename from src/client/assets/title.dark.svg
rename to src/client/assets/title.svg
index 10139024ad..0e4e0b8b3b 100644
--- a/src/client/assets/title.dark.svg
+++ b/src/client/assets/title.svg
@@ -97,44 +97,44 @@
     <g
        transform="matrix(0.28612302,0,0,0.28612302,17.176981,141.74334)"
        id="text4489-6"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:141.03404236px;line-height:476.69509888px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#fff;fill-opacity:1;stroke:none;stroke-width:0.92471898px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:141.03404236px;line-height:476.69509888px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.92471898px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
        aria-label="Mi">
       <path
          sodipodi:nodetypes="zccssscssccscczzzccsccsscscsccz"
          inkscape:connector-curvature="0"
          id="path5210"
-         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#fff;fill-opacity:1;stroke-width:0.92471898px"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill-opacity:1;stroke-width:0.92471898px"
          d="m 75.196381,231.17126 c -5.855419,0.0202 -10.885068,-3.50766 -13.2572,-7.61584 -1.266603,-1.79454 -3.772419,-2.43291 -3.807919,0 v 11.2332 c 0,4.51309 -1.645397,8.41504 -4.936191,11.70583 -3.196772,3.19677 -7.098714,4.79516 -11.705826,4.79516 -4.513089,0 -8.415031,-1.59839 -11.705825,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -61.7729 c 0,-3.47884 0.987238,-6.6286 2.961715,-9.44928 2.068499,-2.91471 4.701135,-4.9362 7.897906,-6.06447 1.786431,-0.65816 3.666885,-0.98724 5.641362,-0.98724 5.077225,0 9.308247,1.97448 12.693064,5.92343 1.786431,1.97448 2.820681,3.00873 3.102749,3.10275 0,0 13.408119,16.21319 13.78421,16.49526 0.376091,0.28206 1.480789,2.43848 4.127113,2.43848 2.646324,0 3.89218,-2.15642 4.26827,-2.43848 0.376091,-0.28207 13.784088,-16.49526 13.784088,-16.49526 0.09402,0.094 1.081261,-0.94022 2.961715,-3.10275 3.478837,-3.94895 7.756866,-5.92343 12.834096,-5.92343 1.88045,0 3.76091,0.32908 5.64136,0.98724 3.19677,1.12827 5.7824,3.14976 7.75688,6.06447 2.06849,2.82068 3.10274,5.97044 3.10274,9.44928 v 61.7729 c 0,4.51309 -1.6454,8.41504 -4.93619,11.70583 -3.19677,3.19677 -7.09871,4.79516 -11.70582,4.79516 -4.51309,0 -8.41504,-1.59839 -11.705828,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -11.2332 c -0.277898,-3.06563 -2.987588,-1.13379 -3.948953,0 -2.538613,4.70114 -7.401781,7.59567 -13.2572,7.61584 z" />
       <path
          inkscape:connector-curvature="0"
          id="path5212"
-         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#fff;fill-opacity:1;stroke-width:0.92471898px"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill-opacity:1;stroke-width:0.92471898px"
          d="m 145.83461,185.00361 q -5.92343,0 -10.15445,-4.08999 -4.08999,-4.23102 -4.08999,-10.15445 0,-5.92343 4.08999,-10.01342 4.23102,-4.23102 10.15445,-4.23102 5.92343,0 10.15445,4.23102 4.23102,4.08999 4.23102,10.01342 0,5.92343 -4.23102,10.15445 -4.23102,4.08999 -10.15445,4.08999 z m 0.14103,2.82068 q 5.92343,0 10.01342,4.23102 4.23102,4.23102 4.23102,10.15445 v 34.83541 q 0,5.92343 -4.23102,10.15445 -4.08999,4.08999 -10.01342,4.08999 -5.92343,0 -10.15445,-4.08999 -4.23102,-4.23102 -4.23102,-10.15445 v -34.83541 q 0,-5.92343 4.23102,-10.15445 4.23102,-4.23102 10.15445,-4.23102 z" />
     </g>
     <path
        inkscape:connector-curvature="0"
        id="path5199"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#fff;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
        d="m 72.022691,200.53715 q 0.968125,0.24203 2.420312,0.5244 2.420313,0.40339 3.791824,1.29083 2.581666,1.69422 2.581666,5.08266 0,2.74302 -1.815234,4.47758 -2.097604,2.01693 -5.849089,2.01693 -2.743021,0 -6.131458,-0.76644 -1.089141,-0.24203 -1.774896,-1.08914 -0.645417,-0.84711 -0.645417,-1.89591 0,-1.29083 0.887448,-2.17828 0.927786,-0.92779 2.178281,-0.92779 0.363047,0 0.685756,0.0807 1.169817,0.24203 4.477578,0.60508 0.443724,0 0.968125,-0.0403 0.201693,0 0.201693,-0.24203 0.04034,-0.20169 -0.242032,-0.28237 -1.37151,-0.24203 -2.541328,-0.5244 -1.331172,-0.28237 -1.895911,-0.48406 -1.12948,-0.32271 -1.895912,-0.84711 -2.581667,-1.69422 -2.622005,-5.08266 0,-2.70268 1.855573,-4.47758 2.258958,-2.17828 6.413828,-1.97659 2.783359,0.12102 5.566719,0.7261 1.048802,0.24203 1.734557,1.08914 0.685756,0.84711 0.685756,1.93625 0,1.25049 -0.927787,2.17828 -0.887448,0.88745 -2.178281,0.88745 -0.322709,0 -0.645417,-0.0807 -1.169818,-0.24203 -4.517917,-0.56474 -0.403385,-0.0403 -0.766432,0 -0.322708,0.0403 -0.322708,0.24203 0.04034,0.24203 0.322708,0.32271 z" />
     <path
        inkscape:connector-curvature="0"
        id="path5201"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#fff;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
        d="m 89.577027,200.53715 q 0.968125,0.24203 2.420312,0.5244 2.420313,0.40339 3.791823,1.29083 2.581667,1.69422 2.581667,5.08266 0,2.74302 -1.815234,4.47758 -2.097604,2.01693 -5.849089,2.01693 -2.743021,0 -6.131458,-0.76644 -1.089141,-0.24203 -1.774896,-1.08914 -0.645417,-0.84711 -0.645417,-1.89591 0,-1.29083 0.887448,-2.17828 0.927786,-0.92779 2.178281,-0.92779 0.363047,0 0.685755,0.0807 1.169818,0.24203 4.477579,0.60508 0.443724,0 0.968125,-0.0403 0.201692,0 0.201692,-0.24203 0.04034,-0.20169 -0.242031,-0.28237 -1.37151,-0.24203 -2.541328,-0.5244 -1.331172,-0.28237 -1.895912,-0.48406 -1.129479,-0.32271 -1.895911,-0.84711 -2.581667,-1.69422 -2.622005,-5.08266 0,-2.70268 1.855573,-4.47758 2.258958,-2.17828 6.413828,-1.97659 2.783359,0.12102 5.566719,0.7261 1.048802,0.24203 1.734557,1.08914 0.685755,0.84711 0.685755,1.93625 0,1.25049 -0.927786,2.17828 -0.887448,0.88745 -2.178281,0.88745 -0.322709,0 -0.645417,-0.0807 -1.169818,-0.24203 -4.517917,-0.56474 -0.403385,-0.0403 -0.766432,0 -0.322708,0.0403 -0.322708,0.24203 0.04034,0.24203 0.322708,0.32271 z" />
     <path
        inkscape:connector-curvature="0"
        id="path5203"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#fff;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
        d="m 115.65209,203.87137 q 0.12101,0.0807 2.86404,2.78336 1.25049,1.21016 1.25049,2.94471 0,1.61354 -1.16982,2.86404 -1.16982,1.21016 -2.90437,1.21016 -1.65388,0 -2.86404,-1.16982 l -4.03385,-3.91284 q -0.16136,-0.12102 -0.32271,-0.12102 -0.32271,0 -0.32271,1.21016 0,1.69422 -1.21016,2.90438 -1.21015,1.16981 -2.90437,1.16981 -1.69422,0 -2.90438,-1.16981 -1.169807,-1.21016 -1.169807,-2.90438 v -18.79776 q 0,-1.69422 1.169807,-2.86404 1.21016,-1.21015 2.90438,-1.21015 1.69422,0 2.90437,1.21015 1.21016,1.16982 1.21016,2.86404 v 6.29281 q 0,0.40339 0.28237,0.5244 0.24203,0.12102 0.5244,-0.0807 0.16135,-0.0807 4.84063,-3.18675 1.0488,-0.64542 2.25895,-0.64542 2.21862,0 3.42878,1.81524 0.64542,1.0488 0.64542,2.25896 0,2.21862 -1.81524,3.42877 l -2.54133,1.61354 v 0.0403 l -0.0807,0.0403 q -0.56474,0.36305 -0.0403,0.88745 z" />
     <path
        inkscape:connector-curvature="0"
        id="path5205"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#fff;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
        d="m 131.25181,213.92955 q -4.19521,0 -7.18026,-2.94472 -2.94472,-2.98505 -2.94472,-7.18026 0,-4.15487 2.94472,-7.09958 2.98505,-2.98505 7.18026,-2.98505 4.15487,0 6.97857,2.78335 0.92778,0.92779 0.92778,2.25896 0,1.33118 -0.92778,2.25896 l -4.67928,4.63893 q -1.00846,1.00847 -2.01692,1.00847 -1.45219,0 -2.25896,-0.80677 -0.80677,-0.80677 -0.80677,-2.13795 0,-1.29083 0.92778,-2.21862 l 0.80678,-0.84711 q 0.16135,-0.12101 0.0807,-0.24203 -0.12101,-0.0807 -0.32271,-0.0403 -0.80677,0.20169 -1.37151,0.80677 -1.12948,1.08914 -1.12948,2.622 0,1.5732 1.08915,2.70268 1.12947,1.08914 2.70268,1.08914 1.53286,0 2.622,-1.12947 0.92779,-0.92779 2.25896,-0.92779 1.33117,0 2.25896,0.92779 0.92779,0.92778 0.92779,2.25895 0,1.33118 -0.92779,2.25896 -2.98505,2.94472 -7.13992,2.94472 z" />
     <path
        inkscape:connector-curvature="0"
        id="path5207"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#fff;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
        d="m 160.51049,198.1433 v 5.60705 q 0,0.56474 -0.0807,1.21016 v 7.38195 q 0,4.51792 -2.74302,7.2206 -2.70268,2.70269 -7.30128,2.70269 -2.66234,0 -4.80028,-1.00847 -2.13795,-0.96812 -2.13795,-3.3481 0,-0.80677 0.36305,-1.53286 0.96812,-2.17828 3.3481,-2.17828 0.56474,0 1.5732,0.32271 1.00847,0.3227 1.65388,0.3227 1.69422,0 2.21862,-0.72609 0.20169,-0.28237 0.0807,-0.44372 -0.16136,-0.24204 -0.56474,-0.16136 -0.68576,0.12102 -1.49253,0.12102 -4.07419,0 -6.97856,-2.90438 -2.90438,-2.90437 -2.90438,-6.97857 v -5.60705 q 0,-1.69422 1.16982,-2.86404 1.21015,-1.21016 2.90437,-1.21016 1.69422,0 2.90438,1.21016 1.21015,1.16982 1.21015,2.86404 v 5.60705 q 0,0.68576 0.48407,1.21016 0.5244,0.48406 1.21015,0.48406 0.7261,0 1.21016,-0.48406 0.48406,-0.5244 0.48406,-1.21016 v -5.60705 q 0,-1.69422 1.21016,-2.86404 1.21015,-1.21016 2.90437,-1.21016 1.69422,0 2.86404,1.21016 1.21016,1.16982 1.21016,2.86404 z" />
   </g>
 </svg>
diff --git a/webpack.config.ts b/webpack.config.ts
index 3822080574..3b14ee4a8a 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -134,6 +134,8 @@ module.exports = {
 						preserveWhitespace: false
 					}
 				}
+			}, {
+				loader: 'vue-svg-inline-loader'
 			}, {
 				loader: 'replace',
 				query: {

From f4bf824e79af6d8d7fb8fbb33f600f5ddb322a03 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 00:51:17 +0900
Subject: [PATCH 40/72] wip

---
 src/client/app/desktop/views/pages/welcome.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index f8f49bf997..65651f7ffc 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -95,7 +95,7 @@
 		</div>
 	</main>
 
-	<modal name="about" :class="$store.state.device.darkmode ? ['about', 'modal-dark'] : ['about', 'modal-light']" width="800px" height="auto" scrollable>
+	<modal name="about" class="about modal" width="800px" height="auto" scrollable>
 		<article class="fpdezooorhntlzyeszemrsqdlgbysvxq">
 			<h1>%i18n:common.intro.title%</h1>
 			<p v-html="'%i18n:common.intro.about%'"></p>
@@ -258,7 +258,7 @@ export default Vue.extend({
 
 	> section
 		> h2
-			border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
+			border-bottom 1px solid var(--faceDivider)
 
 		> section
 			display grid
@@ -267,7 +267,7 @@ export default Vue.extend({
 			gap 32px
 			margin-bottom 32px
 			padding-bottom 32px
-			border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
+			border-bottom 1px solid var(--faceDivider)
 
 			&:nth-child(odd)
 				grid-template-columns 1fr 180px

From d1dce76e2814012f7350563f23834c77d6da18ad Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 01:05:09 +0900
Subject: [PATCH 41/72] wip

---
 src/client/app/mobile/style.styl              | 10 +-----
 .../app/mobile/views/components/ui.nav.vue    |  4 +--
 src/client/app/mobile/views/pages/welcome.vue | 31 ++++++++++---------
 src/client/theme/dark.json                    |  2 ++
 src/client/theme/light.json                   |  2 ++
 5 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/src/client/app/mobile/style.styl b/src/client/app/mobile/style.styl
index df8f4a8fae..095e5266fd 100644
--- a/src/client/app/mobile/style.styl
+++ b/src/client/app/mobile/style.styl
@@ -8,12 +8,4 @@
 
 html
 	height 100%
-	background #ececed !important
-
-	&[data-darkmode]
-		background #191B22 !important
-
-body
-	display flex
-	flex-direction column
-	min-height 100%
+	background var(--bg)
diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index 29dcf18021..a84dc7349a 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -226,8 +226,8 @@ root(isDark)
 
 	.announcements
 		> article
-			background isDark ? rgba(30, 129, 216, 0.2) : rgba(155, 196, 232, 0.2)
-			color isDark ? #fff : #3f4967
+			background var(--mobileAnnouncement)
+			color var(--mobileAnnouncementFg)
 			padding 16px
 			margin 8px 0
 			font-size 12px
diff --git a/src/client/app/mobile/views/pages/welcome.vue b/src/client/app/mobile/views/pages/welcome.vue
index 82ccfeaff5..4e24f70ffc 100644
--- a/src/client/app/mobile/views/pages/welcome.vue
+++ b/src/client/app/mobile/views/pages/welcome.vue
@@ -3,7 +3,7 @@
 	<div class="banner" :style="{ backgroundImage: banner ? `url(${banner})` : null }"></div>
 
 	<div>
-		<img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" :alt="name">
+		<img svg-inline src="../../../../assets/title.svg" :alt="name">
 		<p class="host">{{ host }}</p>
 		<div class="about">
 			<h2>{{ name }}</h2>
@@ -144,16 +144,17 @@ root(isDark)
 			left 0
 			width 100%
 			height 100px
-			background linear-gradient(transparent, isDark ? #191b22 : #f7f7f7)
+			background linear-gradient(transparent, var(--bg))
 
 	> div:not(.banner)
 		padding 32px
 		margin 0 auto
 		max-width 500px
 
-		> img
+		> svg
 			display block
-			max-width 200px
+			width 200px
+			height 50px
 			margin 0 auto
 
 		> .host
@@ -169,8 +170,8 @@ root(isDark)
 		> .about
 			margin-top 16px
 			padding 16px
-			color #555
-			background #fff
+			color var(--text)
+			background var(--face)
 			border-radius 6px
 
 			> h2
@@ -238,7 +239,7 @@ root(isDark)
 			margin 16px 0
 			padding 8px
 			font-size 14px
-			color #444
+			color var(--text)
 			background rgba(#000, 0.1)
 			border-radius 6px
 
@@ -249,9 +250,9 @@ root(isDark)
 			margin 16px 0
 
 			> article
-				background isDark ? rgba(30, 129, 216, 0.2) : rgba(155, 196, 232, 0.2)
+				background var(--mobileAnnouncement)
 				border-radius 6px
-				color isDark ? #fff : #3f4967
+				color var(--mobileAnnouncementFg)
 				padding 16px
 				margin 8px 0
 				font-size 12px
@@ -263,10 +264,10 @@ root(isDark)
 			margin 16px 0
 			padding 32px
 			font-size 14px
-			background #fff
+			background var(--face)
 			border-radius 6px
 			overflow hidden
-			color #3a3e46
+			color var(--text)
 
 			> h1
 				margin 0
@@ -279,12 +280,12 @@ root(isDark)
 
 			> section
 				> h2
-					border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
+					border-bottom 1px solid var(--faceDivider)
 
 				> section
 					margin-bottom 16px
 					padding-bottom 16px
-					border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
+					border-bottom 1px solid var(--faceDivider)
 
 					> h3
 						margin-bottom 8px
@@ -301,7 +302,7 @@ root(isDark)
 
 		> .info
 			padding 16px 0
-			border solid 2px #ddd
+			border solid 2px rgba(0, 0, 0, 0.1)
 			border-radius 8px
 
 			> *
@@ -309,7 +310,7 @@ root(isDark)
 
 		> footer
 			text-align center
-			color #444
+			color var(--text)
 
 			> small
 				display block
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index d79e348b07..3074eb22ae 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -120,6 +120,8 @@
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":lighten<10<$text",
 
+	"mobileAnnouncement": "rgba(30, 129, 216, 0.2)",
+	"mobileAnnouncementFg": "#fff",
 	"mobileSignedInAsBg": "#273c34",
 	"mobileSignedInAsFg": "#49ab63",
 	"mobileSignoutBg": "#652222",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 7d15d49ae7..9f41ee8f22 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -120,6 +120,8 @@
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":darken<10<$text",
 
+	"mobileAnnouncement": "rgba(155, 196, 232, 0.2)",
+	"mobileAnnouncementFg": "#3f4967",
 	"mobileSignedInAsBg": "#fcfff5",
 	"mobileSignedInAsFg": "#2c662d",
 	"mobileSignoutBg": "#fff6f5",

From 9ea7de3564caa063ee9549ae808ea731379e2516 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 10:14:58 +0900
Subject: [PATCH 42/72] wip

---
 .../app/common/views/components/media-banner.vue |  9 ++-------
 .../common/views/components/welcome-timeline.vue | 16 +++++-----------
 src/client/theme/dark.json                       | 11 +++++++----
 src/client/theme/halloween.json                  |  3 +--
 src/client/theme/light.json                      | 11 +++++++----
 5 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/src/client/app/common/views/components/media-banner.vue b/src/client/app/common/views/components/media-banner.vue
index 211dbf0208..0f5981d3c4 100644
--- a/src/client/app/common/views/components/media-banner.vue
+++ b/src/client/app/common/views/components/media-banner.vue
@@ -43,7 +43,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-media-banner
 	width 100%
 	border-radius 4px
 	margin-top 4px
@@ -71,7 +71,7 @@ root(isDark)
 			font-size 1.6em
 
 	> .download
-		background isDark ? #21242d : #f7f7f7
+		background var(--noteAttachedFile)
 
 	> .sensitive
 		background #111
@@ -82,9 +82,4 @@ root(isDark)
 			display block
 			width 100%
 
-.mk-media-banner[data-darkmode]
-	root(true)
-
-.mk-media-banner:not([data-darkmode])
-	root(false)
 </style>
diff --git a/src/client/app/common/views/components/welcome-timeline.vue b/src/client/app/common/views/components/welcome-timeline.vue
index ca1b6eb928..6934fb4856 100644
--- a/src/client/app/common/views/components/welcome-timeline.vue
+++ b/src/client/app/common/views/components/welcome-timeline.vue
@@ -90,7 +90,7 @@ export default Vue.extend({
 	opacity 0
 	transform translateY(-30px)
 
-root(isDark)
+.mk-welcome-timeline
 	background var(--face)
 
 	> div
@@ -101,8 +101,8 @@ root(isDark)
 			padding 16px
 			overflow-wrap break-word
 			font-size .9em
-			color isDark ? #fff : #4C4C4C
-			border-bottom 1px solid isDark ? rgba(#000, 0.1) : rgba(#000, 0.05)
+			color var(--noteText)
+			border-bottom 1px solid var(--faceDivider)
 
 			&:after
 				content ""
@@ -141,22 +141,16 @@ root(isDark)
 
 					> .username
 						margin 0 .5em 0 0
-						color isDark ? #606984 : #ccc
+						color var(--noteHeaderAcct)
 
 					> .info
 						margin-left auto
 						font-size 0.9em
 
 						> .created-at
-							color isDark ? #606984 : #c0c0c0
+							color var(--noteHeaderInfo)
 
 				> .text
 					text-align left
 
-.mk-welcome-timeline[data-darkmode]
-	root(true)
-
-.mk-welcome-timeline:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 3074eb22ae..498c9ecdd9 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -29,6 +29,7 @@
 	"faceClearButtonActive": "rgba(0, 0, 0, 0.2)",
 	"popupBg": ":lighten<5<$secondary",
 	"popupFg": "#d6dce2",
+
 	"subNoteBg": "rgba(0, 0, 0, 0.18)",
 	"renoteGradient": "#314027",
 	"renoteText": "#9dbb00",
@@ -49,10 +50,12 @@
 	"noteActionsReactionHover": "#fa0",
 	"noteActionsHighlighted": "#707b97",
 
+	"noteAttachedFile": "rgba(255, 255, 255, 0.1)",
+
 	"modalBackdrop": "rgba(0, 0, 0, 0.5)",
 
-	"dateDividerBg": "#242731",
-	"dateDividerFg": "#666b79",
+	"dateDividerBg": ":darken<2<$secondary",
+	"dateDividerFg": ":alpha<0.7<$text",
 
 	"switchTrack": "rgba(255, 255, 255, 0.15)",
 	"inputBorder": "rgba(255, 255, 255, 0.7)",
@@ -103,8 +106,8 @@
 	"messagingRoomMessageBg": "$secondary",
 	"messagingRoomMessageFg": "#fff",
 
-	"desktopHeaderBg": "#313543",
-	"desktopHeaderFg": "#b8c5ca",
+	"desktopHeaderBg": ":lighten<5<$secondary",
+	"desktopHeaderFg": "$text",
 	"desktopHeaderHoverFg": "#fff",
 	"desktopHeaderIcon": "url('/assets/desktop/header-icon.dark.svg')",
 	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.1)",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index 1bd00357e2..6e92db95ff 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -14,6 +14,5 @@
 
 	"renoteGradient": "#5d2d1a",
 	"renoteText": "#ff6c00",
-	"quoteBorder": "#c3631c",
-	"desktopHeaderBg": "#36314e"
+	"quoteBorder": "#c3631c"
 }
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 9f41ee8f22..d05ee995f6 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -29,6 +29,7 @@
 	"faceClearButtonActive": "rgba(0, 0, 0, 0.05)",
 	"popupBg": ":lighten<5<$secondary",
 	"popupFg": "#586069",
+
 	"subNoteBg": "rgba(0, 0, 0, 0.01)",
 	"renoteGradient": "#edfde2",
 	"renoteText": "#9dbb00",
@@ -49,10 +50,12 @@
 	"noteActionsReactionHover": "#fa0",
 	"noteActionsHighlighted": "#888",
 
+	"noteAttachedFile": "rgba(0, 0, 0, 0.05)",
+
 	"modalBackdrop": "rgba(0, 0, 0, 0.1)",
 
-	"dateDividerBg": "#fdfdfd",
-	"dateDividerFg": "#aaa",
+	"dateDividerBg": ":darken<2<$secondary",
+	"dateDividerFg": ":alpha<0.7<$text",
 
 	"switchTrack": "rgba(0, 0, 0, 0.25)",
 	"inputBorder": "rgba(0, 0, 0, 0.42)",
@@ -103,8 +106,8 @@
 	"messagingRoomMessageBg": "#eee",
 	"messagingRoomMessageFg": "#333",
 
-	"desktopHeaderBg": "#f7f7f7",
-	"desktopHeaderFg": "#9eaba8",
+	"desktopHeaderBg": ":lighten<5<$secondary",
+	"desktopHeaderFg": "$text",
 	"desktopHeaderHoverFg": "#7b8c88",
 	"desktopHeaderIcon": "url('/assets/desktop/header-icon.light.svg')",
 	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)",

From 18be0d36f34138b0a60c39609a649b98367e1356 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 10:50:59 +0900
Subject: [PATCH 43/72] wip

---
 src/client/theme/dark.json  | 8 +++++---
 src/client/theme/light.json | 2 ++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 498c9ecdd9..8a39648037 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -14,9 +14,11 @@
 	"primaryForeground": "#fff",
 	"bg": ":darken<8<$secondary",
 	"text": "$text",
-	"scrollbarTrack": "#282c37",
-	"scrollbarHandle": "#454954",
-	"scrollbarHandleHover": "#535660",
+
+	"scrollbarTrack": ":darken<5<$secondary",
+	"scrollbarHandle": ":lighten<5<$secondary",
+	"scrollbarHandleHover": ":lighten<10<$secondary",
+
 	"face": "$secondary",
 	"faceText": "#fff",
 	"faceHeader": ":lighten<5<$secondary",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index d05ee995f6..f5003ae2ec 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -14,9 +14,11 @@
 	"primaryForeground": "#fff",
 	"bg": ":darken<8<$secondary",
 	"text": "$text",
+
 	"scrollbarTrack": "#fff",
 	"scrollbarHandle": "#00000033",
 	"scrollbarHandleHover": "#00000066",
+
 	"face": "$secondary",
 	"faceText": "#444",
 	"faceHeader": ":lighten<5<$secondary",

From fccfe19e13db9b7e22829193d3ebd2bb3cad3453 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 11:18:56 +0900
Subject: [PATCH 44/72] wip

---
 src/client/app/common/views/widgets/nav.vue   | 14 +++-----
 .../common/views/widgets/posts-monitor.vue    | 10 ++----
 src/client/app/common/views/widgets/rss.vue   | 16 +++------
 .../views/widgets/server.cpu-memory.vue       | 10 ++----
 .../views/pages/admin/admin.cpu-memory.vue    |  2 +-
 src/client/app/mobile/views/pages/user.vue    | 34 +++++++------------
 src/client/theme/dark.json                    |  9 +++++
 src/client/theme/light.json                   |  9 +++++
 8 files changed, 45 insertions(+), 59 deletions(-)

diff --git a/src/client/app/common/views/widgets/nav.vue b/src/client/app/common/views/widgets/nav.vue
index 04dfe97c72..12003db3f2 100644
--- a/src/client/app/common/views/widgets/nav.vue
+++ b/src/client/app/common/views/widgets/nav.vue
@@ -16,23 +16,17 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mkw-nav
 	.mkw-nav--body
 		padding 16px
 		font-size 12px
-		color isDark ? #9aa4b3 : #aaa
+		color var(--text)
 		background var(--face)
 
 		a
-			color isDark ? #9aa4b3 : #999
+			color var(--text)
 
 		i
-			color isDark ? #9aa4b3 : #ccc
-
-.mkw-nav[data-darkmode]
-	root(true)
-
-.mkw-nav:not([data-darkmode])
-	root(false)
+			color var(--text)
 
 </style>
diff --git a/src/client/app/common/views/widgets/posts-monitor.vue b/src/client/app/common/views/widgets/posts-monitor.vue
index 801307be54..09f766696b 100644
--- a/src/client/app/common/views/widgets/posts-monitor.vue
+++ b/src/client/app/common/views/widgets/posts-monitor.vue
@@ -173,7 +173,7 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.qpdmibaztplkylerhdbllwcokyrfxeyj
 	&.dual
 		> svg
 			width 50%
@@ -192,7 +192,7 @@ root(isDark)
 
 		> text
 			font-size 5px
-			fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
+			fill var(--chartCaption)
 
 			> tspan
 				opacity 0.5
@@ -202,10 +202,4 @@ root(isDark)
 		display block
 		clear both
 
-.qpdmibaztplkylerhdbllwcokyrfxeyj[data-darkmode]
-	root(true)
-
-.qpdmibaztplkylerhdbllwcokyrfxeyj:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/widgets/rss.vue b/src/client/app/common/views/widgets/rss.vue
index a777388cdb..448eee9fb6 100644
--- a/src/client/app/common/views/widgets/rss.vue
+++ b/src/client/app/common/views/widgets/rss.vue
@@ -65,7 +65,7 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mkw-rss
 	.mkw-rss--body
 		.feed
 			padding 12px 16px
@@ -74,8 +74,8 @@ root(isDark)
 			> a
 				display block
 				padding 4px 0
-				color isDark ? #9aa4b3 : #666
-				border-bottom dashed 1px isDark ? #1c2023 : #eee
+				color var(--text)
+				border-bottom dashed 1px var(--faceDivider)
 
 				&:last-child
 					border-bottom none
@@ -90,7 +90,7 @@ root(isDark)
 				margin-right 4px
 
 		&[data-mobile]
-			background isDark ? #21242f : #f3f3f3
+			background var(--face)
 
 			.feed
 				padding 0
@@ -100,12 +100,6 @@ root(isDark)
 					border-bottom none
 
 					&:nth-child(even)
-						background isDark ? rgba(#000, 0.05) : rgba(#fff, 0.7)
-
-.mkw-rss[data-darkmode]
-	root(true)
-
-.mkw-rss:not([data-darkmode])
-	root(false)
+						background rgba(#000, 0.05)
 
 </style>
diff --git a/src/client/app/common/views/widgets/server.cpu-memory.vue b/src/client/app/common/views/widgets/server.cpu-memory.vue
index b0421d6150..55aa1ea895 100644
--- a/src/client/app/common/views/widgets/server.cpu-memory.vue
+++ b/src/client/app/common/views/widgets/server.cpu-memory.vue
@@ -129,7 +129,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.cpu-memory
 	> svg
 		display block
 		padding 10px
@@ -144,7 +144,7 @@ root(isDark)
 
 		> text
 			font-size 5px
-			fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
+			fill var(--chartCaption)
 
 			> tspan
 				opacity 0.5
@@ -154,10 +154,4 @@ root(isDark)
 		display block
 		clear both
 
-.cpu-memory[data-darkmode]
-	root(true)
-
-.cpu-memory:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue b/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue
index d14ce12553..ebaa11478d 100644
--- a/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue
@@ -125,7 +125,7 @@ root(isDark)
 
 		> text
 			font-size 10px
-			fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
+			fill var(--chartCaption)
 
 			> tspan
 				opacity 0.5
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index 1ff81fc0c6..d7edda1a74 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -115,10 +115,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
-	$bg = isDark ? #22252f : #f7f7f7
+main
+	$bg = var(--face)
 
 	> .is-suspended
 	> .is-remote
@@ -148,7 +146,7 @@ root(isDark)
 
 		> .banner
 			padding-bottom 33.3%
-			background-color isDark ? #5f7273 : #cacaca
+			background-color rgba(0, 0, 0, 0.1)
 			background-size cover
 			background-position center
 
@@ -198,26 +196,26 @@ root(isDark)
 					margin 0
 					line-height 22px
 					font-size 20px
-					color isDark ? #fff : #757c82
+					color var(--mobileUserPageName)
 
 				> .username
 					display inline-block
 					line-height 20px
 					font-size 16px
 					font-weight bold
-					color isDark ? #657786 : #969ea5
+					color var(--mobileUserPageAcct)
 
 				> .followed
 					margin-left 8px
 					padding 2px 4px
 					font-size 12px
-					color isDark ? #657786 : #fff
-					background isDark ? #f8f8f8 : #a7bec7
+					color var(--mobileUserPageFollowedFg)
+					background var(--mobileUserPageFollowedBg)
 					border-radius 4px
 
 			> .description
 				margin 8px 0
-				color isDark ? #fff : #757c82
+				color var(--mobileUserPageDescription)
 
 			> .info
 				margin 8px 0
@@ -225,14 +223,14 @@ root(isDark)
 				> p
 					display inline
 					margin 0 16px 0 0
-					color isDark ? #a9b9c1 : #90989c
+					color var(--text)
 
 					> i
 						margin-right 4px
 
 			> .status
 				> a
-					color isDark ? #657786 : #818a92
+					color var(--text)
 
 					&:not(:last-child)
 						margin-right 16px
@@ -240,7 +238,7 @@ root(isDark)
 					> b
 						margin-right 4px
 						font-size 16px
-						color isDark ? #fff : #787e86
+						color var(--mobileUserPageStatusHighlight)
 
 					> i
 						font-size 14px
@@ -249,7 +247,7 @@ root(isDark)
 		position -webkit-sticky
 		position sticky
 		top 47px
-		box-shadow 0 4px 4px isDark ? rgba(#000, 0.3) : rgba(#000, 0.07)
+		box-shadow 0 4px 4px var(--mobileUserPageHeaderShadow)
 		background-color $bg
 		z-index 2
 
@@ -266,7 +264,7 @@ root(isDark)
 				line-height 48px
 				font-size 12px
 				text-decoration none
-				color isDark ? #657786 : #9ca1a5
+				color var(--text)
 				border-bottom solid 2px transparent
 
 				@media (min-width 400px)
@@ -289,10 +287,4 @@ root(isDark)
 		@media (min-width 600px)
 			padding 32px
 
-main[data-darkmode]
-	root(true)
-
-main:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 8a39648037..896ac7a920 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -86,6 +86,8 @@
 	"calendarSaturdayOrSunday": "#ff6679",
 	"calendarDay": "#c5ced6",
 
+	"chartCaption": ":alpha<0.6<$text",
+
 	"announcementsBg": "#253a50",
 	"announcementsTitle": "#539eff",
 	"announcementsText": "#fff",
@@ -125,6 +127,13 @@
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":lighten<10<$text",
 
+	"mobileUserPageName": "#fff",
+	"mobileUserPageAcct": "$text",
+	"mobileUserPageDescription": "$text",
+	"mobileUserPageFollowedBg": "rgba(0, 0, 0, 0.3)",
+	"mobileUserPageFollowedFg": "$text",
+	"mobileUserPageStatusHighlight": "#fff",
+	"mobileUserPageHeaderShadow": "rgba(0, 0, 0, 0.3)",
 	"mobileAnnouncement": "rgba(30, 129, 216, 0.2)",
 	"mobileAnnouncementFg": "#fff",
 	"mobileSignedInAsBg": "#273c34",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index f5003ae2ec..fe018b5476 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -86,6 +86,8 @@
 	"calendarSaturdayOrSunday": "#ef95a0",
 	"calendarDay": "#777",
 
+	"chartCaption": ":alpha<0.6<$text",
+
 	"announcementsBg": "#f3f9ff",
 	"announcementsTitle": "#4078c0",
 	"announcementsText": "#57616f",
@@ -125,6 +127,13 @@
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":darken<10<$text",
 
+	"mobileUserPageName": "#757c82",
+	"mobileUserPageAcct": "#969ea5",
+	"mobileUserPageDescription": "#757c82",
+	"mobileUserPageFollowedBg": "#a7bec7",
+	"mobileUserPageFollowedFg": "#fff",
+	"mobileUserPageStatusHighlight": "#787e86",
+	"mobileUserPageHeaderShadow": "rgba(0, 0, 0, 0.07)",
 	"mobileAnnouncement": "rgba(155, 196, 232, 0.2)",
 	"mobileAnnouncementFg": "#3f4967",
 	"mobileSignedInAsBg": "#fcfff5",

From 436773837b5f121168a7d23ce3e3b817ededc12a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 11:23:30 +0900
Subject: [PATCH 45/72] wip

---
 .../app/mobile/views/components/ui.nav.vue       | 16 ++++------------
 src/client/theme/dark.json                       |  2 ++
 src/client/theme/light.json                      |  2 ++
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index a84dc7349a..ba122cc3e2 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -121,10 +121,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
-	$color = isDark ? #c9d2e0 : #777
+.nav
+	$color = var(--text)
 
 	.backdrop
 		position fixed
@@ -133,7 +131,7 @@ root(isDark)
 		z-index 1025
 		width 100%
 		height 100%
-		background isDark ? rgba(#000, 0.7) : rgba(#000, 0.2)
+		background var(--mobileNavBackdrop)
 
 	.body
 		position fixed
@@ -144,7 +142,7 @@ root(isDark)
 		height 100%
 		overflow auto
 		-webkit-overflow-scrolling touch
-		background isDark ? #16191f : #fff
+		background var(--secondary)
 
 	.me
 		display block
@@ -265,10 +263,4 @@ root(isDark)
 	opacity: 0;
 }
 
-.nav[data-darkmode]
-	root(true)
-
-.nav:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 896ac7a920..f5294f27cd 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -12,6 +12,7 @@
 
 	"primary": "$primary",
 	"primaryForeground": "#fff",
+	"secondary": "$secondary",
 	"bg": ":darken<8<$secondary",
 	"text": "$text",
 
@@ -127,6 +128,7 @@
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":lighten<10<$text",
 
+	"mobileNavBackdrop": "rgba(0, 0, 0, 0.7)",
 	"mobileUserPageName": "#fff",
 	"mobileUserPageAcct": "$text",
 	"mobileUserPageDescription": "$text",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index fe018b5476..4776b2f3b3 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -12,6 +12,7 @@
 
 	"primary": "$primary",
 	"primaryForeground": "#fff",
+	"secondary": "$secondary",
 	"bg": ":darken<8<$secondary",
 	"text": "$text",
 
@@ -127,6 +128,7 @@
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":darken<10<$text",
 
+	"mobileNavBackdrop": "rgba(0, 0, 0, 0.2)",
 	"mobileUserPageName": "#757c82",
 	"mobileUserPageAcct": "#969ea5",
 	"mobileUserPageDescription": "#757c82",

From 7ca5e33a3afdc57ea27cda2c004a3e6e8d688342 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 11:40:47 +0900
Subject: [PATCH 46/72] wip

---
 .../app/mobile/views/components/ui.header.vue     | 15 +++------------
 src/client/theme/dark.json                        |  2 ++
 src/client/theme/light.json                       |  2 ++
 3 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
index d3e258f052..7fd68002e7 100644
--- a/src/client/app/mobile/views/components/ui.header.vue
+++ b/src/client/app/mobile/views/components/ui.header.vue
@@ -70,9 +70,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.header
 	$height = 48px
 
 	position fixed
@@ -98,7 +96,7 @@ root(isDark)
 		color #fff
 
 	> .main
-		color rgba(#fff, 0.9)
+		color var(--mobileHeaderFg)
 
 		> .backdrop
 			position absolute
@@ -108,8 +106,7 @@ root(isDark)
 			height $height
 			-webkit-backdrop-filter blur(12px)
 			backdrop-filter blur(12px)
-			//background-color rgba(#1b2023, 0.75)
-			background-color isDark ? #313543 : #595f6f
+			background-color var(--mobileHeaderBg)
 
 		> .content
 			z-index 1001
@@ -171,10 +168,4 @@ root(isDark)
 				line-height $height
 				border-left solid 1px rgba(#000, 0.1)
 
-.header[data-darkmode]
-	root(true)
-
-.header:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index f5294f27cd..65e12d5247 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -128,6 +128,8 @@
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":lighten<10<$text",
 
+	"mobileHeaderBg": ":lighten<5<$secondary",
+	"mobileHeaderFg": "$text",
 	"mobileNavBackdrop": "rgba(0, 0, 0, 0.7)",
 	"mobileUserPageName": "#fff",
 	"mobileUserPageAcct": "$text",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 4776b2f3b3..4817663529 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -128,6 +128,8 @@
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":darken<10<$text",
 
+	"mobileHeaderBg": ":lighten<5<$secondary",
+	"mobileHeaderFg": "$text",
 	"mobileNavBackdrop": "rgba(0, 0, 0, 0.2)",
 	"mobileUserPageName": "#757c82",
 	"mobileUserPageAcct": "#969ea5",

From 016c7fd2c436c0a70d24e469ac42fe8bda42592f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 11:43:15 +0900
Subject: [PATCH 47/72] wip

---
 src/client/app/mobile/views/pages/user/home.vue | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/client/app/mobile/views/pages/user/home.vue b/src/client/app/mobile/views/pages/user/home.vue
index d19ccfd522..2c7134ed43 100644
--- a/src/client/app/mobile/views/pages/user/home.vue
+++ b/src/client/app/mobile/views/pages/user/home.vue
@@ -54,7 +54,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.root.home
 	max-width 600px
 	margin 0 auto
 
@@ -65,7 +65,7 @@ root(isDark)
 			margin 0 0 16px 0
 
 	> section
-		background isDark ? #21242f : #eee
+		background var(--face)
 		border-radius 8px
 		box-shadow 0 4px 16px rgba(#000, 0.1)
 
@@ -80,8 +80,8 @@ root(isDark)
 			padding 8px 10px
 			font-size 15px
 			font-weight normal
-			color isDark ? #b8c5cc : #465258
-			background var(--face)
+			color var(--text)
+			background var(--faceHeader)
 			border-radius 8px 8px 0 0
 
 			@media (min-width 500px)
@@ -98,12 +98,6 @@ root(isDark)
 		display block
 		margin 16px
 		text-align center
-		color isDark ? #cad2da : #929aa0
-
-.root.home[data-darkmode]
-	root(true)
-
-.root.home:not([data-darkmode])
-	root(false)
+		color var(--text)
 
 </style>

From 47d4de75da5bd2b6aafb5cdc6eabf6fec6932f1e Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 11:44:23 +0900
Subject: [PATCH 48/72] wip

---
 .../views/components/widget-container.vue       | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/client/app/mobile/views/components/widget-container.vue b/src/client/app/mobile/views/components/widget-container.vue
index bf7adf5fcb..2a4025002b 100644
--- a/src/client/app/mobile/views/components/widget-container.vue
+++ b/src/client/app/mobile/views/components/widget-container.vue
@@ -25,8 +25,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
-	background isDark ? #21242f : #eee
+.mk-widget-container
+	background var(--face)
 	border-radius 8px
 	box-shadow 0 4px 16px rgba(#000, 0.1)
 	overflow hidden
@@ -35,17 +35,14 @@ root(isDark)
 		background transparent !important
 		box-shadow none !important
 
-	&.hideHeader
-		background isDark ? #21242f : #fff
-
 	> header
 		> .title
 			margin 0
 			padding 8px 10px
 			font-size 15px
 			font-weight normal
-			color isDark ? #b8c5cc : #465258
-			background var(--face)
+			color var(--faceHeaderText)
+			background var(--faceHeader)
 			border-radius 8px 8px 0 0
 
 			> [data-fa]
@@ -65,10 +62,4 @@ root(isDark)
 			font-size 15px
 			color #465258
 
-.mk-widget-container[data-darkmode]
-	root(true)
-
-.mk-widget-container:not([data-darkmode])
-	root(false)
-
 </style>

From fe8c384618597b044c004970fa39a78b0e6c5ec7 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 11:45:34 +0900
Subject: [PATCH 49/72] wip

---
 src/client/app/mobile/views/pages/settings.vue | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 0a44a592e1..a3b508e37e 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -322,7 +322,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+main
 	margin 0 auto
 	max-width 600px
 	width 100%
@@ -346,12 +346,7 @@ root(isDark)
 	> footer
 		margin 16px
 		text-align center
-		color isDark ? #c9d2e0 : #888
-
-main[data-darkmode]
-	root(true)
-
-main:not([data-darkmode])
-	root(false)
+		color var(--text)
+		opacity 0.7
 
 </style>

From d715af0620d1c18b5a5820193d1503bae94fd05e Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 11:49:32 +0900
Subject: [PATCH 50/72] wip

---
 src/client/app/mobile/views/pages/home.vue | 22 ++++++----------------
 src/client/theme/dark.json                 |  1 +
 src/client/theme/light.json                |  1 +
 3 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index c2ab5d5623..616a3aee1b 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -154,9 +154,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+main
 	> .nav
 		> .pointer
 			position fixed
@@ -176,7 +174,7 @@ root(isDark)
 				border-top solid $size transparent
 				border-left solid $size transparent
 				border-right solid $size transparent
-				border-bottom solid $size isDark ? #272f3a : #fff
+				border-bottom solid $size var(--popupBg)
 
 		> .bg
 			position fixed
@@ -198,7 +196,7 @@ root(isDark)
 			margin 0 auto
 			overflow auto
 			-webkit-overflow-scrolling touch
-			background isDark ? #272f3a : #fff
+			background var(--popupBg)
 			border-radius 8px
 			box-shadow 0 0 16px rgba(#000, 0.1)
 
@@ -207,19 +205,19 @@ root(isDark)
 
 				> .hr
 					margin 8px 0
-					border-top solid 1px isDark ? rgba(#000, 0.3) : rgba(#000, 0.1)
+					border-top solid 1px var(--faceDivider)
 
 				> *:not(.hr)
 					display block
 					padding 8px 16px
-					color isDark ? #cdd0d8 : #666
+					color var(--text)
 
 					&[data-active]
 						color var(--primaryForeground)
 						background var(--primary)
 
 					&:not([data-active]):hover
-						background isDark ? #353e4a : #eee
+						background var(--mobileHomeTlItemHover)
 
 					> .badge
 						margin-left 6px
@@ -237,17 +235,9 @@ root(isDark)
 		@media (min-width 600px)
 			padding 32px
 
-main[data-darkmode]
-	root(true)
-
-main:not([data-darkmode])
-	root(false)
-
 </style>
 
 <style lang="stylus" module>
-
-
 .title
 	i
 		margin-right 4px
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 65e12d5247..6aa9bf86b6 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -131,6 +131,7 @@
 	"mobileHeaderBg": ":lighten<5<$secondary",
 	"mobileHeaderFg": "$text",
 	"mobileNavBackdrop": "rgba(0, 0, 0, 0.7)",
+	"mobileHomeTlItemHover": "rgba(255, 255, 255, 0.1)",
 	"mobileUserPageName": "#fff",
 	"mobileUserPageAcct": "$text",
 	"mobileUserPageDescription": "$text",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 4817663529..1cd77c7d61 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -131,6 +131,7 @@
 	"mobileHeaderBg": ":lighten<5<$secondary",
 	"mobileHeaderFg": "$text",
 	"mobileNavBackdrop": "rgba(0, 0, 0, 0.2)",
+	"mobileHomeTlItemHover": "rgba(0, 0, 0, 0.05)",
 	"mobileUserPageName": "#757c82",
 	"mobileUserPageAcct": "#969ea5",
 	"mobileUserPageDescription": "#757c82",

From b4a4d784c3ec847dd19b4b692d66a52c09c9dcb5 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 12:07:28 +0900
Subject: [PATCH 51/72] wip

---
 .../app/mobile/views/components/post-form.vue | 24 +++++++------------
 src/client/theme/dark.json                    |  2 ++
 src/client/theme/light.json                   |  2 ++
 3 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 6ada5e60ee..fe8e30a41d 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -324,9 +324,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-post-form
 	max-width 500px
 	width calc(100% - 16px)
 	margin 8px auto
@@ -349,20 +347,20 @@ root(isDark)
 		> header
 			z-index 1000
 			height 50px
-			box-shadow 0 1px 0 0 isDark ? rgba(#000, 0.2) : rgba(#000, 0.1)
+			box-shadow 0 1px 0 0 var(--mobilePostFormDivider)
 
 			> .cancel
 				padding 0
 				width 50px
 				line-height 50px
 				font-size 24px
-				color isDark ? #9baec8 : #555
+				color var(--text)
 
 			> div
 				position absolute
 				top 0
 				right 0
-				color #657786
+				color var(--text)
 
 				> .text-count
 					line-height 50px
@@ -396,7 +394,7 @@ root(isDark)
 
 				> span
 					margin-right 16px
-					color isDark ? #fff : #666
+					color var(--text)
 
 			> input
 				z-index 1
@@ -408,11 +406,11 @@ root(isDark)
 				margin 0
 				width 100%
 				font-size 16px
-				color isDark ? #fff : #333
-				background isDark ? #191d23 : #fff
+				color var(--inputText)
+				background var(--mobilePostFormTextareaBg)
 				border none
 				border-radius 0
-				box-shadow 0 1px 0 0 isDark ? rgba(#000, 0.2) : rgba(#000, 0.1)
+				box-shadow 0 1px 0 0 var(--mobilePostFormDivider)
 
 				&:disabled
 					opacity 0.5
@@ -481,10 +479,4 @@ root(isDark)
 		> *
 			margin-right 8px
 
-.mk-post-form[data-darkmode]
-	root(true)
-
-.mk-post-form:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 6aa9bf86b6..3d3c9b37c7 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -131,6 +131,8 @@
 	"mobileHeaderBg": ":lighten<5<$secondary",
 	"mobileHeaderFg": "$text",
 	"mobileNavBackdrop": "rgba(0, 0, 0, 0.7)",
+	"mobilePostFormDivider": "rgba(0, 0, 0, 0.2)",
+	"mobilePostFormTextareaBg": "rgba(0, 0, 0, 0.3)",
 	"mobileHomeTlItemHover": "rgba(255, 255, 255, 0.1)",
 	"mobileUserPageName": "#fff",
 	"mobileUserPageAcct": "$text",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 1cd77c7d61..d4dd246542 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -131,6 +131,8 @@
 	"mobileHeaderBg": ":lighten<5<$secondary",
 	"mobileHeaderFg": "$text",
 	"mobileNavBackdrop": "rgba(0, 0, 0, 0.2)",
+	"mobilePostFormDivider": "rgba(0, 0, 0, 0.1)",
+	"mobilePostFormTextareaBg": "#fff",
 	"mobileHomeTlItemHover": "rgba(0, 0, 0, 0.05)",
 	"mobileUserPageName": "#757c82",
 	"mobileUserPageAcct": "#969ea5",

From 5df85b5febd86cd34bcc59737f4ae974689e2a0e Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 12:10:15 +0900
Subject: [PATCH 52/72] wip

---
 .../app/common/views/components/poll-editor.vue      | 12 ++----------
 src/client/theme/dark.json                           |  2 ++
 src/client/theme/light.json                          |  2 ++
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/client/app/common/views/components/poll-editor.vue b/src/client/app/common/views/components/poll-editor.vue
index 7f52c62c23..b5c57d48a5 100644
--- a/src/client/app/common/views/components/poll-editor.vue
+++ b/src/client/app/common/views/components/poll-editor.vue
@@ -68,9 +68,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-poll-editor
 	padding 8px
 
 	> .caution
@@ -104,7 +102,7 @@ root(isDark)
 				width 300px
 				font-size 14px
 				color var(--inputText)
-				background isDark ? #191b22 : #fff
+				background var(--pollEditorInputBg)
 				border solid 1px var(--primaryAlpha01)
 				border-radius 4px
 
@@ -142,10 +140,4 @@ root(isDark)
 		&:active
 			color var(--primaryDarken30)
 
-.mk-poll-editor[data-darkmode]
-	root(true)
-
-.mk-poll-editor:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 3d3c9b37c7..8700d396a8 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -77,6 +77,8 @@
 
 	"reactionViewerBorder": "rgba(255, 255, 255, 0.1)",
 
+	"pollEditorInputBg": "rgba(0, 0, 0, 0.25)",
+
 	"urlPreviewBorder": "rgba(0, 0, 0, 0.4)",
 	"urlPreviewBorderHover": "rgba(255, 255, 255, 0.2)",
 	"urlPreviewTitle": "$text",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index d4dd246542..d55b75ab08 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -77,6 +77,8 @@
 
 	"reactionViewerBorder": "rgba(0, 0, 0, 0.1)",
 
+	"pollEditorInputBg": "#fff",
+
 	"urlPreviewBorder": "rgba(0, 0, 0, 0.1)",
 	"urlPreviewBorderHover": "rgba(0, 0, 0, 0.2)",
 	"urlPreviewTitle": "$text",

From 76097416802a8afcd09bc69994c6632ce0f73902 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 12:13:08 +0900
Subject: [PATCH 53/72] wip

---
 .../app/desktop/views/components/note-preview.vue      |  2 +-
 .../app/desktop/views/components/notes.note.sub.vue    |  2 +-
 .../app/desktop/views/pages/deck/deck.note.sub.vue     |  2 +-
 .../app/mobile/views/components/note-preview.vue       |  2 +-
 src/client/app/mobile/views/components/note.sub.vue    | 10 ++--------
 src/client/theme/dark.json                             |  1 +
 src/client/theme/light.json                            |  1 +
 7 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/client/app/desktop/views/components/note-preview.vue b/src/client/app/desktop/views/components/note-preview.vue
index f64657fb47..7e5a1db8d4 100644
--- a/src/client/app/desktop/views/components/note-preview.vue
+++ b/src/client/app/desktop/views/components/note-preview.vue
@@ -81,7 +81,7 @@ root(isDark)
 					cursor default
 					margin 0
 					padding 0
-					color isDark ? #959ba7 : #717171
+					color var(--subNoteText)
 
 .qiziqtywpuaucsgarwajitwaakggnisj[data-darkmode]
 	root(true)
diff --git a/src/client/app/desktop/views/components/notes.note.sub.vue b/src/client/app/desktop/views/components/notes.note.sub.vue
index 70709f8738..a0c4cc2fad 100644
--- a/src/client/app/desktop/views/components/notes.note.sub.vue
+++ b/src/client/app/desktop/views/components/notes.note.sub.vue
@@ -82,7 +82,7 @@ root(isDark)
 					cursor default
 					margin 0
 					padding 0
-					color isDark ? #959ba7 : #717171
+					color var(--subNoteText)
 
 					pre
 						max-height 120px
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.sub.vue b/src/client/app/desktop/views/pages/deck/deck.note.sub.vue
index f1bf60d528..0b6a13beaf 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.sub.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.sub.vue
@@ -62,7 +62,7 @@ root(isDark)
 			> .text
 				margin 0
 				padding 0
-				color isDark ? #959ba7 : #717171
+				color var(--subNoteText)
 
 				pre
 					max-height 120px
diff --git a/src/client/app/mobile/views/components/note-preview.vue b/src/client/app/mobile/views/components/note-preview.vue
index 0b3278ff41..1c73779251 100644
--- a/src/client/app/mobile/views/components/note-preview.vue
+++ b/src/client/app/mobile/views/components/note-preview.vue
@@ -98,7 +98,7 @@ root(isDark)
 					cursor default
 					margin 0
 					padding 0
-					color isDark ? #959ba7 : #717171
+					color var(--subNoteText)
 
 .yohlumlkhizgfkvvscwfcrcggkotpvry[data-darkmode]
 	root(true)
diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue
index 8c2e3b496d..24f5be160c 100644
--- a/src/client/app/mobile/views/components/note.sub.vue
+++ b/src/client/app/mobile/views/components/note.sub.vue
@@ -41,7 +41,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.zlrxdaqttccpwhpaagdmkawtzklsccam
 	display flex
 	padding 16px
 	font-size 10px
@@ -104,16 +104,10 @@ root(isDark)
 				> .text
 					margin 0
 					padding 0
-					color isDark ? #959ba7 : #717171
+					color var(--subNoteText)
 
 					pre
 						max-height 120px
 						font-size 80%
 
-.zlrxdaqttccpwhpaagdmkawtzklsccam[data-darkmode]
-	root(true)
-
-.zlrxdaqttccpwhpaagdmkawtzklsccam:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 8700d396a8..b4c9fd5606 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -34,6 +34,7 @@
 	"popupFg": "#d6dce2",
 
 	"subNoteBg": "rgba(0, 0, 0, 0.18)",
+	"subNoteText": ":alpha<0.7<$text",
 	"renoteGradient": "#314027",
 	"renoteText": "#9dbb00",
 	"quoteBorder": "#4e945e",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index d55b75ab08..6aec07e74d 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -34,6 +34,7 @@
 	"popupFg": "#586069",
 
 	"subNoteBg": "rgba(0, 0, 0, 0.01)",
+	"subNoteText": ":alpha<0.7<$text",
 	"renoteGradient": "#edfde2",
 	"renoteText": "#9dbb00",
 	"quoteBorder": "#c0dac6",

From 29476ea3da691416ff9abb8c953b8ecb13c908b1 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 12:20:22 +0900
Subject: [PATCH 54/72] wip

---
 .../app/desktop/views/pages/deck/deck.note.vue     |  2 +-
 .../app/mobile/views/components/note-card.vue      | 13 ++++---------
 src/client/app/mobile/views/components/note.vue    | 14 +++-----------
 3 files changed, 8 insertions(+), 21 deletions(-)

diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index c6925d5cec..2555c6f7e0 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -343,7 +343,7 @@ root(isDark)
 
 						> .reply
 							margin-right 8px
-							color isDark ? #99abbf : #717171
+							color var(--noteText)
 
 						> .rp
 							margin-left 4px
diff --git a/src/client/app/mobile/views/components/note-card.vue b/src/client/app/mobile/views/components/note-card.vue
index e30e6c1c8f..de9c9c1450 100644
--- a/src/client/app/mobile/views/components/note-card.vue
+++ b/src/client/app/mobile/views/components/note-card.vue
@@ -27,17 +27,18 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-note-card
 	display inline-block
 	width 150px
 	//height 120px
 	font-size 12px
 	background var(--face)
 	border-radius 4px
+	box-shadow 0 2px 8px rgba(0, 0, 0, 0.2)
 
 	> a
 		display block
-		color isDark ? #fff : #2c3940
+		color var(--noteText)
 
 		&:hover
 			text-decoration none
@@ -75,17 +76,11 @@ root(isDark)
 				left 0
 				width 100%
 				height 20px
-				background isDark ? linear-gradient(to bottom, rgba(#282c37, 0) 0%, #282c37 100%) : linear-gradient(to bottom, rgba(#fff, 0) 0%, #fff 100%)
+				background linear-gradient(to bottom, transparent 0%, var(--face) 100%)
 
 		> .mk-time
 			display inline-block
 			padding 8px
 			color #aaa
 
-.mk-note-card[data-darkmode]
-	root(true)
-
-.mk-note-card:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 8bb9f43fab..4af19ade29 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -228,9 +228,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.note
 	font-size 12px
 	border-bottom solid 1px var(--faceDivider)
 
@@ -383,7 +381,7 @@ root(isDark)
 
 						> .reply
 							margin-right 8px
-							color isDark ? #99abbf : #717171
+							color var(--noteText)
 
 						> .rp
 							margin-left 4px
@@ -449,7 +447,7 @@ root(isDark)
 						margin-right 28px
 
 					&:hover
-						color isDark ? #9198af : #666
+						color var(--noteActionsHover)
 
 					> .count
 						display inline
@@ -459,12 +457,6 @@ root(isDark)
 					&.reacted
 						color var(--primary)
 
-.note[data-darkmode]
-	root(true)
-
-.note:not([data-darkmode])
-	root(false)
-
 </style>
 
 <style lang="stylus" module>

From 1eef90f6cbdbf06bbc1c7e03398e9e1243664fe1 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 14:03:55 +0900
Subject: [PATCH 55/72] wip

---
 .../views/components/drive.file-detail.vue    | 42 +++++++------------
 .../mobile/views/components/drive.file.vue    | 19 +++------
 .../mobile/views/components/drive.folder.vue  | 10 +----
 .../app/mobile/views/components/drive.vue     | 20 ++++-----
 .../mobile/views/components/notification.vue  | 10 +----
 .../views/pages/received-follow-requests.vue  |  4 +-
 src/client/theme/dark.json                    |  1 +
 src/client/theme/light.json                   |  1 +
 8 files changed, 36 insertions(+), 71 deletions(-)

diff --git a/src/client/app/mobile/views/components/drive.file-detail.vue b/src/client/app/mobile/views/components/drive.file-detail.vue
index 8108892597..de46297fcb 100644
--- a/src/client/app/mobile/views/components/drive.file-detail.vue
+++ b/src/client/app/mobile/views/components/drive.file-detail.vue
@@ -134,10 +134,10 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.pyvicwrksnfyhpfgkjwqknuururpaztw
 	> .preview
 		padding 8px
-		background isDark ? #191b22 : #f0f0f0
+		background var(--bg)
 
 		> img
 			display block
@@ -148,9 +148,10 @@ root(isDark)
 
 		> footer
 			padding 8px 8px 0 8px
-			font-size 0.8em
-			color isDark ? #606984 : #888
 			text-align center
+			font-size 0.8em
+			color var(--text)
+			opacity 0.7
 
 			> .separator
 				display inline
@@ -178,12 +179,12 @@ root(isDark)
 	> .info
 		padding 14px
 		font-size 0.8em
-		border-top solid 1px isDark ? #1c2023 : #dfdfdf
+		border-top solid 1px var(--faceDivider)
 
 		> div
 			max-width 500px
 			margin 0 auto
-			color isDark ? #9397a2 : #9d9d9d
+			color var(--text)
 
 			> .separator
 				padding 0 4px
@@ -198,7 +199,7 @@ root(isDark)
 
 	> .menu
 		padding 14px
-		border-top solid 1px isDark ? #1c2023 : #dfdfdf
+		border-top solid 1px var(--faceDivider)
 
 		> div
 			max-width 500px
@@ -209,31 +210,26 @@ root(isDark)
 				width 100%
 				padding 10px 16px
 				margin 0 0 12px 0
-				color isDark ? #dfe3e8 : #333
+				color var(--primaryForeground)
 				font-size 0.9em
 				text-align center
 				text-decoration none
-				text-shadow 0 1px 0 isDark ? rgba(0, 0, 0, 0.9) : rgba(255, 255, 255, 0.9)
-				background-image isDark ? linear-gradient(#292f3c, #1b2025) : linear-gradient(#fafafa, #eaeaea)
-				border 1px solid isDark ? #121417 : #ddd
-				border-bottom-color isDark ? #060606 : #cecece
+				background var(--primary)
+				border none
 				border-radius 3px
 
 				&:last-child
 					margin-bottom 0
 
 				&:active
-					background-color #767676
-					background-image none
-					border-color #444
-					box-shadow 0 1px 3px rgba(#000, 0.075), inset 0 0 5px rgba(#000, 0.2)
+					background var(--primaryDarken10)
 
 				> [data-fa]
 					margin-right 4px
 
 	> .hash
 		padding 14px
-		border-top solid 1px isDark ? #1c2023 : #dfdfdf
+		border-top solid 1px var(--faceDivider)
 
 		> div
 			max-width 500px
@@ -243,7 +239,7 @@ root(isDark)
 				display block
 				margin 0
 				padding 0
-				color isDark ? #a8b7d0 : #555
+				color var(--text)
 				font-size 0.9em
 
 				> [data-fa]
@@ -264,7 +260,7 @@ root(isDark)
 
 	> .exif
 		padding 14px
-		border-top solid 1px isDark ? #1c2023 : #dfdfdf
+		border-top solid 1px var(--faceDivider)
 
 		> div
 			max-width 500px
@@ -274,7 +270,7 @@ root(isDark)
 				display block
 				margin 0
 				padding 0
-				color isDark ? #a8b7d0 : #555
+				color var(--text)
 				font-size 0.9em
 
 				> [data-fa]
@@ -292,10 +288,4 @@ root(isDark)
 				border-radius 2px
 				background #f5f5f5
 
-.pyvicwrksnfyhpfgkjwqknuururpaztw[data-darkmode]
-	root(true)
-
-.pyvicwrksnfyhpfgkjwqknuururpaztw:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/drive.file.vue b/src/client/app/mobile/views/components/drive.file.vue
index ba58cf59a0..68978bb944 100644
--- a/src/client/app/mobile/views/components/drive.file.vue
+++ b/src/client/app/mobile/views/components/drive.file.vue
@@ -63,9 +63,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.vupkuhvjnjyqaqhsiogfbywvjxynrgsm
 	display block
 	text-decoration none !important
 
@@ -103,7 +101,7 @@ root(isDark)
 				padding 0
 				font-size 0.9em
 				font-weight bold
-				color isDark ? #fff : #555
+				color var(--text)
 				text-overflow ellipsis
 				overflow-wrap break-word
 
@@ -127,21 +125,22 @@ root(isDark)
 				display block
 				margin 4px 0 0 0
 				font-size 0.7em
+				color var(--text)
 
 				> .separator
 					padding 0 4px
 
 				> .type
-					color #9D9D9D
+					opacity 0.7
 
 					> .mk-file-type-icon
 						margin-right 4px
 
 				> .data-size
-					color #9D9D9D
+					opacity 0.7
 
 				> .created-at
-					color #BDBDBD
+					opacity 0.7
 
 					> [data-fa]
 						margin-right 2px
@@ -155,10 +154,4 @@ root(isDark)
 		&, *
 			color #fff !important
 
-.vupkuhvjnjyqaqhsiogfbywvjxynrgsm[data-darkmode]
-	root(true)
-
-.vupkuhvjnjyqaqhsiogfbywvjxynrgsm:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/drive.folder.vue b/src/client/app/mobile/views/components/drive.folder.vue
index f76ecba6ad..05dcbd083e 100644
--- a/src/client/app/mobile/views/components/drive.folder.vue
+++ b/src/client/app/mobile/views/components/drive.folder.vue
@@ -24,9 +24,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.jvwxssxsytqlqvrpiymarjlzlsxskqsr
 	display block
-	color isDark ? #fff : #777
+	color var(--text)
 	text-decoration none !important
 
 	*
@@ -55,10 +55,4 @@ root(isDark)
 			> *
 				height 100%
 
-.jvwxssxsytqlqvrpiymarjlzlsxskqsr[data-darkmode]
-	root(true)
-
-.jvwxssxsytqlqvrpiymarjlzlsxskqsr:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/drive.vue b/src/client/app/mobile/views/components/drive.vue
index 76d6c2737d..8919462511 100644
--- a/src/client/app/mobile/views/components/drive.vue
+++ b/src/client/app/mobile/views/components/drive.vue
@@ -473,7 +473,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.kmmwchoexgckptowjmjgfsygeltxfeqs
 	background var(--face)
 
 	> nav
@@ -487,10 +487,10 @@ root(isDark)
 		overflow auto
 		white-space nowrap
 		font-size 0.9em
-		color rgba(isDark ? #fff : #000, 0.67)
+		color var(--text)
 		-webkit-backdrop-filter blur(12px)
 		backdrop-filter blur(12px)
-		//background-color rgba(var(--faceHeader), 0.75)
+		background-color var(--mobileDriveNavBg)
 		border-bottom solid 1px rgba(#000, 0.13)
 
 		> p
@@ -516,7 +516,7 @@ root(isDark)
 			opacity 0.5
 
 		> .info
-			border-bottom solid 1px isDark ? #1c2023 : #eee
+			border-bottom solid 1px var(--faceDivider)
 
 			&:empty
 				display none
@@ -527,15 +527,15 @@ root(isDark)
 				margin 0 auto
 				padding 4px 16px
 				font-size 10px
-				color isDark ? #606984 : #777
+				color var(--text)
 
 		> .folders
 			> .folder
-				border-bottom solid 1px isDark ? #1c2023 : #eee
+				border-bottom solid 1px var(--faceDivider)
 
 		> .files
 			> .file
-				border-bottom solid 1px isDark ? #1c2023 : #eee
+				border-bottom solid 1px var(--faceDivider)
 
 			> .more
 				display block
@@ -591,10 +591,4 @@ root(isDark)
 	> .file
 		display none
 
-.kmmwchoexgckptowjmjgfsygeltxfeqs[data-darkmode]
-	root(true)
-
-.kmmwchoexgckptowjmjgfsygeltxfeqs:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index 7b73012e06..4a09104341 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -105,7 +105,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-notification
 	> .notification
 		padding 16px
 		font-size 12px
@@ -154,7 +154,7 @@ root(isDark)
 
 				> .mk-time
 					margin-left auto
-					color isDark ? #606984 : #c0c0c0
+					color var(--noteHeaderInfo)
 					font-size 0.9em
 
 			> .note-preview
@@ -182,10 +182,4 @@ root(isDark)
 			> div > header i
 				color #888
 
-.mk-notification[data-darkmode]
-	root(true)
-
-.mk-notification:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/pages/received-follow-requests.vue b/src/client/app/mobile/views/pages/received-follow-requests.vue
index c2b2606fd8..beaf6bba57 100644
--- a/src/client/app/mobile/views/pages/received-follow-requests.vue
+++ b/src/client/app/mobile/views/pages/received-follow-requests.vue
@@ -52,8 +52,6 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
 main
 	width 100%
 	max-width 680px
@@ -69,7 +67,7 @@ main
 	> div
 		display flex
 		padding 16px
-		border solid 1px isDark ? #1c2023 : #eee
+		border solid 1px var(--faceDivider)
 		border-radius 4px
 
 		> span
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index b4c9fd5606..f8b3420e7c 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -136,6 +136,7 @@
 	"mobileNavBackdrop": "rgba(0, 0, 0, 0.7)",
 	"mobilePostFormDivider": "rgba(0, 0, 0, 0.2)",
 	"mobilePostFormTextareaBg": "rgba(0, 0, 0, 0.3)",
+	"mobileDriveNavBg": ":alpha<0.75<$secondary",
 	"mobileHomeTlItemHover": "rgba(255, 255, 255, 0.1)",
 	"mobileUserPageName": "#fff",
 	"mobileUserPageAcct": "$text",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 6aec07e74d..7652c6027d 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -136,6 +136,7 @@
 	"mobileNavBackdrop": "rgba(0, 0, 0, 0.2)",
 	"mobilePostFormDivider": "rgba(0, 0, 0, 0.1)",
 	"mobilePostFormTextareaBg": "#fff",
+	"mobileDriveNavBg": ":alpha<0.75<$secondary",
 	"mobileHomeTlItemHover": "rgba(0, 0, 0, 0.05)",
 	"mobileUserPageName": "#757c82",
 	"mobileUserPageAcct": "#969ea5",

From c627288bdeb23167edc04101cd985f02f4bc8ede Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 14:26:20 +0900
Subject: [PATCH 56/72] wip

---
 src/client/app/common/views/pages/follow.vue  |  2 +-
 .../common/views/widgets/posts-monitor.vue    |  2 +-
 .../received-follow-requests-window.vue       |  2 +-
 .../views/components/user-lists-window.vue    |  2 +-
 .../app/desktop/views/pages/deck/deck.vue     |  2 +-
 .../desktop/views/pages/user/user.friends.vue | 17 +++++-------
 .../desktop/views/pages/user/user.header.vue  | 18 ++++---------
 .../desktop/views/pages/user/user.photos.vue  | 10 ++-----
 .../desktop/views/pages/user/user.profile.vue | 12 +++------
 .../views/pages/user/user.timeline.vue        | 16 +++---------
 .../app/desktop/views/pages/user/user.vue     | 26 +++++++------------
 .../app/desktop/views/widgets/polls.vue       | 12 +++------
 .../app/desktop/views/widgets/profile.vue     | 16 ++++--------
 .../app/desktop/views/widgets/users.vue       | 15 ++++-------
 .../views/components/drive-file-chooser.vue   | 14 +++-------
 src/client/app/mobile/views/pages/home.vue    |  2 +-
 .../app/mobile/views/pages/settings.vue       |  2 +-
 src/client/app/mobile/views/pages/user.vue    |  2 +-
 src/client/theme/dark.json                    |  5 ++++
 src/client/theme/light.json                   |  5 ++++
 20 files changed, 65 insertions(+), 117 deletions(-)

diff --git a/src/client/app/common/views/pages/follow.vue b/src/client/app/common/views/pages/follow.vue
index 5e2d448d8b..ef7ee111e2 100644
--- a/src/client/app/common/views/pages/follow.vue
+++ b/src/client/app/common/views/pages/follow.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="syxhndwprovvuqhmyvveewmbqayniwkv" v-if="!fetching" :data-darkmode="$store.state.device.darkmode">
+<div class="syxhndwprovvuqhmyvveewmbqayniwkv" v-if="!fetching">
 	<div class="signed-in-as" v-html="'%i18n:@signed-in-as%'.replace('{}', `<b>${myName}`)"></div>
 
 	<main>
diff --git a/src/client/app/common/views/widgets/posts-monitor.vue b/src/client/app/common/views/widgets/posts-monitor.vue
index 09f766696b..18df1241a9 100644
--- a/src/client/app/common/views/widgets/posts-monitor.vue
+++ b/src/client/app/common/views/widgets/posts-monitor.vue
@@ -4,7 +4,7 @@
 		<template slot="header">%fa:chart-line%%i18n:@title%</template>
 		<button slot="func" @click="toggle" title="%i18n:@toggle%">%fa:sort%</button>
 
-		<div class="qpdmibaztplkylerhdbllwcokyrfxeyj" :class="{ dual: props.view == 0 }" :data-darkmode="$store.state.device.darkmode">
+		<div class="qpdmibaztplkylerhdbllwcokyrfxeyj" :class="{ dual: props.view == 0 }">
 			<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" v-show="props.view != 2">
 				<defs>
 					<linearGradient :id="localGradientId" x1="0" x2="0" y1="1" y2="0">
diff --git a/src/client/app/desktop/views/components/received-follow-requests-window.vue b/src/client/app/desktop/views/components/received-follow-requests-window.vue
index d8a94f6cbe..8ade6a7210 100644
--- a/src/client/app/desktop/views/components/received-follow-requests-window.vue
+++ b/src/client/app/desktop/views/components/received-follow-requests-window.vue
@@ -2,7 +2,7 @@
 <mk-window ref="window" is-modal width="450px" height="500px" @closed="destroyDom">
 	<span slot="header">%fa:envelope R% %i18n:@title%</span>
 
-	<div class="slpqaxdoxhvglersgjukmvizkqbmbokc" :data-darkmode="$store.state.device.darkmode">
+	<div class="slpqaxdoxhvglersgjukmvizkqbmbokc">
 		<div v-for="req in requests">
 			<router-link :key="req.id" :to="req.follower | userPage">{{ req.follower | userName }}</router-link>
 			<span>
diff --git a/src/client/app/desktop/views/components/user-lists-window.vue b/src/client/app/desktop/views/components/user-lists-window.vue
index 75253e0788..4f944981a5 100644
--- a/src/client/app/desktop/views/components/user-lists-window.vue
+++ b/src/client/app/desktop/views/components/user-lists-window.vue
@@ -2,7 +2,7 @@
 <mk-window ref="window" is-modal width="450px" height="500px" @closed="destroyDom">
 	<span slot="header">%fa:list% %i18n:@title%</span>
 
-	<div class="xkxvokkjlptzyewouewmceqcxhpgzprp" :data-darkmode="$store.state.device.darkmode">
+	<div class="xkxvokkjlptzyewouewmceqcxhpgzprp">
 		<button class="ui" @click="add">%i18n:@create-list%</button>
 		<a v-for="list in lists" :key="list.id" @click="choice(list)">{{ list.title }}</a>
 	</div>
diff --git a/src/client/app/desktop/views/pages/deck/deck.vue b/src/client/app/desktop/views/pages/deck/deck.vue
index 48c80c82c4..cd3336079b 100644
--- a/src/client/app/desktop/views/pages/deck/deck.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui :class="$style.root">
-	<div class="qlvquzbjribqcaozciifydkngcwtyzje" :data-darkmode="$store.state.device.darkmode" :style="style">
+	<div class="qlvquzbjribqcaozciifydkngcwtyzje" :style="style">
 		<template v-for="ids in layout">
 			<div v-if="ids.length > 1" class="folder">
 				<template v-for="id, i in ids">
diff --git a/src/client/app/desktop/views/pages/user/user.friends.vue b/src/client/app/desktop/views/pages/user/user.friends.vue
index 9b466053f7..36ae360248 100644
--- a/src/client/app/desktop/views/pages/user/user.friends.vue
+++ b/src/client/app/desktop/views/pages/user/user.friends.vue
@@ -40,7 +40,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.hozptpaliadatkehcmcayizwzwwctpbc
 	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
@@ -53,7 +53,7 @@ root(isDark)
 		line-height 42px
 		font-size 0.9em
 		font-weight bold
-		background isDark ? #313543 : inherit
+		background var(--faceHeader)
 		color var(--faceHeaderText)
 		box-shadow 0 1px rgba(#000, 0.07)
 
@@ -72,7 +72,7 @@ root(isDark)
 
 	> .user
 		padding 16px
-		border-bottom solid 1px isDark ? #21242f : #eee
+		border-bottom solid 1px var(--faceDivider)
 
 		&:last-child
 			border-bottom none
@@ -98,24 +98,19 @@ root(isDark)
 				margin 0
 				font-size 16px
 				line-height 24px
-				color isDark ? #ccc : #555
+				color var(--text)
 
 			> .username
 				display block
 				margin 0
 				font-size 15px
 				line-height 16px
-				color isDark ? #555 : #ccc
+				color var(--text)
+				opacity 0.7
 
 		> .mk-follow-button
 			position absolute
 			top 16px
 			right 16px
 
-.hozptpaliadatkehcmcayizwzwwctpbc[data-darkmode]
-	root(true)
-
-.hozptpaliadatkehcmcayizwzwwctpbc:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue
index ec46e955b5..76eb8f9e1c 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -100,9 +100,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.header
 	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
@@ -182,12 +180,12 @@ root(isDark)
 
 	> .body
 		padding 16px 16px 16px 154px
-		color isDark ? #c5ced6 : #555
+		color var(--text)
 
 		> .status
 			margin-top 16px
 			padding-top 16px
-			border-top solid 1px rgba(#000, isDark ? 0.2 : 0.1)
+			border-top solid 1px var(--faceDivider)
 			font-size 80%
 
 			> *
@@ -196,13 +194,13 @@ root(isDark)
 				margin-right 16px
 
 				&:not(:last-child)
-					border-right solid 1px rgba(#000, isDark ? 0.2 : 0.1)
+					border-right solid 1px var(--faceDivider)
 
 				&.clickable
 					cursor pointer
 
 					&:hover
-						color isDark ? #fff : #000
+						color var(--faceTextButtonHover)
 
 				> b
 					margin-right 4px
@@ -210,10 +208,4 @@ root(isDark)
 					font-weight bold
 					color var(--primary)
 
-.header[data-darkmode]
-	root(true)
-
-.header:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/pages/user/user.photos.vue b/src/client/app/desktop/views/pages/user/user.photos.vue
index 6e9d09e79f..628d5b6d95 100644
--- a/src/client/app/desktop/views/pages/user/user.photos.vue
+++ b/src/client/app/desktop/views/pages/user/user.photos.vue
@@ -39,7 +39,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.dzsuvbsrrrwobdxifudxuefculdfiaxd
 	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
@@ -52,7 +52,7 @@ root(isDark)
 		line-height 42px
 		font-size 0.9em
 		font-weight bold
-		background: isDark ? #313543 : inherit
+		background var(--faceHeader)
 		color var(--faceHeaderText)
 		box-shadow 0 1px rgba(#000, 0.07)
 
@@ -87,10 +87,4 @@ root(isDark)
 		> i
 			margin-right 4px
 
-.dzsuvbsrrrwobdxifudxuefculdfiaxd[data-darkmode]
-	root(true)
-
-.dzsuvbsrrrwobdxifudxuefculdfiaxd:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/pages/user/user.profile.vue b/src/client/app/desktop/views/pages/user/user.profile.vue
index e5ea8d1cc9..fe10b54378 100644
--- a/src/client/app/desktop/views/pages/user/user.profile.vue
+++ b/src/client/app/desktop/views/pages/user/user.profile.vue
@@ -85,7 +85,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.profile
 	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
@@ -96,7 +96,7 @@ root(isDark)
 	> .friend-form
 		padding 16px
 		text-align center
-		border-bottom solid 1px isDark ? #21242f : #eee
+		border-bottom solid 1px var(--faceDivider)
 
 		> .followed
 			margin 12px 0 0 0
@@ -114,7 +114,7 @@ root(isDark)
 	> .action-form
 		padding 16px
 		text-align center
-		border-bottom solid 1px isDark ? #21242f : #eee
+		border-bottom solid 1px var(--faceDivider)
 
 		> *
 			width 100%
@@ -122,10 +122,4 @@ root(isDark)
 			&:not(:last-child)
 				margin-bottom 12px
 
-.profile[data-darkmode]
-	root(true)
-
-.profile:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/pages/user/user.timeline.vue b/src/client/app/desktop/views/pages/user/user.timeline.vue
index fe3ca9154b..608c12b7e2 100644
--- a/src/client/app/desktop/views/pages/user/user.timeline.vue
+++ b/src/client/app/desktop/views/pages/user/user.timeline.vue
@@ -112,9 +112,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.oh5y2r7l5lx8j6jj791ykeiwgihheguk
 	background var(--face)
 	border-radius var(--round)
 	overflow hidden
@@ -123,7 +121,7 @@ root(isDark)
 		padding 0 8px
 		z-index 10
 		background var(--faceHeader)
-		box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
+		box-shadow 0 1px var(--desktopTimelineHeaderShadow)
 
 		> span
 			display inline-block
@@ -148,11 +146,11 @@ root(isDark)
 					background var(--primary)
 
 			&:not([data-active])
-				color isDark ? #9aa2a7 : #6f7477
+				color var(--desktopTimelineSrc)
 				cursor pointer
 
 				&:hover
-					color isDark ? #d9dcde : #525a5f
+					color var(--desktopTimelineSrcHover)
 
 	> .loading
 		padding 64px 0
@@ -171,10 +169,4 @@ root(isDark)
 			font-size 3em
 			color #ccc
 
-.oh5y2r7l5lx8j6jj791ykeiwgihheguk[data-darkmode]
-	root(true)
-
-.oh5y2r7l5lx8j6jj791ykeiwgihheguk:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/pages/user/user.vue b/src/client/app/desktop/views/pages/user/user.vue
index a7065af5e7..a8da890936 100644
--- a/src/client/app/desktop/views/pages/user/user.vue
+++ b/src/client/app/desktop/views/pages/user/user.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<div class="xygkxeaeontfaokvqmiblezmhvhostak" v-if="!fetching" :data-darkmode="$store.state.device.darkmode">
+	<div class="xygkxeaeontfaokvqmiblezmhvhostak" v-if="!fetching">
 		<div class="is-suspended" v-if="user.isSuspended">%fa:exclamation-triangle% %i18n:@is-suspended%</div>
 		<div class="is-remote" v-if="user.host != null">%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></div>
 		<main>
@@ -79,7 +79,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.xygkxeaeontfaokvqmiblezmhvhostak
 	width 980px
 	padding 16px
 	margin 0 auto
@@ -93,12 +93,12 @@ root(isDark)
 		border-radius var(--round)
 
 		&.is-suspended
-			color isDark ? #ffb4b4 : #570808
-			background isDark ? #611d1d : #ffdbdb
+			color var(--suspendedInfoFg)
+			background var(--suspendedInfoBg)
 
 		&.is-remote
-			color isDark ? #ffbd3e : #573c08
-			background isDark ? #42321c : #fff0db
+			color var(--remoteInfoFg)
+			background var(--remoteInfoBg)
 
 		> a
 			font-weight bold
@@ -139,21 +139,15 @@ root(isDark)
 			> .nav
 				padding 16px
 				font-size 12px
-				color #aaa
-				background isDark ? #21242f : #fff
+				color var(--text)
+				background var(--face)
 				box-shadow var(--shadow)
 				border-radius var(--round)
 
 				a
-					color #999
+					color var(--text)99
 
 				i
-					color #ccc
-
-.xygkxeaeontfaokvqmiblezmhvhostak[data-darkmode]
-	root(true)
-
-.xygkxeaeontfaokvqmiblezmhvhostak:not([data-darkmode])
-	root(false)
+					color var(--text)
 
 </style>
diff --git a/src/client/app/desktop/views/widgets/polls.vue b/src/client/app/desktop/views/widgets/polls.vue
index 8ff0bb5d0d..c10ac1ca17 100644
--- a/src/client/app/desktop/views/widgets/polls.vue
+++ b/src/client/app/desktop/views/widgets/polls.vue
@@ -4,7 +4,7 @@
 		<template slot="header">%fa:chart-pie%%i18n:@title%</template>
 		<button slot="func" title="%i18n:@refresh%" @click="fetch">%fa:sync%</button>
 
-		<div class="mkw-polls--body" :data-darkmode="$store.state.device.darkmode">
+		<div class="mkw-polls--body">
 			<div class="poll" v-if="!fetching && poll != null">
 				<p v-if="poll.text"><router-link :to="poll | notePage">{{ poll.text }}</router-link></p>
 				<p v-if="!poll.text"><router-link :to="poll | notePage">%fa:link%</router-link></p>
@@ -64,11 +64,11 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mkw-polls--body
 	> .poll
 		padding 16px
 		font-size 12px
-		color isDark ? #9ea4ad : #555
+		color var(--text)
 
 		> p
 			margin 0 0 8px 0
@@ -91,10 +91,4 @@ root(isDark)
 		> [data-fa]
 			margin-right 4px
 
-.mkw-polls--body[data-darkmode]
-	root(true)
-
-.mkw-polls--body:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/widgets/profile.vue b/src/client/app/desktop/views/widgets/profile.vue
index aea0c90e34..fa35138c31 100644
--- a/src/client/app/desktop/views/widgets/profile.vue
+++ b/src/client/app/desktop/views/widgets/profile.vue
@@ -46,8 +46,7 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
-
+.egwyvoaaryotefqhqtmiyawwefemjfsd-body
 	&[data-compact]
 		> .banner:before
 			content ""
@@ -88,7 +87,7 @@ root(isDark)
 
 	> .banner
 		height 100px
-		background-color isDark ? #303e4a : #f5f5f5
+		background-color var(--primaryDarken10)
 		background-size cover
 		background-position center
 		cursor pointer
@@ -109,19 +108,14 @@ root(isDark)
 		margin 10px 0 0 84px
 		line-height 16px
 		font-weight bold
-		color isDark ? #fff : #555
+		color var(--text)
 
 	> .username
 		display block
 		margin 4px 0 8px 84px
 		line-height 16px
 		font-size 0.9em
-		color isDark ? #606984 : #999
-
-.egwyvoaaryotefqhqtmiyawwefemjfsd-body[data-darkmode]
-	root(true)
-
-.egwyvoaaryotefqhqtmiyawwefemjfsd-body:not([data-darkmode])
-	root(false)
+		color var(--text)
+		opacity 0.7
 
 </style>
diff --git a/src/client/app/desktop/views/widgets/users.vue b/src/client/app/desktop/views/widgets/users.vue
index 328fa56697..28c6372b6f 100644
--- a/src/client/app/desktop/views/widgets/users.vue
+++ b/src/client/app/desktop/views/widgets/users.vue
@@ -73,11 +73,11 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mkw-users
 	.mkw-users--body
 		> .user
 			padding 16px
-			border-bottom solid 1px isDark ? #1c2023 : #eee
+			border-bottom solid 1px var(--faceDivider)
 
 			&:last-child
 				border-bottom none
@@ -103,14 +103,15 @@ root(isDark)
 					margin 0
 					font-size 16px
 					line-height 24px
-					color isDark ? #fff : #555
+					color var(--text)
 
 				> .username
 					display block
 					margin 0
 					font-size 15px
 					line-height 16px
-					color isDark ? #606984 : #ccc
+					color var(--text)
+					opacity 0.7
 
 			> .mk-follow-button
 				position absolute
@@ -132,10 +133,4 @@ root(isDark)
 			> [data-fa]
 				margin-right 4px
 
-.mkw-users[data-darkmode]
-	root(true)
-
-.mkw-users:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/drive-file-chooser.vue b/src/client/app/mobile/views/components/drive-file-chooser.vue
index 6d3fc2343a..5fca19939e 100644
--- a/src/client/app/mobile/views/components/drive-file-chooser.vue
+++ b/src/client/app/mobile/views/components/drive-file-chooser.vue
@@ -46,7 +46,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.cdxzvcfawjxdyxsekbxbfgtplebnoneb
 	position fixed
 	z-index 20000
 	top 0
@@ -59,11 +59,11 @@ root(isDark)
 	> .body
 		width 100%
 		height 100%
-		background var(--face)
+		background var(--faceHeader)
 
 		> header
-			border-bottom solid 1px isDark ? #1b1f29 : #eee
-			color isDark ? #fff : #111
+			border-bottom solid 1px var(--faceDivider)
+			color var(--text)
 
 			> h1
 				margin 0
@@ -96,10 +96,4 @@ root(isDark)
 			overflow scroll
 			-webkit-overflow-scrolling touch
 
-.cdxzvcfawjxdyxsekbxbfgtplebnoneb[data-darkmode]
-	root(true)
-
-.cdxzvcfawjxdyxsekbxbfgtplebnoneb:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index 616a3aee1b..edba8585bd 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -22,7 +22,7 @@
 		<button @click="fn">%fa:pencil-alt%</button>
 	</template>
 
-	<main :data-darkmode="$store.state.device.darkmode">
+	<main>
 		<div class="nav" v-if="showNav">
 			<div class="bg" @click="showNav = false"></div>
 			<div class="pointer"></div>
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index a3b508e37e..b83eaf6d33 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -1,7 +1,7 @@
 <template>
 <mk-ui>
 	<span slot="header"><span style="margin-right:4px;">%fa:cog%</span>%i18n:@settings%</span>
-	<main :data-darkmode="$store.state.device.darkmode">
+	<main>
 		<div class="signin-as" v-html="'%i18n:@signed-in-as%'.replace('{}', `<b>${name}</b>`)"></div>
 
 		<div>
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index d7edda1a74..a2a6bd7a83 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -1,7 +1,7 @@
 <template>
 <mk-ui>
 	<template slot="header" v-if="!fetching"><img :src="user.avatarUrl" alt="">{{ user | userName }}</template>
-	<main v-if="!fetching" :data-darkmode="$store.state.device.darkmode">
+	<main v-if="!fetching">
 		<div class="is-suspended" v-if="user.isSuspended"><p>%fa:exclamation-triangle% %i18n:@is-suspended%</p></div>
 		<div class="is-remote" v-if="user.host != null"><p>%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></p></div>
 		<header>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index f8b3420e7c..462999a64f 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -106,6 +106,11 @@
 	"mfmQuote": ":alpha<0.7<$text",
 	"mfmQuoteLine": ":alpha<0.6<$text",
 
+	"suspendedInfoBg": "#611d1d",
+	"suspendedInfoFg": "#ffb4b4",
+	"remoteInfoBg": "#42321c",
+	"remoteInfoFg": "#ffbd3e",
+
 	"messagingRoomBg": "@bg",
 	"messagingRoomInfo": "#fff",
 	"messagingRoomDateDividerLine": "rgba(255, 255, 255, 0.1)",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 7652c6027d..60824e0a84 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -106,6 +106,11 @@
 	"mfmQuote": ":alpha<0.6<$text",
 	"mfmQuoteLine": ":alpha<0.5<$text",
 
+	"suspendedInfoBg": "#ffdbdb",
+	"suspendedInfoFg": "#570808",
+	"remoteInfoBg": "#fff0db",
+	"remoteInfoFg": "#573c08",
+
 	"messagingRoomBg": "#fff",
 	"messagingRoomInfo": "#000",
 	"messagingRoomDateDividerLine": "rgba(0, 0, 0, 0.1)",

From 13f258308ea5dc158a61f7e89b634450171d30ad Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 15:34:34 +0900
Subject: [PATCH 57/72] wip

---
 src/client/app/desktop/script.ts              |   2 -
 .../received-follow-requests-window.vue       |  11 +-
 .../desktop/views/components/renote-form.vue  |  13 +-
 .../views/components/ui-notification.vue      |  14 +-
 .../views/components/user-lists-window.vue    |  11 +-
 .../desktop/views/components/user-preview.vue |  21 +--
 .../desktop/views/pages/deck/deck.column.vue  |  14 +-
 .../desktop/views/pages/deck/deck.note.vue    |  20 +--
 .../desktop/views/pages/deck/deck.notes.vue   |  14 +-
 .../views/pages/deck/deck.notification.vue    |   2 +-
 .../app/desktop/views/pages/deck/deck.vue     |  16 +--
 .../views/pages/deck/deck.widgets-column.vue  |  13 +-
 .../desktop/views/pages/user-list.users.vue   | 125 ------------------
 .../app/desktop/views/pages/user-list.vue     |  71 ----------
 src/client/theme/dark.json                    |   6 +
 src/client/theme/light.json                   |   8 +-
 16 files changed, 45 insertions(+), 316 deletions(-)
 delete mode 100644 src/client/app/desktop/views/pages/user-list.users.vue
 delete mode 100644 src/client/app/desktop/views/pages/user-list.vue

diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts
index 8b184a4aae..05aa928fa3 100644
--- a/src/client/app/desktop/script.ts
+++ b/src/client/app/desktop/script.ts
@@ -29,7 +29,6 @@ import MkUser from './views/pages/user/user.vue';
 import MkFavorites from './views/pages/favorites.vue';
 import MkSelectDrive from './views/pages/selectdrive.vue';
 import MkDrive from './views/pages/drive.vue';
-import MkUserList from './views/pages/user-list.vue';
 import MkHomeCustomize from './views/pages/home-customize.vue';
 import MkMessagingRoom from './views/pages/messaging-room.vue';
 import MkNote from './views/pages/note.vue';
@@ -63,7 +62,6 @@ init(async (launch) => {
 			{ path: '/i/messaging/:user', component: MkMessagingRoom },
 			{ path: '/i/drive', component: MkDrive },
 			{ path: '/i/drive/folder/:folder', component: MkDrive },
-			{ path: '/i/lists/:list', component: MkUserList },
 			{ path: '/selectdrive', component: MkSelectDrive },
 			{ path: '/search', component: MkSearch },
 			{ path: '/tags/:tag', component: MkTag },
diff --git a/src/client/app/desktop/views/components/received-follow-requests-window.vue b/src/client/app/desktop/views/components/received-follow-requests-window.vue
index 8ade6a7210..3df1329c48 100644
--- a/src/client/app/desktop/views/components/received-follow-requests-window.vue
+++ b/src/client/app/desktop/views/components/received-follow-requests-window.vue
@@ -47,8 +47,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-root(isDark)
+.slpqaxdoxhvglersgjukmvizkqbmbokc
 	padding 16px
 
 	> button
@@ -57,16 +56,10 @@ root(isDark)
 	> div
 		display flex
 		padding 16px
-		border solid 1px isDark ? #1c2023 : #eee
+		border solid 1px var(--faceDivider)
 		border-radius 4px
 
 		> span
 			margin 0 0 0 auto
 
-.slpqaxdoxhvglersgjukmvizkqbmbokc[data-darkmode]
-	root(true)
-
-.slpqaxdoxhvglersgjukmvizkqbmbokc:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/renote-form.vue b/src/client/app/desktop/views/components/renote-form.vue
index ad23740f13..6717ced3b1 100644
--- a/src/client/app/desktop/views/components/renote-form.vue
+++ b/src/client/app/desktop/views/components/renote-form.vue
@@ -57,16 +57,13 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
-
+.mk-renote-form
 	> .preview
 		margin 16px 22px
 
 	> footer
 		height 72px
-		background isDark ? #313543 : var(--primaryLighten95)
+		background var(--desktopRenoteFormFooter)
 
 		> .quote
 			position absolute
@@ -87,10 +84,4 @@ root(isDark)
 			&.ok
 				right 16px
 
-.mk-renote-form[data-darkmode]
-	root(true)
-
-.mk-renote-form:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/ui-notification.vue b/src/client/app/desktop/views/components/ui-notification.vue
index 883a880e5d..dafede4c36 100644
--- a/src/client/app/desktop/views/components/ui-notification.vue
+++ b/src/client/app/desktop/views/components/ui-notification.vue
@@ -36,7 +36,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-ui-notification
 	display block
 	position fixed
 	z-index 10000
@@ -46,10 +46,10 @@ root(isDark)
 	margin 0 auto
 	padding 128px 0 0 0
 	width 500px
-	color rgba(isDark ? #fff : #000, 0.6)
-	//background rgba(var(--face), 0.9)
+	color var(--desktopNotificationFg)
+	background var(--desktopNotificationBg)
 	border-radius 0 0 8px 8px
-	box-shadow 0 2px 4px rgba(#000, isDark ? 0.4 : 0.2)
+	box-shadow 0 2px 4px var(--desktopNotificationShadow)
 	transform translateY(-64px)
 	opacity 0
 
@@ -58,10 +58,4 @@ root(isDark)
 		line-height 64px
 		text-align center
 
-.mk-ui-notification[data-darkmode]
-	root(true)
-
-.mk-ui-notification:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/user-lists-window.vue b/src/client/app/desktop/views/components/user-lists-window.vue
index 4f944981a5..9c384314cf 100644
--- a/src/client/app/desktop/views/components/user-lists-window.vue
+++ b/src/client/app/desktop/views/components/user-lists-window.vue
@@ -47,8 +47,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-root(isDark)
+.xkxvokkjlptzyewouewmceqcxhpgzprp
 	padding 16px
 
 	> button
@@ -57,13 +56,7 @@ root(isDark)
 	> a
 		display block
 		padding 16px
-		border solid 1px isDark ? #1c2023 : #eee
+		border solid 1px var(--faceDivider)
 		border-radius 4px
 
-.xkxvokkjlptzyewouewmceqcxhpgzprp[data-darkmode]
-	root(true)
-
-.xkxvokkjlptzyewouewmceqcxhpgzprp:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/user-preview.vue b/src/client/app/desktop/views/components/user-preview.vue
index 01b6cdbdc5..7f5e79eae1 100644
--- a/src/client/app/desktop/views/components/user-preview.vue
+++ b/src/client/app/desktop/views/components/user-preview.vue
@@ -83,9 +83,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-user-preview
 	position absolute
 	z-index 2048
 	margin-top -8px
@@ -99,7 +97,7 @@ root(isDark)
 
 	> .banner
 		height 84px
-		background-color isDark ? #1c1e26 : #f5f5f5
+		background-color rgba(0, 0, 0, 0.1)
 		background-size cover
 		background-position center
 
@@ -123,19 +121,20 @@ root(isDark)
 			margin 0
 			font-weight bold
 			line-height 16px
-			color isDark ? #fff : #656565
+			color var(--text)
 
 		> .username
 			display block
 			margin 0
 			line-height 16px
 			font-size 0.8em
-			color isDark ? #606984 : #999
+			color var(--text)
+			opacity 0.7
 
 	> .description
 		padding 0 16px
 		font-size 0.7em
-		color isDark ? #9ea4ad : #555
+		color var(--text)
 
 	> .status
 		padding 8px 16px
@@ -147,7 +146,7 @@ root(isDark)
 			> p
 				margin 0
 				font-size 0.7em
-				color #aaa
+				color var(--text)
 
 			> span
 				font-size 1em
@@ -158,10 +157,4 @@ root(isDark)
 		top 92px
 		right 8px
 
-.mk-user-preview[data-darkmode]
-	root(true)
-
-.mk-user-preview:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue
index 2dba7d2522..1b939f2f58 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -269,9 +269,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.dnpfarvgbnfmyzbdquhhzyxcmstpdqzs
 	$header-height = 42px
 
 	width 330px
@@ -301,7 +299,7 @@ root(isDark)
 		min-width 285px
 
 	&.naked
-		background rgba(#000, isDark ? 0.25 : 0.1)
+		background var(--deckAcrylicColumnBg)
 
 		> header
 			background transparent
@@ -350,7 +348,7 @@ root(isDark)
 				color var(--faceTextButtonHover)
 
 			&:active
-				color isDark ? #b2c1d5 : #999
+				color var(--faceTextButtonActive)
 
 		> .toggleActive
 			margin-left -16px
@@ -364,10 +362,4 @@ root(isDark)
 		overflow auto
 		overflow-x hidden
 
-.dnpfarvgbnfmyzbdquhhzyxcmstpdqzs[data-darkmode]
-	root(true)
-
-.dnpfarvgbnfmyzbdquhhzyxcmstpdqzs:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index 2555c6f7e0..eac0e78f0f 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -214,9 +214,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-mediaRoot(isDark)
+.srwrkujossgfuhrbnvqkybtzxpblgchi
 	font-size 13px
 	margin 4px 12px
 
@@ -226,7 +224,7 @@ mediaRoot(isDark)
 	&:last-child
 		margin-bottom 12px
 
-root(isDark)
+.zyjjkidcqjnlegkqebitfviomuqmseqk
 	font-size 13px
 	border-bottom solid 1px var(--faceDivider)
 
@@ -409,7 +407,7 @@ root(isDark)
 						margin-right 28px
 
 					&:hover
-						color isDark ? #9198af : #666
+						color var(--noteActionsHover)
 
 					> .count
 						display inline
@@ -419,16 +417,4 @@ root(isDark)
 					&.reacted
 						color var(--primary)
 
-.zyjjkidcqjnlegkqebitfviomuqmseqk[data-darkmode]
-	root(true)
-
-.zyjjkidcqjnlegkqebitfviomuqmseqk:not([data-darkmode])
-	root(false)
-
-.srwrkujossgfuhrbnvqkybtzxpblgchi[data-darkmode]
-	mediaRoot(true)
-
-.srwrkujossgfuhrbnvqkybtzxpblgchi:not([data-darkmode])
-	mediaRoot(false)
-
 </style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.notes.vue b/src/client/app/desktop/views/pages/deck/deck.notes.vue
index 7e171a2397..884be3a841 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notes.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notes.vue
@@ -195,9 +195,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.eamppglmnmimdhrlzhplwpvyeaqmmhxu
 	.transition
 		.mk-notes-enter
 		.mk-notes-leave-to
@@ -238,15 +236,9 @@ root(isDark)
 			border-bottom-right-radius 6px
 
 			&:hover
-				background isDark ? #2e3440 : #f5f5f5
+				box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
 
 			&:active
-				background isDark ? #21242b : #eee
-
-.eamppglmnmimdhrlzhplwpvyeaqmmhxu[data-darkmode]
-	root(true)
-
-.eamppglmnmimdhrlzhplwpvyeaqmmhxu:not([data-darkmode])
-	root(false)
+				box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
 
 </style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.notification.vue b/src/client/app/desktop/views/pages/deck/deck.notification.vue
index ff10ac2aa6..b318579b3e 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notification.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notification.vue
@@ -142,7 +142,7 @@ root(isDark)
 
 				> .mk-time
 					margin-left auto
-					color isDark ? #606984 : #c0c0c0
+					color var(--noteHeaderInfo)
 					font-size 0.9em
 
 			> .note-preview
diff --git a/src/client/app/desktop/views/pages/deck/deck.vue b/src/client/app/desktop/views/pages/deck/deck.vue
index cd3336079b..22b4c50bb4 100644
--- a/src/client/app/desktop/views/pages/deck/deck.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.vue
@@ -221,9 +221,7 @@ export default Vue.extend({
 </style>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.qlvquzbjribqcaozciifydkngcwtyzje
 	display flex
 	flex 1
 	padding 16px 0 16px 16px
@@ -251,18 +249,12 @@ root(isDark)
 
 	> button
 		padding 0 16px
-		color isDark ? #93a0a5 : #888
+		color var(--faceTextButton)
 
 		&:hover
-			color isDark ? #b8c5ca : #777
+			color var(--faceTextButtonHover)
 
 		&:active
-			color isDark ? #fff : #555
-
-.qlvquzbjribqcaozciifydkngcwtyzje[data-darkmode]
-	root(true)
-
-.qlvquzbjribqcaozciifydkngcwtyzje:not([data-darkmode])
-	root(false)
+			color var(--faceTextButtonActive)
 
 </style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue b/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
index fe190bf892..e1fecc98bc 100644
--- a/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
@@ -135,9 +135,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.wtdtxvecapixsepjtcupubtsmometobz
 	.gqpwvtwtprsbmnssnbicggtwqhmylhnq
 		> header
 			padding 16px
@@ -169,14 +167,5 @@ root(isDark)
 				background rgba(#000, 0.7)
 				border-radius 4px
 
-		> header
-			color isDark ? #fff : #000
-
-.wtdtxvecapixsepjtcupubtsmometobz[data-darkmode]
-	root(true)
-
-.wtdtxvecapixsepjtcupubtsmometobz:not([data-darkmode])
-	root(false)
-
 </style>
 
diff --git a/src/client/app/desktop/views/pages/user-list.users.vue b/src/client/app/desktop/views/pages/user-list.users.vue
deleted file mode 100644
index 7d9a4606a1..0000000000
--- a/src/client/app/desktop/views/pages/user-list.users.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<template>
-<div>
-	<mk-widget-container>
-		<template slot="header">%fa:users% %i18n:@users%</template>
-		<button slot="func" title="%i18n:@add-user%" @click="add">%fa:plus%</button>
-
-		<div data-id="d0b63759-a822-4556-a5ce-373ab966e08a">
-			<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw% %i18n:common.loading%<mk-ellipsis/></p>
-			<template v-else-if="users.length != 0">
-				<div class="user" v-for="_user in users">
-					<mk-avatar class="avatar" :user="_user"/>
-					<div class="body">
-						<router-link class="name" :to="_user | userPage" v-user-preview="_user.id">{{ _user | userName }}</router-link>
-						<p class="username">@{{ _user | acct }}</p>
-					</div>
-				</div>
-			</template>
-			<p class="empty" v-else>%i18n:@no-one%</p>
-		</div>
-	</mk-widget-container>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: {
-		list: {
-			type: Object,
-			required: true
-		}
-	},
-	data() {
-		return {
-			fetching: true,
-			users: []
-		};
-	},
-	mounted() {
-		(this as any).api('users/show', {
-			userIds: this.list.userIds
-		}).then(users => {
-			this.users = users;
-			this.fetching = false;
-		});
-	},
-	methods: {
-		add() {
-			(this as any).apis.input({
-				title: '%i18n:@username%',
-			}).then(async (username: string) => {
-				if (username.startsWith('@')) username = username.slice(1);
-				const user = await (this as any).api('users/show', {
-					username
-				});
-
-				(this as any).api('users/lists/push', {
-					listId: this.list.id,
-					userId: user.id
-				});
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-root(isDark)
-	> .user
-		padding 16px
-		border-bottom solid 1px isDark ? #1c2023 : #eee
-
-		&:last-child
-			border-bottom none
-
-		&:after
-			content ""
-			display block
-			clear both
-
-		> .avatar
-			display block
-			float left
-			margin 0 12px 0 0
-			width 42px
-			height 42px
-			border-radius 8px
-
-		> .body
-			float left
-			width calc(100% - 54px)
-
-			> .name
-				margin 0
-				font-size 16px
-				line-height 24px
-				color isDark ? #fff : #555
-
-			> .username
-				display block
-				margin 0
-				font-size 15px
-				line-height 16px
-				color isDark ? #606984 : #ccc
-
-	> .empty
-		margin 0
-		padding 16px
-		text-align center
-		color #aaa
-
-	> .fetching
-		margin 0
-		padding 16px
-		text-align center
-		color #aaa
-
-[data-id="d0b63759-a822-4556-a5ce-373ab966e08a"][data-darkmode]
-	root(true)
-
-[data-id="d0b63759-a822-4556-a5ce-373ab966e08a"]:not([data-darkmode])
-	root(false)
-
-</style>
diff --git a/src/client/app/desktop/views/pages/user-list.vue b/src/client/app/desktop/views/pages/user-list.vue
deleted file mode 100644
index 2241b84e5e..0000000000
--- a/src/client/app/desktop/views/pages/user-list.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-<mk-ui>
-	<div v-if="!fetching" data-id="02010e15-cc48-4245-8636-16078a9b623c">
-		<div>
-			<div><h1>{{ list.title }}</h1></div>
-			<x-users :list="list"/>
-		</div>
-		<main>
-			<mk-user-list-timeline :list="list"/>
-		</main>
-	</div>
-</mk-ui>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import XUsers from './user-list.users.vue';
-
-export default Vue.extend({
-	components: {
-		XUsers
-	},
-	data() {
-		return {
-			fetching: true,
-			list: null
-		};
-	},
-	watch: {
-		$route: 'fetch'
-	},
-	mounted() {
-		this.fetch();
-	},
-	methods: {
-		fetch() {
-			this.fetching = true;
-
-			(this as any).api('users/lists/show', {
-				listId: this.$route.params.list
-			}).then(list => {
-				this.list = list;
-				this.fetching = false;
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-[data-id="02010e15-cc48-4245-8636-16078a9b623c"]
-	display flex
-	justify-content center
-	margin 0 auto
-	max-width 1200px
-
-	> main
-	> div > div
-		> *:not(:last-child)
-			margin-bottom 16px
-
-	> main
-		padding 16px
-		width calc(100% - 275px * 2)
-
-	> div
-		width 275px
-		margin 0
-		padding 16px 0 16px 16px
-
-</style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 462999a64f..97ec96827a 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -126,9 +126,13 @@
 	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.1)",
 	"desktopHeaderSearchHoverBg": "rgba(255, 255, 255, 0.04)",
 	"desktopHeaderSearchFg": "#fff",
+	"desktopNotificationBg": ":alpha<0.9<$secondary",
+	"desktopNotificationFg": ":alpha<0.7<$text",
+	"desktopNotificationShadow": "rgba(0, 0, 0, 0.4)",
 	"desktopPostFormBg": "@face",
 	"desktopPostFormTextareaBg": "rgba(0, 0, 0, 0.25)",
 	"desktopPostFormTextareaFg": "#fff",
+	"desktopRenoteFormFooter": ":lighten<5<$secondary",
 	"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.15)",
 	"desktopTimelineSrc": "@faceTextButton",
 	"desktopTimelineSrcHover": "@faceTextButtonHover",
@@ -136,6 +140,8 @@
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":lighten<10<$text",
 
+	"deckAcrylicColumnBg": "rgba(0, 0, 0, 0.25)",
+
 	"mobileHeaderBg": ":lighten<5<$secondary",
 	"mobileHeaderFg": "$text",
 	"mobileNavBackdrop": "rgba(0, 0, 0, 0.7)",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 60824e0a84..52822bc5fe 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -126,9 +126,13 @@
 	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)",
 	"desktopHeaderSearchHoverBg": "rgba(0, 0, 0, 0.08)",
 	"desktopHeaderSearchFg": "#000",
-	"desktopPostFormBg": "#fff6f6",
+	"desktopNotificationBg": ":alpha<0.9<$secondary",
+	"desktopNotificationFg": ":alpha<0.7<$text",
+	"desktopNotificationShadow": "rgba(0, 0, 0, 0.2)",
+	"desktopPostFormBg": ":lighten<33<$primary",
 	"desktopPostFormTextareaBg": "#fff",
 	"desktopPostFormTextareaFg": "#333",
+	"desktopRenoteFormFooter": ":lighten<33<$primary",
 	"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.08)",
 	"desktopTimelineSrc": "#6f7477",
 	"desktopTimelineSrcHover": "#525a5f",
@@ -136,6 +140,8 @@
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":darken<10<$text",
 
+	"deckAcrylicColumnBg": "rgba(0, 0, 0, 0.1)",
+
 	"mobileHeaderBg": ":lighten<5<$secondary",
 	"mobileHeaderFg": "$text",
 	"mobileNavBackdrop": "rgba(0, 0, 0, 0.2)",

From 0343de95b8843124adcbec1f1665369cdb185718 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 15:56:50 +0900
Subject: [PATCH 58/72] wip

---
 .../app/desktop/views/components/post-form.vue     | 14 ++++----------
 src/client/theme/dark.json                         |  3 +++
 src/client/theme/light.json                        |  3 +++
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index 5dd40c9ba5..b2a6fed8e8 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -434,7 +434,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-post-form
 	display block
 	padding 16px
 	background var(--desktopPostFormBg)
@@ -677,7 +677,7 @@ root(isDark)
 		width 40px
 		height 40px
 		font-size 1em
-		color isDark ? var(--primary) : var(--primaryAlpha05)
+		color var(--desktopPostFormTransparentButtonFg)
 		background transparent
 		outline none
 		border solid 1px transparent
@@ -685,11 +685,11 @@ root(isDark)
 
 		&:hover
 			background transparent
-			border-color isDark ? var(--primaryAlpha05) : var(--primaryAlpha03)
+			border-color var(--primaryAlpha03)
 
 		&:active
 			color var(--primaryAlpha06)
-			background isDark ? transparent : linear-gradient(to bottom, var(--primaryLighten80) 0%, var(--primaryLighten90) 100%)
+			background linear-gradient(to bottom, var(--desktopPostFormTransparentButtonActiveGradientStart) 0%, var(--desktopPostFormTransparentButtonActiveGradientEnd) 100%)
 			border-color var(--primaryAlpha05)
 			box-shadow 0 2px 4px rgba(#000, 0.15) inset
 
@@ -714,10 +714,4 @@ root(isDark)
 		border dashed 2px var(--primaryAlpha05)
 		pointer-events none
 
-.mk-post-form[data-darkmode]
-	root(true)
-
-.mk-post-form:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 97ec96827a..ee5e1fb42c 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -132,6 +132,9 @@
 	"desktopPostFormBg": "@face",
 	"desktopPostFormTextareaBg": "rgba(0, 0, 0, 0.25)",
 	"desktopPostFormTextareaFg": "#fff",
+	"desktopPostFormTransparentButtonFg": "$primary",
+	"desktopPostFormTransparentButtonActiveGradientStart": ":darken<8<$secondary",
+	"desktopPostFormTransparentButtonActiveGradientEnd": ":darken<3<$secondary",
 	"desktopRenoteFormFooter": ":lighten<5<$secondary",
 	"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.15)",
 	"desktopTimelineSrc": "@faceTextButton",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 52822bc5fe..4cfba2c1f6 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -132,6 +132,9 @@
 	"desktopPostFormBg": ":lighten<33<$primary",
 	"desktopPostFormTextareaBg": "#fff",
 	"desktopPostFormTextareaFg": "#333",
+	"desktopPostFormTransparentButtonFg": ":alpha<0.5<$primary",
+	"desktopPostFormTransparentButtonActiveGradientStart": ":lighten<30<$primary",
+	"desktopPostFormTransparentButtonActiveGradientEnd": ":lighten<33<$primary",
 	"desktopRenoteFormFooter": ":lighten<33<$primary",
 	"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.08)",
 	"desktopTimelineSrc": "#6f7477",

From 99a2c5b3fa552f2abe449cb3f5b3d40270be5478 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 15:58:23 +0900
Subject: [PATCH 59/72] wip

---
 src/client/app/desktop/views/components/home.vue | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
index a07af02ea6..bdaf2ddf47 100644
--- a/src/client/app/desktop/views/components/home.vue
+++ b/src/client/app/desktop/views/components/home.vue
@@ -247,9 +247,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-home
 	display block
 
 	&[data-customize]
@@ -279,7 +277,7 @@ root(isDark)
 		left 0
 		width 100%
 		height 48px
-		color isDark ? #fff : #000
+		color var(--text)
 		background var(--desktopHeaderBg)
 		box-shadow 0 1px 1px rgba(#000, 0.075)
 
@@ -320,7 +318,7 @@ root(isDark)
 						line-height 48px
 
 				&.trash
-					border-left solid 1px isDark ? #1c2023 : #ddd
+					border-left solid 1px var(--faceDivider)
 
 					> div
 						width 100%
@@ -395,10 +393,4 @@ root(isDark)
 				max-width 700px
 				margin 0 auto
 
-.mk-home[data-darkmode]
-	root(true)
-
-.mk-home:not([data-darkmode])
-	root(false)
-
 </style>

From 671c7cf06b4f7f6248f9a961f79af1cc78a7b598 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 16:08:09 +0900
Subject: [PATCH 60/72] wip

---
 .../views/components/follow-button.vue        | 33 +++++++------------
 1 file changed, 11 insertions(+), 22 deletions(-)

diff --git a/src/client/app/desktop/views/components/follow-button.vue b/src/client/app/desktop/views/components/follow-button.vue
index 014b536f59..45e63ad928 100644
--- a/src/client/app/desktop/views/components/follow-button.vue
+++ b/src/client/app/desktop/views/components/follow-button.vue
@@ -101,9 +101,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-follow-button
 	display block
 	cursor pointer
 	padding 0
@@ -130,33 +128,30 @@ root(isDark)
 			border-radius 8px
 
 	&:not(.active)
-		color isDark ? #fff : #888
-		background isDark ? linear-gradient(to bottom, #313543 0%, #282c37 100%) : linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
-		border solid 1px isDark ? #1c2023 : #e2e2e2
+		color var(--primary)
+		border solid 1px var(--primary)
 
 		&:hover
-			background isDark ? linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%) : linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
-			border-color isDark ? #151a1d : #dcdcdc
+			background var(--primaryAlpha03)
 
 		&:active
-			background isDark ? #22262f : #ececec
-			border-color isDark ? #151a1d : #dcdcdc
+			background var(--primaryAlpha05)
 
 	&.active
 		color var(--primaryForeground)
-		background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
-		border solid 1px var(--primaryLighten15)
+		background var(--primary)
+		border solid 1px var(--primary)
 
 		&:not(:disabled)
 			font-weight bold
 
 		&:hover:not(:disabled)
-			background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
-			border-color var(--primary)
+			background var(--primaryLighten5)
+			border-color var(--primaryLighten5)
 
 		&:active:not(:disabled)
-			background var(--primary)
-			border-color var(--primary)
+			background var(--primaryDarken5)
+			border-color var(--primaryDarken5)
 
 	&.wait
 		cursor wait !important
@@ -167,10 +162,4 @@ root(isDark)
 		height 38px
 		line-height 38px
 
-.mk-follow-button[data-darkmode]
-	root(true)
-
-.mk-follow-button:not([data-darkmode])
-	root(false)
-
 </style>

From e0d3fd17ce5df8ac7e2adc5c4434cd8b050e5a86 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 16:13:47 +0900
Subject: [PATCH 61/72] wio

---
 src/client/app/desktop/views/components/drive.vue | 15 +++------------
 src/client/theme/dark.json                        |  1 +
 src/client/theme/light.json                       |  1 +
 3 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/client/app/desktop/views/components/drive.vue b/src/client/app/desktop/views/components/drive.vue
index a1748963aa..f9b7eea64e 100644
--- a/src/client/app/desktop/views/components/drive.vue
+++ b/src/client/app/desktop/views/components/drive.vue
@@ -585,17 +585,14 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
-
+.mk-drive
 	> nav
 		display block
 		z-index 2
 		width 100%
 		overflow auto
 		font-size 0.9em
-		color isDark ? #d2d9dc : #555
+		color var(--text)
 		background var(--face)
 		box-shadow 0 1px 0 rgba(#000, 0.05)
 
@@ -674,7 +671,7 @@ root(isDark)
 		padding 8px
 		height calc(100% - 38px)
 		overflow auto
-		background isDark ? #191b22 : #fff
+		background var(--desktopDriveBg)
 
 		&, *
 			user-select none
@@ -780,10 +777,4 @@ root(isDark)
 	> input
 		display none
 
-.mk-drive[data-darkmode]
-	root(true)
-
-.mk-drive:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index ee5e1fb42c..151001350d 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -140,6 +140,7 @@
 	"desktopTimelineSrc": "@faceTextButton",
 	"desktopTimelineSrcHover": "@faceTextButtonHover",
 	"desktopWindowTitle": "@faceHeaderText",
+	"desktopDriveBg": "@bg",
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":lighten<10<$text",
 
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 4cfba2c1f6..0f26f8b165 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -140,6 +140,7 @@
 	"desktopTimelineSrc": "#6f7477",
 	"desktopTimelineSrcHover": "#525a5f",
 	"desktopWindowTitle": "#666",
+	"desktopDriveBg": "#fff",
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":darken<10<$text",
 

From 3f4de3b1cc9b33f741c28aa7c3f92ffdb5fbcd17 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 17:49:37 +0900
Subject: [PATCH 62/72] wip

---
 .../desktop/views/components/drive.folder.vue | 20 ++++++-------------
 src/client/theme/dark.json                    |  4 ++++
 src/client/theme/light.json                   |  4 ++++
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/client/app/desktop/views/components/drive.folder.vue b/src/client/app/desktop/views/components/drive.folder.vue
index cb49215cbb..cfc2b64ff4 100644
--- a/src/client/app/desktop/views/components/drive.folder.vue
+++ b/src/client/app/desktop/views/components/drive.folder.vue
@@ -214,12 +214,10 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.ynntpczxvnusfwdyxsfuhvcmuypqopdd
 	padding 8px
 	height 64px
-	background isDark ? var(--primaryAlpha02) : var(--primaryLighten95)
+	background var(--desktopDriveFolderBg)
 	border-radius 4px
 
 	&, *
@@ -229,10 +227,10 @@ root(isDark)
 		pointer-events none
 
 	&:hover
-		//background isDark ? rgba(var(--primaryLighten10), 0.2) : var(--primaryLighten90)
+		background var(--desktopDriveFolderHoverBg)
 
 	&:active
-		//background isDark ? rgba(var(--primaryDarken10), 0.2) : var(--primaryLighten85)
+		background var(--desktopDriveFolderActiveBg)
 
 	&[data-is-contextmenu-showing]
 	&[data-draghover]
@@ -248,22 +246,16 @@ root(isDark)
 			border-radius 4px
 
 	&[data-draghover]
-		//background isDark ? rgba(var(--primaryDarken10), 0.2) : var(--primaryLighten90)
+		background var(--desktopDriveFolderActiveBg)
 
 	> .name
 		margin 0
 		font-size 0.9em
-		color isDark ? #fff : var(--primaryDarken30)
+		color var(--desktopDriveFolderFg)
 
 		> [data-fa]
 			margin-right 4px
 			margin-left 2px
 			text-align left
 
-.ynntpczxvnusfwdyxsfuhvcmuypqopdd[data-darkmode]
-	root(true)
-
-.ynntpczxvnusfwdyxsfuhvcmuypqopdd:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 151001350d..29d4fc2e5d 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -141,6 +141,10 @@
 	"desktopTimelineSrcHover": "@faceTextButtonHover",
 	"desktopWindowTitle": "@faceHeaderText",
 	"desktopDriveBg": "@bg",
+	"desktopDriveFolderBg": ":alpha<0.2<$primary",
+	"desktopDriveFolderHoverBg": ":alpha<0.3<$primary",
+	"desktopDriveFolderActiveBg": ":alpha<0.3<:darken<10<$primary",
+	"desktopDriveFolderFg": "#fff",
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":lighten<10<$text",
 
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 0f26f8b165..e4116480e2 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -141,6 +141,10 @@
 	"desktopTimelineSrcHover": "#525a5f",
 	"desktopWindowTitle": "#666",
 	"desktopDriveBg": "#fff",
+	"desktopDriveFolderBg": ":lighten<31<$primary",
+	"desktopDriveFolderHoverBg": ":lighten<27<$primary",
+	"desktopDriveFolderActiveBg": ":lighten<25<$primary",
+	"desktopDriveFolderFg": ":darken<10<$primary",
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":darken<10<$text",
 

From 8e3dd75c8577633acbe2dfefd41119e3991de8a5 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 19:59:19 +0900
Subject: [PATCH 63/72] wip

---
 .../components/games/reversi/reversi.game.vue | 22 ++----
 .../games/reversi/reversi.index.vue           | 34 ++++-----
 .../components/games/reversi/reversi.room.vue | 37 ++++------
 .../components/games/reversi/reversi.vue      | 14 +---
 .../views/components/messaging-room.form.vue  | 12 +---
 .../app/common/views/components/poll.vue      | 17 ++---
 .../app/common/views/components/tag-cloud.vue |  8 +--
 .../app/common/views/components/trends.vue    | 15 ++--
 .../app/common/views/components/ui/button.vue | 14 ++--
 .../views/components/ui/form/button.vue       | 20 ++----
 .../common/views/components/ui/form/radio.vue | 12 +---
 .../app/common/views/components/ui/input.vue  | 16 ++---
 .../app/common/views/components/ui/radio.vue  | 10 +--
 .../app/common/views/components/ui/select.vue | 16 ++---
 src/client/app/common/views/pages/follow.vue  | 13 +---
 .../app/common/views/widgets/analog-clock.vue | 10 +--
 .../app/common/views/widgets/calendar.vue     | 15 ++--
 .../app/common/views/widgets/donation.vue     | 72 +++++++------------
 src/client/app/common/views/widgets/memo.vue  | 14 +---
 .../app/common/views/widgets/server.cpu.vue   | 10 +--
 .../app/common/views/widgets/server.disk.vue  | 10 +--
 .../common/views/widgets/server.memory.vue    | 10 +--
 .../app/common/views/widgets/server.pie.vue   | 10 +--
 .../views/components/context-menu.menu.vue    | 16 ++---
 .../desktop/views/components/context-menu.vue | 10 +--
 .../desktop/views/components/drive.file.vue   | 12 +---
 .../desktop/views/components/note-preview.vue |  8 +--
 .../views/components/notes.note.sub.vue       |  8 +--
 .../views/components/post-form-window.vue     | 11 +--
 .../views/components/settings.tags.vue        |  9 +--
 .../desktop/views/components/ui.header.vue    |  8 +--
 .../views/components/widget-container.vue     |  8 +--
 .../app/desktop/views/components/window.vue   | 19 +----
 .../views/pages/admin/admin.cpu-memory.vue    |  8 +--
 .../desktop/views/pages/deck/deck.column.vue  |  5 +-
 .../views/pages/deck/deck.note.sub.vue        |  8 +--
 .../views/pages/deck/deck.notification.vue    |  8 +--
 .../views/pages/deck/deck.notifications.vue   |  9 +--
 .../pages/user/user.followers-you-know.vue    |  8 +--
 .../app/desktop/views/widgets/trends.vue      |  8 +--
 .../mobile/views/components/note-preview.vue  |  8 +--
 .../app/mobile/views/components/notes.vue     | 10 +--
 src/client/app/mobile/views/pages/welcome.vue |  9 +--
 src/client/theme/dark.json                    | 30 +++++++-
 src/client/theme/light.json                   | 30 +++++++-
 45 files changed, 200 insertions(+), 461 deletions(-)

diff --git a/src/client/app/common/views/components/games/reversi/reversi.game.vue b/src/client/app/common/views/components/games/reversi/reversi.game.vue
index bc230496a6..751abe2ecd 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.game.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.game.vue
@@ -304,9 +304,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.xqnhankfuuilcwvhgsopeqncafzsquya
 	text-align center
 
 	> .go-index
@@ -319,7 +317,7 @@ root(isDark)
 
 	> header
 		padding 8px
-		border-bottom dashed 1px isDark ? #4c5761 : #c4cdd4
+		border-bottom dashed 1px var(--reversiGameHeaderLine)
 
 		a
 			color inherit
@@ -386,16 +384,16 @@ root(isDark)
 						user-select none
 
 					&.empty
-						border solid 2px isDark ? #51595f : #eee
+						border solid 2px var(--reversiGameEmptyCell)
 
 					&.empty.can
-						background isDark ? #51595f : #eee
+						background var(--reversiGameEmptyCell)
 
 					&.empty.myTurn
-						border-color isDark ? #6a767f : #ddd
+						border-color var(--reversiGameEmptyCellMyTurn)
 
 						&.can
-							background isDark ? #51595f : #eee
+							background var(--reversiGameEmptyCellCanPut)
 							cursor pointer
 
 							&:hover
@@ -409,7 +407,7 @@ root(isDark)
 						box-shadow 0 0 0 4px var(--primaryAlpha07)
 
 					&.isEnded
-						border-color isDark ? #6a767f : #ddd
+						border-color var(--reversiGameEmptyCellMyTurn)
 
 					&.none
 						border-color transparent !important
@@ -458,10 +456,4 @@ root(isDark)
 			margin 0 8px
 			min-width 70px
 
-.xqnhankfuuilcwvhgsopeqncafzsquya[data-darkmode]
-	root(true)
-
-.xqnhankfuuilcwvhgsopeqncafzsquya:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/games/reversi/reversi.index.vue b/src/client/app/common/views/components/games/reversi/reversi.index.vue
index 44a1262636..3725aa6cb4 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.index.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.index.vue
@@ -138,9 +138,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.phgnkghfpyvkrvwiajkiuoxyrdaqpzcx
 	> h1
 		margin 0
 		padding 24px
@@ -148,7 +146,7 @@ root(isDark)
 		text-align center
 		font-weight normal
 		color #fff
-		background linear-gradient(to bottom, isDark ? #45730e : #8bca3e, isDark ? #464300 : #d6cf31)
+		background linear-gradient(to bottom, var(--reversiBannerGradientStart), var(--reversiBannerGradientEnd))
 
 		& + p
 			margin 0
@@ -156,7 +154,7 @@ root(isDark)
 			margin-bottom 12px
 			text-align center
 			font-size 14px
-			border-bottom solid 1px isDark ? #535f65 : #d3d9dc
+			border-bottom solid 1px var(--faceDivider)
 
 	> .play
 		margin 0 auto
@@ -171,14 +169,14 @@ root(isDark)
 				padding 16px
 				font-size 14px
 				text-align left
-				background isDark ? #282c37 : #f5f5f5
+				background var(--reversiDescBg)
 				border-radius 8px
 
 	> section
 		margin 0 auto
 		padding 0 16px 16px 16px
 		max-width 500px
-		border-top solid 1px isDark ? #535f65 : #d3d9dc
+		border-top solid 1px var(--faceDivider)
 
 		> h2
 			margin 0
@@ -189,9 +187,9 @@ root(isDark)
 	.invitation
 		margin 8px 0
 		padding 8px
-		color isDark ? #fff : #677f84
+		color var(--text)
 		background var(--face)
-		box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
+		box-shadow 0 2px 16px var(--reversiListItemShadow)
 		border-radius 6px
 		cursor pointer
 
@@ -203,10 +201,10 @@ root(isDark)
 			border-color var(--primary)
 
 		&:hover
-			background isDark ? #313543 : #f5f5f5
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
 
 		&:active
-			background isDark ? #1e222b : #eee
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
 
 		> .avatar
 			width 32px
@@ -221,9 +219,9 @@ root(isDark)
 		display block
 		margin 8px 0
 		padding 8px
-		color isDark ? #fff : #677f84
+		color var(--text)
 		background var(--face)
-		box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
+		box-shadow 0 2px 16px var(--reversiListItemShadow)
 		border-radius 6px
 		cursor pointer
 
@@ -232,10 +230,10 @@ root(isDark)
 			user-select none
 
 		&:hover
-			background isDark ? #313543 : #f5f5f5
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
 
 		&:active
-			background isDark ? #1e222b : #eee
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
 
 		> .avatar
 			width 32px
@@ -246,10 +244,4 @@ root(isDark)
 			margin 0 8px
 			line-height 32px
 
-.phgnkghfpyvkrvwiajkiuoxyrdaqpzcx[data-darkmode]
-	root(true)
-
-.phgnkghfpyvkrvwiajkiuoxyrdaqpzcx:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/games/reversi/reversi.room.vue b/src/client/app/common/views/components/games/reversi/reversi.room.vue
index b407046ba9..236141ee28 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.room.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.room.vue
@@ -252,11 +252,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.urbixznjwwuukfsckrwzwsqzsxornqij
 	text-align center
-	background isDark ? #191b22 : #f9f9f9
+	background var(--bg)
 
 	> header
 		padding 8px
@@ -274,9 +272,9 @@ root(isDark)
 						width 100%
 						padding 12px 14px
 						background var(--face)
-						border 1px solid isDark ? #6a707d : #dcdfe6
+						border 1px solid var(--reversiMapSelectBorder)
 						border-radius 4px
-						color isDark ? #fff : #606266
+						color var(--text)
 						cursor pointer
 						transition border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)
 						-webkit-appearance none
@@ -284,7 +282,7 @@ root(isDark)
 						appearance none
 
 						&:hover
-							border-color isDark ? #a7aebd : #c0c4cc
+							border-color var(--reversiMapSelectHoverBorder)
 
 						&:focus
 						&:active
@@ -294,7 +292,8 @@ root(isDark)
 					> .random
 						padding 32px 0
 						font-size 64px
-						color isDark ? #4e5961 : #d8d8d8
+						color var(--text)
+						opacity 0.7
 
 					> .board
 						display grid
@@ -302,11 +301,11 @@ root(isDark)
 						width 300px
 						height 300px
 						margin 0 auto
-						color isDark ? #fff : #444
+						color var(--text)
 
 						> div
 							background transparent
-							border solid 2px isDark ? #6a767f : #ddd
+							border solid 2px var(--faceDivider)
 							border-radius 6px
 							overflow hidden
 							cursor pointer
@@ -332,31 +331,25 @@ root(isDark)
 			max-width 400px
 			border-radius 4px
 			background var(--face)
-			color isDark ? #fff : #303133
-			box-shadow 0 2px 12px 0 rgba(#000, isDark ? 0.7 : 0.1)
+			color var(--text)
+			box-shadow 0 2px 12px 0 var(--reversiRoomFormShadow)
 
 			> header
 				padding 18px 20px
-				border-bottom 1px solid isDark ? #1c2023 : #ebeef5
+				border-bottom 1px solid var(--faceDivider)
 
 			> div
 				padding 20px
-				color isDark ? #fff : #606266
+				color var(--text)
 
 	> footer
 		position sticky
 		bottom 0
 		padding 16px
-		background rgba(isDark ? #191b22 : #fff, 0.9)
-		border-top solid 1px isDark ? #606266 : #c4cdd4
+		background var(--reversiRoomFooterBg)
+		border-top solid 1px var(--faceDivider)
 
 		> .status
 			margin 0 0 16px 0
 
-.urbixznjwwuukfsckrwzwsqzsxornqij[data-darkmode]
-	root(true)
-
-.urbixznjwwuukfsckrwzwsqzsxornqij:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/games/reversi/reversi.vue b/src/client/app/common/views/components/games/reversi/reversi.vue
index 75d7d574c1..6eb9511ce9 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.vue
@@ -156,11 +156,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
-	color isDark ? #fff : #677f84
-	background isDark ? #191b22 : #fff
+.vchtoekanapleubgzioubdtmlkribzfd
+	color var(--text)
+	background var(--bg)
 
 	> .matching
 		> h1
@@ -177,10 +175,4 @@ root(isDark)
 			text-align center
 			border-top dashed 1px #c4cdd4
 
-.vchtoekanapleubgzioubdtmlkribzfd[data-darkmode]
-	root(true)
-
-.vchtoekanapleubgzioubdtmlkribzfd:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/messaging-room.form.vue b/src/client/app/common/views/components/messaging-room.form.vue
index 8e62587c20..c93fd7f78d 100644
--- a/src/client/app/common/views/components/messaging-room.form.vue
+++ b/src/client/app/common/views/components/messaging-room.form.vue
@@ -195,9 +195,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-messaging-form
 	> textarea
 		cursor auto
 		display block
@@ -212,7 +210,7 @@ root(isDark)
 		color var(--inputText)
 		outline none
 		border none
-		border-top solid 1px isDark ? #4b5056 : #eee
+		border-top solid 1px var(--faceDivider)
 		border-radius 0
 		box-shadow none
 		background transparent
@@ -302,10 +300,4 @@ root(isDark)
 	input[type=file]
 		display none
 
-.mk-messaging-form[data-darkmode]
-	root(true)
-
-.mk-messaging-form:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/poll.vue b/src/client/app/common/views/components/poll.vue
index 0e60932796..0dc2622f9b 100644
--- a/src/client/app/common/views/components/poll.vue
+++ b/src/client/app/common/views/components/poll.vue
@@ -67,10 +67,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
-
+.mk-poll
 	> ul
 		display block
 		margin 0
@@ -82,8 +79,8 @@ root(isDark)
 			margin 4px 0
 			padding 4px 8px
 			width 100%
-			color isDark ? #fff : #000
-			border solid 1px isDark ? #5e636f : #eee
+			color var(--pollChoiceText)
+			border solid 1px var(--pollChoiceBorder)
 			border-radius 4px
 			overflow hidden
 			cursor pointer
@@ -110,7 +107,7 @@ root(isDark)
 					margin-left 4px
 
 	> p
-		color isDark ? #a3aebf : #000
+		color var(--text)
 
 		a
 			color inherit
@@ -125,10 +122,4 @@ root(isDark)
 			&:active
 				background transparent
 
-.mk-poll[data-darkmode]
-	root(true)
-
-.mk-poll:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/tag-cloud.vue b/src/client/app/common/views/components/tag-cloud.vue
index 5f2cc5276a..5cc828082f 100644
--- a/src/client/app/common/views/components/tag-cloud.vue
+++ b/src/client/app/common/views/components/tag-cloud.vue
@@ -63,7 +63,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.jtivnzhfwquxpsfidertopbmwmchmnmo
 	height 100%
 	width 100%
 
@@ -81,10 +81,4 @@ root(isDark)
 		height 100%
 		width 100%
 
-.jtivnzhfwquxpsfidertopbmwmchmnmo[data-darkmode]
-	root(true)
-
-.jtivnzhfwquxpsfidertopbmwmchmnmo:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/trends.vue b/src/client/app/common/views/components/trends.vue
index 0042dbe853..3d36d7449c 100644
--- a/src/client/app/common/views/components/trends.vue
+++ b/src/client/app/common/views/components/trends.vue
@@ -49,13 +49,14 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.csqvmxybqbycalfhkxvyfrgbrdalkaoc
 	> .fetching
 	> .empty
 		margin 0
 		padding 16px
 		text-align center
-		color #aaa
+		color var(--text)
+		opacity 0.7
 
 		> [data-fa]
 			margin-right 4px
@@ -70,13 +71,13 @@ root(isDark)
 			padding 14px 16px
 
 			&:not(:last-child)
-				border-bottom solid 1px isDark ? #393f4f : #eee
+				border-bottom solid 1px var(--faceDivider)
 
 			> .tag
 				flex 1
 				overflow hidden
 				font-size 14px
-				color isDark ? #9baec8 : #65727b
+				color var(--text)
 
 				> a
 					display block
@@ -94,10 +95,4 @@ root(isDark)
 			> .chart
 				height 30px
 
-.csqvmxybqbycalfhkxvyfrgbrdalkaoc[data-darkmode]
-	root(true)
-
-.csqvmxybqbycalfhkxvyfrgbrdalkaoc:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/ui/button.vue b/src/client/app/common/views/components/ui/button.vue
index c411f0f5c9..4934a1bdfa 100644
--- a/src/client/app/common/views/components/ui/button.vue
+++ b/src/client/app/common/views/components/ui/button.vue
@@ -32,7 +32,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark, fill)
+root(fill)
 	> button
 		display block
 		width 100%
@@ -65,16 +65,10 @@ root(isDark, fill)
 			&:active
 				background var(--primaryAlpha03)
 
-.ui-button[data-darkmode]
+.ui-button
 	&.fill
-		root(true, true)
+		root(true)
 	&:not(.fill)
-		root(true, false)
-
-.ui-button:not([data-darkmode])
-	&.fill
-		root(false, true)
-	&:not(.fill)
-		root(false, false)
+		root(false)
 
 </style>
diff --git a/src/client/app/common/views/components/ui/form/button.vue b/src/client/app/common/views/components/ui/form/button.vue
index bccf36e52f..3fd7b47629 100644
--- a/src/client/app/common/views/components/ui/form/button.vue
+++ b/src/client/app/common/views/components/ui/form/button.vue
@@ -25,9 +25,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.nvemkhtwcnnpkdrwfcbzuwhfulejhmzg
 	display inline-block
 
 	& + .nvemkhtwcnnpkdrwfcbzuwhfulejhmzg
@@ -38,11 +36,11 @@ root(isDark)
 		margin 0
 		padding 12px 20px
 		font-size 14px
-		border 1px solid isDark ? #6d727d : #dcdfe6
+		border 1px solid var(--formButtonBorder)
 		border-radius 4px
 		outline none
 		box-shadow none
-		color isDark ? #fff : #606266
+		color var(--text)
 		transition 0.1s
 
 		*
@@ -51,12 +49,12 @@ root(isDark)
 		&:hover
 		&:focus
 			color var(--primary)
-			//background rgba(var(--primary-r), var(--primary-g), var(--primary-b), isDark ? 0.2 : 0.12)
-			//border-color rgba(var(--primary-r), var(--primary-g), var(--primary-b), isDark ? 0.5 : 0.3)
+			background var(--formButtonHoverBg)
+			border-color var(--formButtonHoverBorder)
 
 		&:active
 			color var(--primaryDarken20)
-			//background rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.12)
+			background var(--formButtonActiveBg)
 			border-color var(--primary)
 			transition all 0s
 
@@ -80,10 +78,4 @@ root(isDark)
 		> button
 			border-radius 64px
 
-.nvemkhtwcnnpkdrwfcbzuwhfulejhmzg[data-darkmode]
-	root(true)
-
-.nvemkhtwcnnpkdrwfcbzuwhfulejhmzg:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/ui/form/radio.vue b/src/client/app/common/views/components/ui/form/radio.vue
index 5728a8171b..396b2997e5 100644
--- a/src/client/app/common/views/components/ui/form/radio.vue
+++ b/src/client/app/common/views/components/ui/form/radio.vue
@@ -49,9 +49,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.uywduthvrdnlpsvsjkqigicixgyfctto
 	display inline-flex
 	margin 0 16px 0 0
 	cursor pointer
@@ -93,7 +91,7 @@ root(isDark)
 		width 20px
 		height 20px
 		background none
-		border solid 2px isDark ? rgba(#fff, 0.6) : rgba(#000, 0.4)
+		border solid 2px var(--radioBorder)
 		border-radius 100%
 		transition inherit
 
@@ -117,10 +115,4 @@ root(isDark)
 		line-height 20px
 		cursor pointer
 
-.uywduthvrdnlpsvsjkqigicixgyfctto[data-darkmode]
-	root(true)
-
-.uywduthvrdnlpsvsjkqigicixgyfctto:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue
index d7b83d81cd..d7e72409f0 100644
--- a/src/client/app/common/views/components/ui/input.vue
+++ b/src/client/app/common/views/components/ui/input.vue
@@ -155,9 +155,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark, fill)
+root(fill)
 	margin 32px 0
 
 	> .icon
@@ -335,16 +333,10 @@ root(isDark, fill)
 				left 0 !important
 				transform scale(0.75)
 
-.ui-input[data-darkmode]
+.ui-input
 	&.fill
-		root(true, true)
+		root(true)
 	&:not(.fill)
-		root(true, false)
-
-.ui-input:not([data-darkmode])
-	&.fill
-		root(false, true)
-	&:not(.fill)
-		root(false, false)
+		root(false)
 
 </style>
diff --git a/src/client/app/common/views/components/ui/radio.vue b/src/client/app/common/views/components/ui/radio.vue
index 3a4407abc0..868a339aa4 100644
--- a/src/client/app/common/views/components/ui/radio.vue
+++ b/src/client/app/common/views/components/ui/radio.vue
@@ -51,9 +51,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.ui-radio
 	display inline-block
 	margin 0 32px 0 0
 	cursor pointer
@@ -111,10 +109,4 @@ root(isDark)
 		line-height 20px
 		cursor pointer
 
-.ui-radio[data-darkmode]
-	root(true)
-
-.ui-radio:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/ui/select.vue b/src/client/app/common/views/components/ui/select.vue
index bdb730fea9..8c1b8c0269 100644
--- a/src/client/app/common/views/components/ui/select.vue
+++ b/src/client/app/common/views/components/ui/select.vue
@@ -70,9 +70,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark, fill)
+root(fill)
 	margin 32px 0
 
 	> .icon
@@ -200,16 +198,10 @@ root(isDark, fill)
 				left 0 !important
 				transform scale(0.75)
 
-.ui-select[data-darkmode]
+.ui-select
 	&.fill
-		root(true, true)
+		root(true)
 	&:not(.fill)
-		root(true, false)
-
-.ui-select:not([data-darkmode])
-	&.fill
-		root(false, true)
-	&:not(.fill)
-		root(false, false)
+		root(false)
 
 </style>
diff --git a/src/client/app/common/views/pages/follow.vue b/src/client/app/common/views/pages/follow.vue
index ef7ee111e2..cb4785f468 100644
--- a/src/client/app/common/views/pages/follow.vue
+++ b/src/client/app/common/views/pages/follow.vue
@@ -107,14 +107,12 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.syxhndwprovvuqhmyvveewmbqayniwkv
 	padding 32px
 	max-width 500px
 	margin 0 auto
 	text-align center
-	color isDark ? #9baec8 : #868c8c
+	color var(--text)
 
 	$bg = var(--face)
 
@@ -124,7 +122,6 @@ root(isDark)
 	> .signed-in-as
 		margin-bottom 16px
 		font-size 14px
-		color isDark ? #9baec8 : #9daab3
 
 	> main
 		margin-bottom 16px
@@ -204,10 +201,4 @@ root(isDark)
 		*
 			pointer-events none
 
-.syxhndwprovvuqhmyvveewmbqayniwkv[data-darkmode]
-	root(true)
-
-.syxhndwprovvuqhmyvveewmbqayniwkv:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/widgets/analog-clock.vue b/src/client/app/common/views/widgets/analog-clock.vue
index 1725c2f1af..cfcdd5a1b6 100644
--- a/src/client/app/common/views/widgets/analog-clock.vue
+++ b/src/client/app/common/views/widgets/analog-clock.vue
@@ -26,16 +26,8 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mkw-analog-clock
 	.mkw-analog-clock--body
 		padding 8px
 
-.mkw-analog-clock[data-darkmode]
-	root(true)
-
-.mkw-analog-clock:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/widgets/calendar.vue b/src/client/app/common/views/widgets/calendar.vue
index 238b493a61..308d73bad8 100644
--- a/src/client/app/common/views/widgets/calendar.vue
+++ b/src/client/app/common/views/widgets/calendar.vue
@@ -116,9 +116,7 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mkw-calendar
 	&[data-special='on-new-years-day']
 		border-color #ef95a0
 
@@ -169,7 +167,8 @@ root(isDark)
 					margin 0 0 2px 0
 					font-size 12px
 					line-height 18px
-					color isDark ? #7a8692 : #888
+					color var(--text)
+					opacity 0.8
 
 					> b
 						margin-left 2px
@@ -177,7 +176,7 @@ root(isDark)
 				> .meter
 					width 100%
 					overflow hidden
-					background isDark ? #1c1f25 : #eee
+					background var(--materBg)
 					border-radius 8px
 
 					> .val
@@ -197,10 +196,4 @@ root(isDark)
 					> .meter > .val
 						background #41ddde
 
-.mkw-calendar[data-darkmode]
-	root(true)
-
-.mkw-calendar:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/widgets/donation.vue b/src/client/app/common/views/widgets/donation.vue
index a91aa8e749..b025b41e7d 100644
--- a/src/client/app/common/views/widgets/donation.vue
+++ b/src/client/app/common/views/widgets/donation.vue
@@ -1,13 +1,15 @@
 <template>
-<div class="mkw-donation" :data-mobile="platform == 'mobile'">
-	<article>
-		<h1>%fa:heart%%i18n:@title%</h1>
-		<p v-if="meta">
-			{{ '%i18n:@text%'.substr(0, '%i18n:@text%'.indexOf('{')) }}
-			<a :href="meta.maintainer.url">{{ meta.maintainer.name }}</a>
-			{{ '%i18n:@text%'.substr('%i18n:@text%'.indexOf('}') + 1) }}
-		</p>
-	</article>
+<div>
+	<mk-widget-container :show-header="false">
+		<article class="dolfvtibguprpxxhfndqaosjitixjohx">
+			<h1>%fa:heart%%i18n:@title%</h1>
+			<p v-if="meta">
+				{{ '%i18n:@text%'.substr(0, '%i18n:@text%'.indexOf('{')) }}
+				<a :href="meta.maintainer.url">{{ meta.maintainer.name }}</a>
+				{{ '%i18n:@text%'.substr('%i18n:@text%'.indexOf('}') + 1) }}
+			</p>
+		</article>
+	</mk-widget-container>
 </div>
 </template>
 
@@ -30,46 +32,22 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
-	background var(--face)
-	border solid 1px isDark ? #c3831c : #ead8bb
-	border-radius 6px
+.dolfvtibguprpxxhfndqaosjitixjohx
+	padding 20px
+	background var(--donationBg)
+	color var(--donationFg)
 
-	> article
-		padding 20px
+	> h1
+		margin 0 0 5px 0
+		font-size 1em
 
-		> h1
-			margin 0 0 5px 0
-			font-size 1em
-			color isDark ? #b2bac1 : #888
+		> [data-fa]
+			margin-right 0.25em
 
-			> [data-fa]
-				margin-right 0.25em
-
-		> p
-			display block
-			z-index 1
-			margin 0
-			font-size 0.8em
-			color isDark ? #a1a6ab : #999
-
-	&[data-mobile]
-		border none
-		background #ead8bb
-		border-radius 8px
-		box-shadow 0 0 0 1px rgba(#000, 0.2)
-
-		> article
-			> h1
-				color #7b8871
-
-			> p
-				color #777d71
-
-.mkw-donation[data-darkmode]
-	root(true)
-
-.mkw-donation:not([data-darkmode])
-	root(false)
+	> p
+		display block
+		z-index 1
+		margin 0
+		font-size 0.8em
 
 </style>
diff --git a/src/client/app/common/views/widgets/memo.vue b/src/client/app/common/views/widgets/memo.vue
index 42df683883..be8b18a4e9 100644
--- a/src/client/app/common/views/widgets/memo.vue
+++ b/src/client/app/common/views/widgets/memo.vue
@@ -57,9 +57,7 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mkw-memo
 	.mkw-memo--body
 		padding-bottom 28px + 16px
 
@@ -69,10 +67,10 @@ root(isDark)
 			max-width 100%
 			min-width 100%
 			padding 16px
-			color isDark ? #fff : #222
+			color var(--inputText)
 			background var(--face)
 			border none
-			border-bottom solid 1px isDark ? #1c2023 : #eee
+			border-bottom solid 1px var(--faceDivider)
 			border-radius 0
 
 		> button
@@ -102,10 +100,4 @@ root(isDark)
 				opacity 0.7
 				cursor default
 
-.mkw-memo[data-darkmode]
-	root(true)
-
-.mkw-memo:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/widgets/server.cpu.vue b/src/client/app/common/views/widgets/server.cpu.vue
index b9748bdf7c..2034aee0eb 100644
--- a/src/client/app/common/views/widgets/server.cpu.vue
+++ b/src/client/app/common/views/widgets/server.cpu.vue
@@ -38,7 +38,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.cpu
 	> .pie
 		padding 10px
 		height 100px
@@ -52,7 +52,7 @@ root(isDark)
 		> p
 			margin 0
 			font-size 12px
-			color isDark ? #a8b4bd : #505050
+			color var(--chartCaption)
 
 			&:first-child
 				font-weight bold
@@ -65,10 +65,4 @@ root(isDark)
 		display block
 		clear both
 
-.cpu[data-darkmode]
-	root(true)
-
-.cpu:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/widgets/server.disk.vue b/src/client/app/common/views/widgets/server.disk.vue
index 99ce624051..667576ab76 100644
--- a/src/client/app/common/views/widgets/server.disk.vue
+++ b/src/client/app/common/views/widgets/server.disk.vue
@@ -46,7 +46,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.disk
 	> .pie
 		padding 10px
 		height 100px
@@ -60,7 +60,7 @@ root(isDark)
 		> p
 			margin 0
 			font-size 12px
-			color isDark ? #a8b4bd : #505050
+			color var(--chartCaption)
 
 			&:first-child
 				font-weight bold
@@ -73,10 +73,4 @@ root(isDark)
 		display block
 		clear both
 
-.disk[data-darkmode]
-	root(true)
-
-.disk:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/widgets/server.memory.vue b/src/client/app/common/views/widgets/server.memory.vue
index 8a60621343..9e12884cf9 100644
--- a/src/client/app/common/views/widgets/server.memory.vue
+++ b/src/client/app/common/views/widgets/server.memory.vue
@@ -46,7 +46,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.memory
 	> .pie
 		padding 10px
 		height 100px
@@ -60,7 +60,7 @@ root(isDark)
 		> p
 			margin 0
 			font-size 12px
-			color isDark ? #a8b4bd : #505050
+			color var(--chartCaption)
 
 			&:first-child
 				font-weight bold
@@ -73,10 +73,4 @@ root(isDark)
 		display block
 		clear both
 
-.memory[data-darkmode]
-	root(true)
-
-.memory:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/widgets/server.pie.vue b/src/client/app/common/views/widgets/server.pie.vue
index d557c52ea5..ce342fd41b 100644
--- a/src/client/app/common/views/widgets/server.pie.vue
+++ b/src/client/app/common/views/widgets/server.pie.vue
@@ -45,7 +45,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+svg
 	display block
 	height 100%
 
@@ -56,12 +56,6 @@ root(isDark)
 
 	> text
 		font-size 0.15px
-		fill isDark ? rgba(#fff, 0.6) : rgba(#000, 0.6)
-
-svg[data-darkmode]
-	root(true)
-
-svg:not([data-darkmode])
-	root(false)
+		fill var(--chartCaption)
 
 </style>
diff --git a/src/client/app/desktop/views/components/context-menu.menu.vue b/src/client/app/desktop/views/components/context-menu.menu.vue
index b65a8e1dea..9e4541a752 100644
--- a/src/client/app/desktop/views/components/context-menu.menu.vue
+++ b/src/client/app/desktop/views/components/context-menu.menu.vue
@@ -31,9 +31,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.menu
 	$width = 240px
 	$item-height = 38px
 	$padding = 10px
@@ -48,7 +46,7 @@ root(isDark)
 		&.divider
 			margin-top $padding
 			padding-top $padding
-			border-top solid 1px isDark ? #1c2023 : #eee
+			border-top solid 1px var(--faceDivider)
 
 		&.nest
 			> p
@@ -77,7 +75,7 @@ root(isDark)
 			margin 0
 			padding 0 32px 0 38px
 			line-height $item-height
-			color isDark ? #c8cece : #868C8C
+			color var(--text)
 			text-decoration none
 			cursor pointer
 
@@ -106,17 +104,11 @@ root(isDark)
 		left $width
 		margin-top -($padding)
 		width $width
-		background isDark ? #282c37 :#fff
+		background var(--popupBg)
 		border-radius 0 4px 4px 4px
 		box-shadow 2px 2px 8px rgba(#000, 0.2)
 		transition visibility 0s linear 0.2s
 
-.menu[data-darkmode]
-	root(true)
-
-.menu:not([data-darkmode])
-	root(false)
-
 </style>
 
 <style lang="stylus" module>
diff --git a/src/client/app/desktop/views/components/context-menu.vue b/src/client/app/desktop/views/components/context-menu.vue
index 170dcf55a1..b0a34866cd 100644
--- a/src/client/app/desktop/views/components/context-menu.vue
+++ b/src/client/app/desktop/views/components/context-menu.vue
@@ -71,7 +71,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.context-menu
 	$width = 240px
 	$item-height = 38px
 	$padding = 10px
@@ -82,15 +82,9 @@ root(isDark)
 	z-index 4096
 	width $width
 	font-size 0.8em
-	background var(--face)
+	background var(--popupBg)
 	border-radius 0 4px 4px 4px
 	box-shadow 2px 2px 8px rgba(#000, 0.2)
 	opacity 0
 
-.context-menu[data-darkmode]
-	root(true)
-
-.context-menu:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/drive.file.vue b/src/client/app/desktop/views/components/drive.file.vue
index 225130baf7..d7e24cfe71 100644
--- a/src/client/app/desktop/views/components/drive.file.vue
+++ b/src/client/app/desktop/views/components/drive.file.vue
@@ -200,9 +200,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.gvfdktuvdgwhmztnuekzkswkjygptfcv
 	padding 8px 0 0 0
 	height 180px
 	border-radius 4px
@@ -337,16 +335,10 @@ root(isDark)
 		font-size 0.8em
 		text-align center
 		word-break break-all
-		color isDark ? #fff : #444
+		color var(--text)
 		overflow hidden
 
 		> .ext
 			opacity 0.5
 
-.gvfdktuvdgwhmztnuekzkswkjygptfcv[data-darkmode]
-	root(true)
-
-.gvfdktuvdgwhmztnuekzkswkjygptfcv:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/note-preview.vue b/src/client/app/desktop/views/components/note-preview.vue
index 7e5a1db8d4..4c1c7e7b2d 100644
--- a/src/client/app/desktop/views/components/note-preview.vue
+++ b/src/client/app/desktop/views/components/note-preview.vue
@@ -47,7 +47,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.qiziqtywpuaucsgarwajitwaakggnisj
 	display flex
 	font-size 0.9em
 
@@ -83,10 +83,4 @@ root(isDark)
 					padding 0
 					color var(--subNoteText)
 
-.qiziqtywpuaucsgarwajitwaakggnisj[data-darkmode]
-	root(true)
-
-.qiziqtywpuaucsgarwajitwaakggnisj:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/notes.note.sub.vue b/src/client/app/desktop/views/components/notes.note.sub.vue
index a0c4cc2fad..ee52670f8f 100644
--- a/src/client/app/desktop/views/components/notes.note.sub.vue
+++ b/src/client/app/desktop/views/components/notes.note.sub.vue
@@ -42,7 +42,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.tkfdzaxtkdeianobciwadajxzbddorql
 	display flex
 	margin 0
 	padding 16px 32px
@@ -88,10 +88,4 @@ root(isDark)
 						max-height 120px
 						font-size 80%
 
-.tkfdzaxtkdeianobciwadajxzbddorql[data-darkmode]
-	root(true)
-
-.tkfdzaxtkdeianobciwadajxzbddorql:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/post-form-window.vue b/src/client/app/desktop/views/components/post-form-window.vue
index 466d5e1fd8..a5d191f2f3 100644
--- a/src/client/app/desktop/views/components/post-form-window.vue
+++ b/src/client/app/desktop/views/components/post-form-window.vue
@@ -77,7 +77,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-post-form-window
 	.mk-post-form-window--header
 		.icon
 			margin-right 8px
@@ -94,15 +94,6 @@ root(isDark)
 
 	.mk-post-form-window--body
 		.notePreview
-			if isDark
-				margin 16px 22px 0 22px
-			else
 				margin 16px 22px
 
-.mk-post-form-window[data-darkmode]
-	root(true)
-
-.mk-post-form-window:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/settings.tags.vue b/src/client/app/desktop/views/components/settings.tags.vue
index a7234f7d87..dfc69a387e 100644
--- a/src/client/app/desktop/views/components/settings.tags.vue
+++ b/src/client/app/desktop/views/components/settings.tags.vue
@@ -47,8 +47,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-root(isDark)
+.vfcitkilproprqtbnpoertpsziierwzi
 	> .timeline
 		padding-bottom 16px
 		border-bottom solid 1px rgba(#000, 0.1)
@@ -56,10 +55,4 @@ root(isDark)
 	> .add
 		margin-top 16px
 
-.vfcitkilproprqtbnpoertpsziierwzi[data-darkmode]
-	root(true)
-
-.vfcitkilproprqtbnpoertpsziierwzi:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
index 5089232b06..1b96e06486 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -77,7 +77,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.header
 	position fixed
 	top 0
 	z-index 1000
@@ -151,10 +151,4 @@ root(isDark)
 						> .mk-ui-header-search
 							display none
 
-.header[data-darkmode]
-	root(true)
-
-.header:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/widget-container.vue b/src/client/app/desktop/views/components/widget-container.vue
index cfcb2785c5..a506357039 100644
--- a/src/client/app/desktop/views/components/widget-container.vue
+++ b/src/client/app/desktop/views/components/widget-container.vue
@@ -25,7 +25,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-widget-container
 	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
@@ -71,10 +71,4 @@ root(isDark)
 			&:active
 				color var(--faceTextButtonActive)
 
-.mk-widget-container[data-darkmode]
-	root(true)
-
-.mk-widget-container:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/window.vue b/src/client/app/desktop/views/components/window.vue
index 5547445537..a1893ffd6b 100644
--- a/src/client/app/desktop/views/components/window.vue
+++ b/src/client/app/desktop/views/components/window.vue
@@ -462,7 +462,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-window
 	display block
 
 	> .bg
@@ -490,10 +490,7 @@ root(isDark)
 		&:focus
 			&:not([data-is-modal])
 				> .body
-					if isDark
-						box-shadow 0 0 0px 1px var(--primaryAlpha05), 0 2px 12px 0 rgba(#000, 0.5)
-					else
-						box-shadow 0 0 0px 1px var(--primaryAlpha05), 0 2px 6px 0 rgba(#000, 0.2)
+						box-shadow 0 0 0px 1px var(--primaryAlpha05), 0 2px 12px 0 var(--desktopWindowShadow)
 
 		> .handle
 			$size = 8px
@@ -561,11 +558,7 @@ root(isDark)
 			overflow hidden
 			background var(--face)
 			border-radius 6px
-
-			if isDark
-				box-shadow 0 2px 12px 0 rgba(#000, 0.5)
-			else
-				box-shadow 0 2px 6px 0 rgba(#000, 0.2)
+			box-shadow 0 2px 12px 0 rgba(#000, 0.5)
 
 			> header
 				$header-height = 40px
@@ -632,10 +625,4 @@ root(isDark)
 		> .main > .body > .content
 			height calc(100% - 40px)
 
-.mk-window[data-darkmode]
-	root(true)
-
-.mk-window:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue b/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue
index ebaa11478d..63b24cea47 100644
--- a/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue
@@ -111,7 +111,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.zyknedwtlthezamcjlolyusmipqmjgxz
 	> svg
 		display block
 		width 50%
@@ -135,10 +135,4 @@ root(isDark)
 		display block
 		clear both
 
-.zyknedwtlthezamcjlolyusmipqmjgxz[data-darkmode]
-	root(true)
-
-.zyknedwtlthezamcjlolyusmipqmjgxz:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue
index 1b939f2f58..c372ef490e 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -305,9 +305,8 @@ export default Vue.extend({
 			background transparent
 			box-shadow none
 
-			if !isDark
-				> button
-					color #bbb
+			> button
+				color var(--text)
 
 	> header
 		display flex
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.sub.vue b/src/client/app/desktop/views/pages/deck/deck.note.sub.vue
index 0b6a13beaf..445bf7e365 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.sub.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.sub.vue
@@ -29,7 +29,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.fnlfosztlhtptnongximhlbykxblytcq
 	display flex
 	padding 16px
 	font-size 10px
@@ -68,10 +68,4 @@ root(isDark)
 					max-height 120px
 					font-size 80%
 
-.fnlfosztlhtptnongximhlbykxblytcq[data-darkmode]
-	root(true)
-
-.fnlfosztlhtptnongximhlbykxblytcq:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.notification.vue b/src/client/app/desktop/views/pages/deck/deck.notification.vue
index b318579b3e..149bd10293 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notification.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notification.vue
@@ -109,7 +109,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.dsfykdcjpuwfvpefwufddclpjhzktmpw
 	> .notification
 		padding 16px
 		font-size 13px
@@ -170,10 +170,4 @@ root(isDark)
 			> div > header i
 				color #888
 
-.dsfykdcjpuwfvpefwufddclpjhzktmpw[data-darkmode]
-	root(true)
-
-.dsfykdcjpuwfvpefwufddclpjhzktmpw:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.notifications.vue b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
index aa48571a5b..1417cc3ee8 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notifications.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
@@ -155,8 +155,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
-
+.oxynyeqmfvracxnglgulyqfgqxnxmehl
 	.transition
 		.mk-notifications-enter
 		.mk-notifications-leave-to
@@ -221,10 +220,4 @@ root(isDark)
 		> [data-fa]
 			margin-right 4px
 
-.oxynyeqmfvracxnglgulyqfgqxnxmehl[data-darkmode]
-	root(true)
-
-.oxynyeqmfvracxnglgulyqfgqxnxmehl:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
index b90d0a831e..cf05006c00 100644
--- a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
+++ b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
@@ -36,7 +36,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.vahgrswmbzfdlmomxnqftuueyvwaafth
 	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
@@ -77,10 +77,4 @@ root(isDark)
 		> i
 			margin-right 4px
 
-.vahgrswmbzfdlmomxnqftuueyvwaafth[data-darkmode]
-	root(true)
-
-.vahgrswmbzfdlmomxnqftuueyvwaafth:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/widgets/trends.vue b/src/client/app/desktop/views/widgets/trends.vue
index aeaab63ac4..a886796132 100644
--- a/src/client/app/desktop/views/widgets/trends.vue
+++ b/src/client/app/desktop/views/widgets/trends.vue
@@ -67,7 +67,7 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mkw-trends
 	.mkw-trends--body
 		> .note
 			padding 16px
@@ -98,10 +98,4 @@ root(isDark)
 			> [data-fa]
 				margin-right 4px
 
-.mkw-trends[data-darkmode]
-	root(true)
-
-.mkw-trends:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/note-preview.vue b/src/client/app/mobile/views/components/note-preview.vue
index 1c73779251..525f54998e 100644
--- a/src/client/app/mobile/views/components/note-preview.vue
+++ b/src/client/app/mobile/views/components/note-preview.vue
@@ -36,7 +36,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.yohlumlkhizgfkvvscwfcrcggkotpvry
 	display flex
 	margin 0
 	padding 0
@@ -100,10 +100,4 @@ root(isDark)
 					padding 0
 					color var(--subNoteText)
 
-.yohlumlkhizgfkvvscwfcrcggkotpvry[data-darkmode]
-	root(true)
-
-.yohlumlkhizgfkvvscwfcrcggkotpvry:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index 9153b1d551..8f0a1ef196 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -217,9 +217,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-notes
 	overflow hidden
 	background var(--face)
 	border-radius 8px
@@ -293,10 +291,4 @@ root(isDark)
 			&:disabled
 				opacity 0.7
 
-.mk-notes[data-darkmode]
-	root(true)
-
-.mk-notes:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/pages/welcome.vue b/src/client/app/mobile/views/pages/welcome.vue
index 4e24f70ffc..32f74bfe3a 100644
--- a/src/client/app/mobile/views/pages/welcome.vue
+++ b/src/client/app/mobile/views/pages/welcome.vue
@@ -122,9 +122,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.wgwfgvvimdjvhjfwxropcwksnzftjqes
 	text-align center
-	//background #fff
 
 	> .banner
 		position absolute
@@ -317,10 +316,4 @@ root(isDark)
 				margin 16px 0 0 0
 				opacity 0.7
 
-.wgwfgvvimdjvhjfwxropcwksnzftjqes[data-darkmode]
-	root(true)
-
-.wgwfgvvimdjvhjfwxropcwksnzftjqes:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 29d4fc2e5d..72aedbce99 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -62,6 +62,7 @@
 	"dateDividerFg": ":alpha<0.7<$text",
 
 	"switchTrack": "rgba(255, 255, 255, 0.15)",
+	"radioBorder": "rgba(255, 255, 255, 0.6)",
 	"inputBorder": "rgba(255, 255, 255, 0.7)",
 	"inputLabel": "rgba(255, 255, 255, 0.7)",
 	"inputText": "#fff",
@@ -80,6 +81,9 @@
 
 	"pollEditorInputBg": "rgba(0, 0, 0, 0.25)",
 
+	"pollChoiceText": "#fff",
+	"pollChoiceBorder": "rgba(255, 255, 255, 0.1)",
+
 	"urlPreviewBorder": "rgba(0, 0, 0, 0.4)",
 	"urlPreviewBorderHover": "rgba(255, 255, 255, 0.2)",
 	"urlPreviewTitle": "$text",
@@ -90,12 +94,17 @@
 	"calendarSaturdayOrSunday": "#ff6679",
 	"calendarDay": "#c5ced6",
 
+	"materBg": "rgba(0, 0, 0, 0.3)",
+
 	"chartCaption": ":alpha<0.6<$text",
 
 	"announcementsBg": "#253a50",
 	"announcementsTitle": "#539eff",
 	"announcementsText": "#fff",
 
+	"donationBg": "#5d5242",
+	"donationFg": "#e4dbce",
+
 	"googleSearchBg": "rgba(0, 0, 0, 0.2)",
 	"googleSearchFg": "#dee4e8",
 	"googleSearchBorder": "rgba(255, 255, 255, 0.2)",
@@ -119,6 +128,11 @@
 	"messagingRoomMessageBg": "$secondary",
 	"messagingRoomMessageFg": "#fff",
 
+	"formButtonBorder": "rgba(255, 255, 255, 0.1)",
+	"formButtonHoverBg": ":alpha<0.2<$primary",
+	"formButtonHoverBorder": ":alpha<0.5<$primary",
+	"formButtonActiveBg": ":alpha<0.12<$primary",
+
 	"desktopHeaderBg": ":lighten<5<$secondary",
 	"desktopHeaderFg": "$text",
 	"desktopHeaderHoverFg": "#fff",
@@ -140,6 +154,7 @@
 	"desktopTimelineSrc": "@faceTextButton",
 	"desktopTimelineSrcHover": "@faceTextButtonHover",
 	"desktopWindowTitle": "@faceHeaderText",
+	"desktopWindowShadow": "rgba(0, 0, 0, 0.5)",
 	"desktopDriveBg": "@bg",
 	"desktopDriveFolderBg": ":alpha<0.2<$primary",
 	"desktopDriveFolderHoverBg": ":alpha<0.3<$primary",
@@ -169,5 +184,18 @@
 	"mobileSignedInAsBg": "#273c34",
 	"mobileSignedInAsFg": "#49ab63",
 	"mobileSignoutBg": "#652222",
-	"mobileSignoutFg": "#ff5f56"
+	"mobileSignoutFg": "#ff5f56",
+
+	"reversiBannerGradientStart": "#45730e",
+	"reversiBannerGradientEnd": "#464300",
+	"reversiDescBg": "rgba(255, 255, 255, 0.1)",
+	"reversiListItemShadow": "rgba(0, 0, 0, 0.7)",
+	"reversiMapSelectBorder": "rgba(255, 255, 255, 0.1)",
+	"reversiMapSelectHoverBorder": "rgba(255, 255, 255, 0.2)",
+	"reversiRoomFormShadow": "rgba(0, 0, 0, 0.7)",
+	"reversiRoomFooterBg": ":alpha<0.9<$secondary",
+	"reversiGameHeaderLine": ":alpha<0.5<$secondary",
+	"reversiGameEmptyCell": ":lighten<2<$secondary",
+	"reversiGameEmptyCellMyTurn": ":lighten<5<$secondary",
+	"reversiGameEmptyCellCanPut": ":lighten<4<$secondary"
 }
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index e4116480e2..4690054cbf 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -62,6 +62,7 @@
 	"dateDividerFg": ":alpha<0.7<$text",
 
 	"switchTrack": "rgba(0, 0, 0, 0.25)",
+	"radioBorder": "rgba(0, 0, 0, 0.4)",
 	"inputBorder": "rgba(0, 0, 0, 0.42)",
 	"inputLabel": "rgba(0, 0, 0, 0.54)",
 	"inputText": "#000",
@@ -80,6 +81,9 @@
 
 	"pollEditorInputBg": "#fff",
 
+	"pollChoiceText": "#000",
+	"pollChoiceBorder": "rgba(0, 0, 0, 0.1)",
+
 	"urlPreviewBorder": "rgba(0, 0, 0, 0.1)",
 	"urlPreviewBorderHover": "rgba(0, 0, 0, 0.2)",
 	"urlPreviewTitle": "$text",
@@ -90,12 +94,17 @@
 	"calendarSaturdayOrSunday": "#ef95a0",
 	"calendarDay": "#777",
 
+	"materBg": "rgba(0, 0, 0, 0.1)",
+
 	"chartCaption": ":alpha<0.6<$text",
 
 	"announcementsBg": "#f3f9ff",
 	"announcementsTitle": "#4078c0",
 	"announcementsText": "#57616f",
 
+	"donationBg": "#fbead4",
+	"donationFg": "#777d71",
+
 	"googleSearchBg": "#fff",
 	"googleSearchFg": "#55595c",
 	"googleSearchBorder": "rgba(0, 0, 0, 0.2)",
@@ -119,6 +128,11 @@
 	"messagingRoomMessageBg": "#eee",
 	"messagingRoomMessageFg": "#333",
 
+	"formButtonBorder": "rgba(0, 0, 0, 0.1)",
+	"formButtonHoverBg": ":alpha<0.12<$primary",
+	"formButtonHoverBorder": ":alpha<0.3<$primary",
+	"formButtonActiveBg": ":alpha<0.12<$primary",
+
 	"desktopHeaderBg": ":lighten<5<$secondary",
 	"desktopHeaderFg": "$text",
 	"desktopHeaderHoverFg": "#7b8c88",
@@ -140,6 +154,7 @@
 	"desktopTimelineSrc": "#6f7477",
 	"desktopTimelineSrcHover": "#525a5f",
 	"desktopWindowTitle": "#666",
+	"desktopWindowShadow": "rgba(0, 0, 0, 0.2)",
 	"desktopDriveBg": "#fff",
 	"desktopDriveFolderBg": ":lighten<31<$primary",
 	"desktopDriveFolderHoverBg": ":lighten<27<$primary",
@@ -169,5 +184,18 @@
 	"mobileSignedInAsBg": "#fcfff5",
 	"mobileSignedInAsFg": "#2c662d",
 	"mobileSignoutBg": "#fff6f5",
-	"mobileSignoutFg": "#cc2727"
+	"mobileSignoutFg": "#cc2727",
+
+	"reversiBannerGradientStart": "#8bca3e",
+	"reversiBannerGradientEnd": "#d6cf31",
+	"reversiDescBg": "rgba(0, 0, 0, 0.1)",
+	"reversiListItemShadow": "rgba(0, 0, 0, 0.15)",
+	"reversiMapSelectBorder": "rgba(0, 0, 0, 0.1)",
+	"reversiMapSelectHoverBorder": "rgba(0, 0, 0, 0.2)",
+	"reversiRoomFormShadow": "rgba(0, 0, 0, 0.1)",
+	"reversiRoomFooterBg": ":alpha<0.9<$secondary",
+	"reversiGameHeaderLine": "#c4cdd4",
+	"reversiGameEmptyCell": "rgba(0, 0, 0, 0.06)",
+	"reversiGameEmptyCellMyTurn": "rgba(0, 0, 0, 0.12)",
+	"reversiGameEmptyCellCanPut": "rgba(0, 0, 0, 0.9)"
 }

From ec652dd0ace7ccf57d4d32d8855192748cbbb0b3 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 20:03:14 +0900
Subject: [PATCH 64/72] wip

---
 .../app/desktop/assets/header-icon.light.svg  | 150 ------------------
 .../{header-icon.dark.svg => header-icon.svg} |   8 +-
 .../desktop/views/components/ui.header.vue    |  11 +-
 src/client/theme/dark.json                    |   1 -
 src/client/theme/light.json                   |   1 -
 5 files changed, 10 insertions(+), 161 deletions(-)
 delete mode 100644 src/client/app/desktop/assets/header-icon.light.svg
 rename src/client/app/desktop/assets/{header-icon.dark.svg => header-icon.svg} (94%)

diff --git a/src/client/app/desktop/assets/header-icon.light.svg b/src/client/app/desktop/assets/header-icon.light.svg
deleted file mode 100644
index 61e2026243..0000000000
--- a/src/client/app/desktop/assets/header-icon.light.svg
+++ /dev/null
@@ -1,150 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="512"
-   height="512"
-   viewBox="0 0 135.46667 135.46667"
-   version="1.1"
-   id="svg8"
-   inkscape:version="0.92.1 r15371"
-   sodipodi:docname="header-icon.light.svg"
-   inkscape:export-filename="C:\Users\syuilo\projects\misskey\assets\favicon\32.png"
-   inkscape:export-xdpi="6"
-   inkscape:export-ydpi="6">
-  <defs
-     id="defs2">
-    <inkscape:path-effect
-       effect="simplify"
-       id="path-effect5115"
-       is_visible="true"
-       steps="1"
-       threshold="0.000408163"
-       smooth_angles="360"
-       helper_size="0"
-       simplify_individual_paths="false"
-       simplify_just_coalesce="false"
-       simplifyindividualpaths="false"
-       simplifyJustCoalesce="false" />
-    <inkscape:path-effect
-       effect="simplify"
-       id="path-effect5111"
-       is_visible="true"
-       steps="1"
-       threshold="0.000408163"
-       smooth_angles="360"
-       helper_size="0"
-       simplify_individual_paths="false"
-       simplify_just_coalesce="false"
-       simplifyindividualpaths="false"
-       simplifyJustCoalesce="false" />
-    <inkscape:path-effect
-       effect="simplify"
-       id="path-effect5104"
-       is_visible="true"
-       steps="1"
-       threshold="0.000408163"
-       smooth_angles="360"
-       helper_size="0"
-       simplify_individual_paths="false"
-       simplify_just_coalesce="false"
-       simplifyindividualpaths="false"
-       simplifyJustCoalesce="false" />
-  </defs>
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="1.4142136"
-     inkscape:cx="114.309"
-     inkscape:cy="251.50613"
-     inkscape:document-units="px"
-     inkscape:current-layer="g4502"
-     showgrid="true"
-     units="px"
-     inkscape:snap-bbox="true"
-     inkscape:bbox-nodes="true"
-     inkscape:snap-bbox-edge-midpoints="false"
-     inkscape:snap-smooth-nodes="true"
-     inkscape:snap-center="true"
-     inkscape:snap-page="true"
-     inkscape:window-width="1920"
-     inkscape:window-height="1027"
-     inkscape:window-x="-8"
-     inkscape:window-y="1072"
-     inkscape:window-maximized="1"
-     inkscape:snap-object-midpoints="true"
-     inkscape:snap-midpoints="true"
-     inkscape:object-paths="true"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     objecttolerance="1"
-     guidetolerance="1"
-     inkscape:snap-nodes="false"
-     inkscape:snap-others="false">
-    <inkscape:grid
-       type="xygrid"
-       id="grid4504"
-       spacingx="4.2333334"
-       spacingy="4.2333334"
-       empcolor="#ff3fff"
-       empopacity="0.25098039"
-       empspacing="4" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata5">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="レイヤー 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-30.809093,-111.78601)">
-    <g
-       id="g4502"
-       transform="matrix(1.096096,0,0,1.096096,-2.960633,-44.023579)">
-      <g
-         style="fill:#000000;fill-opacity:1"
-         transform="translate(-1.3333333e-6,-1.3439941e-6)"
-         id="g5125">
-        <g
-           transform="matrix(0.91391326,0,0,0.91391326,7.9719907,17.595761)"
-           id="text4489"
-           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:141.03404236px;line-height:476.69509888px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.28950602px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-           aria-label="Mi">
-          <path
-             sodipodi:nodetypes="zccssscssccscczzzccsccsscscsccz"
-             inkscape:connector-curvature="0"
-             id="path5210"
-             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#000000;fill-opacity:1;stroke-width:0.28950602px"
-             d="m 75.196381,231.17126 c -5.855419,0.0202 -10.885068,-3.50766 -13.2572,-7.61584 -1.266603,-1.79454 -3.772419,-2.43291 -3.807919,0 v 11.2332 c 0,4.51309 -1.645397,8.41504 -4.936191,11.70583 -3.196772,3.19677 -7.098714,4.79516 -11.705826,4.79516 -4.513089,0 -8.415031,-1.59839 -11.705825,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -61.7729 c 0,-3.47884 0.987238,-6.6286 2.961715,-9.44928 2.068499,-2.91471 4.701135,-4.9362 7.897906,-6.06447 1.786431,-0.65816 3.666885,-0.98724 5.641362,-0.98724 5.077225,0 9.308247,1.97448 12.693064,5.92343 1.786431,1.97448 2.820681,3.00873 3.102749,3.10275 0,0 13.408119,16.21319 13.78421,16.49526 0.376091,0.28206 1.480789,2.43848 4.127113,2.43848 2.646324,0 3.89218,-2.15642 4.26827,-2.43848 0.376091,-0.28207 13.784088,-16.49526 13.784088,-16.49526 0.09402,0.094 1.081261,-0.94022 2.961715,-3.10275 3.478837,-3.94895 7.756866,-5.92343 12.834096,-5.92343 1.88045,0 3.76091,0.32908 5.64136,0.98724 3.19677,1.12827 5.7824,3.14976 7.75688,6.06447 2.06849,2.82068 3.10274,5.97044 3.10274,9.44928 v 61.7729 c 0,4.51309 -1.6454,8.41504 -4.93619,11.70583 -3.19677,3.19677 -7.09871,4.79516 -11.70582,4.79516 -4.51309,0 -8.41504,-1.59839 -11.705828,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -11.2332 c -0.277898,-3.06563 -2.987588,-1.13379 -3.948953,0 -2.538613,4.70114 -7.401781,7.59567 -13.2572,7.61584 z" />
-          <path
-             inkscape:connector-curvature="0"
-             id="path5212"
-             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#000000;fill-opacity:1;stroke-width:0.28950602px"
-             d="m 145.83461,185.00361 q -5.92343,0 -10.15445,-4.08999 -4.08999,-4.23102 -4.08999,-10.15445 0,-5.92343 4.08999,-10.01342 4.23102,-4.23102 10.15445,-4.23102 5.92343,0 10.15445,4.23102 4.23102,4.08999 4.23102,10.01342 0,5.92343 -4.23102,10.15445 -4.23102,4.08999 -10.15445,4.08999 z m 0.14103,2.82068 q 5.92343,0 10.01342,4.23102 4.23102,4.23102 4.23102,10.15445 v 34.83541 q 0,5.92343 -4.23102,10.15445 -4.08999,4.08999 -10.01342,4.08999 -5.92343,0 -10.15445,-4.08999 -4.23102,-4.23102 -4.23102,-10.15445 v -34.83541 q 0,-5.92343 4.23102,-10.15445 4.23102,-4.23102 10.15445,-4.23102 z" />
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>
diff --git a/src/client/app/desktop/assets/header-icon.dark.svg b/src/client/app/desktop/assets/header-icon.svg
similarity index 94%
rename from src/client/app/desktop/assets/header-icon.dark.svg
rename to src/client/app/desktop/assets/header-icon.svg
index fa42856fa5..d677d2d163 100644
--- a/src/client/app/desktop/assets/header-icon.dark.svg
+++ b/src/client/app/desktop/assets/header-icon.svg
@@ -124,24 +124,24 @@
        id="g4502"
        transform="matrix(1.096096,0,0,1.096096,-2.960633,-44.023579)">
       <g
-         style="fill:#ffffff;fill-opacity:1"
+         style="fill-opacity:1"
          transform="translate(-1.3333333e-6,-1.3439941e-6)"
          id="g5125">
         <g
            transform="matrix(0.91391326,0,0,0.91391326,7.9719907,17.595761)"
            id="text4489"
-           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:141.03404236px;line-height:476.69509888px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.28950602px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:141.03404236px;line-height:476.69509888px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.28950602px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
            aria-label="Mi">
           <path
              sodipodi:nodetypes="zccssscssccscczzzccsccsscscsccz"
              inkscape:connector-curvature="0"
              id="path5210"
-             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#ffffff;fill-opacity:1;stroke-width:0.28950602px"
+             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill-opacity:1;stroke-width:0.28950602px"
              d="m 75.196381,231.17126 c -5.855419,0.0202 -10.885068,-3.50766 -13.2572,-7.61584 -1.266603,-1.79454 -3.772419,-2.43291 -3.807919,0 v 11.2332 c 0,4.51309 -1.645397,8.41504 -4.936191,11.70583 -3.196772,3.19677 -7.098714,4.79516 -11.705826,4.79516 -4.513089,0 -8.415031,-1.59839 -11.705825,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -61.7729 c 0,-3.47884 0.987238,-6.6286 2.961715,-9.44928 2.068499,-2.91471 4.701135,-4.9362 7.897906,-6.06447 1.786431,-0.65816 3.666885,-0.98724 5.641362,-0.98724 5.077225,0 9.308247,1.97448 12.693064,5.92343 1.786431,1.97448 2.820681,3.00873 3.102749,3.10275 0,0 13.408119,16.21319 13.78421,16.49526 0.376091,0.28206 1.480789,2.43848 4.127113,2.43848 2.646324,0 3.89218,-2.15642 4.26827,-2.43848 0.376091,-0.28207 13.784088,-16.49526 13.784088,-16.49526 0.09402,0.094 1.081261,-0.94022 2.961715,-3.10275 3.478837,-3.94895 7.756866,-5.92343 12.834096,-5.92343 1.88045,0 3.76091,0.32908 5.64136,0.98724 3.19677,1.12827 5.7824,3.14976 7.75688,6.06447 2.06849,2.82068 3.10274,5.97044 3.10274,9.44928 v 61.7729 c 0,4.51309 -1.6454,8.41504 -4.93619,11.70583 -3.19677,3.19677 -7.09871,4.79516 -11.70582,4.79516 -4.51309,0 -8.41504,-1.59839 -11.705828,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -11.2332 c -0.277898,-3.06563 -2.987588,-1.13379 -3.948953,0 -2.538613,4.70114 -7.401781,7.59567 -13.2572,7.61584 z" />
           <path
              inkscape:connector-curvature="0"
              id="path5212"
-             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#ffffff;fill-opacity:1;stroke-width:0.28950602px"
+             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill-opacity:1;stroke-width:0.28950602px"
              d="m 145.83461,185.00361 q -5.92343,0 -10.15445,-4.08999 -4.08999,-4.23102 -4.08999,-10.15445 0,-5.92343 4.08999,-10.01342 4.23102,-4.23102 10.15445,-4.23102 5.92343,0 10.15445,4.23102 4.23102,4.08999 4.23102,10.01342 0,5.92343 -4.23102,10.15445 -4.23102,4.08999 -10.15445,4.08999 z m 0.14103,2.82068 q 5.92343,0 10.01342,4.23102 4.23102,4.23102 4.23102,10.15445 v 34.83541 q 0,5.92343 -4.23102,10.15445 -4.08999,4.08999 -10.01342,4.08999 -5.92343,0 -10.15445,-4.08999 -4.23102,-4.23102 -4.23102,-10.15445 v -34.83541 q 0,-5.92343 4.23102,-10.15445 4.23102,-4.23102 10.15445,-4.23102 z" />
         </g>
       </g>
diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
index 1b96e06486..d38aebec8b 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -10,7 +10,9 @@
 					<x-nav/>
 				</div>
 				<div class="center">
-					<div class="icon" @click="goToTop"></div>
+					<div class="icon" @click="goToTop">
+						<img svg-inline src="../../assets/header-icon.svg"/>
+					</div>
 				</div>
 				<div class="right">
 					<x-search/>
@@ -129,13 +131,12 @@ export default Vue.extend({
 						display block
 						width 48px
 						height 48px
-						background-image var(--desktopHeaderIcon)
-						background-size 24px
-						background-position center
-						background-repeat no-repeat
 						opacity 0.3
 						cursor pointer
 
+						> svg
+							fill currentColor
+
 				> .left,
 				> .center
 					left 0
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 72aedbce99..c43de3024e 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -136,7 +136,6 @@
 	"desktopHeaderBg": ":lighten<5<$secondary",
 	"desktopHeaderFg": "$text",
 	"desktopHeaderHoverFg": "#fff",
-	"desktopHeaderIcon": "url('/assets/desktop/header-icon.dark.svg')",
 	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.1)",
 	"desktopHeaderSearchHoverBg": "rgba(255, 255, 255, 0.04)",
 	"desktopHeaderSearchFg": "#fff",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 4690054cbf..2e4f4b8cc9 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -136,7 +136,6 @@
 	"desktopHeaderBg": ":lighten<5<$secondary",
 	"desktopHeaderFg": "$text",
 	"desktopHeaderHoverFg": "#7b8c88",
-	"desktopHeaderIcon": "url('/assets/desktop/header-icon.light.svg')",
 	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)",
 	"desktopHeaderSearchHoverBg": "rgba(0, 0, 0, 0.08)",
 	"desktopHeaderSearchFg": "#000",

From 8317a219a54f5ea85daa500f891ff480a0156f5b Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 20:11:11 +0900
Subject: [PATCH 65/72] wip

---
 src/client/app/desktop/views/components/ui.header.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
index d38aebec8b..4cfcda0f1a 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -130,12 +130,15 @@ export default Vue.extend({
 						margin auto
 						display block
 						width 48px
-						height 48px
-						opacity 0.3
+						text-align center
 						cursor pointer
+						opacity 0.5
 
 						> svg
-							fill currentColor
+							width 24px
+							height 48px
+							vertical-align top
+							fill var(--desktopHeaderFg)
 
 				> .left,
 				> .center

From 0c63ec8157f0c54d780faf69aad63f4bcd7fd683 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 20:39:32 +0900
Subject: [PATCH 66/72] wip

---
 .../app/common/views/components/ui/button.vue |  82 ++++----
 .../app/common/views/widgets/broadcast.vue    |   1 -
 src/client/app/desktop/style.styl             |   2 -
 src/client/app/desktop/ui.styl                | 179 ------------------
 .../desktop/views/components/post-form.vue    |  10 +-
 .../desktop/views/components/renote-form.vue  |   6 +-
 .../app/desktop/views/widgets/profile.vue     |   1 -
 src/client/app/init.css                       |   6 +-
 src/client/theme/dark.json                    |   4 +
 src/client/theme/light.json                   |   4 +
 10 files changed, 66 insertions(+), 229 deletions(-)
 delete mode 100644 src/client/app/desktop/ui.styl

diff --git a/src/client/app/common/views/components/ui/button.vue b/src/client/app/common/views/components/ui/button.vue
index 4934a1bdfa..a165d100a4 100644
--- a/src/client/app/common/views/components/ui/button.vue
+++ b/src/client/app/common/views/components/ui/button.vue
@@ -1,9 +1,7 @@
 <template>
-<div class="ui-button" :class="[styl]">
-	<button :type="type" @click="$emit('click')">
-		<slot></slot>
-	</button>
-</div>
+<button class="dmtdnykelhudezerjlfpbhgovrgnqqgr" :class="[styl, { inline, primary }]" :type="type" @click="$emit('click')">
+	<slot></slot>
+</button>
 </template>
 
 <script lang="ts">
@@ -13,6 +11,16 @@ export default Vue.extend({
 		type: {
 			type: String,
 			required: false
+		},
+		primary: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		inline: {
+			type: Boolean,
+			required: false,
+			default: false
 		}
 	},
 	data() {
@@ -32,21 +40,36 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(fill)
-	> button
-		display block
-		width 100%
-		margin 0
-		padding 0
-		font-weight bold
-		font-size 16px
-		line-height 44px
-		border none
-		border-radius 6px
-		outline none
-		box-shadow none
+.dmtdnykelhudezerjlfpbhgovrgnqqgr
+	display block
+	width 100%
+	margin 0
+	padding 0
+	font-weight normal
+	font-size 16px
+	border none
+	border-radius 6px
+	outline none
+	box-shadow none
 
-		if fill
+	&.inline
+		display inline-block
+		width auto
+
+	&.primary
+		font-weight bold
+
+	&.fill
+		color var(--text)
+		background var(--buttonBg)
+
+		&:hover
+			background var(--buttonHoverBg)
+
+		&:active
+			background var(--buttonActiveBg)
+
+		&.primary
 			color var(--primaryForeground)
 			background var(--primary)
 
@@ -55,20 +78,15 @@ root(fill)
 
 			&:active
 				background var(--primaryDarken5)
-		else
-			color var(--primary)
-			background none
 
-			&:hover
-				color var(--primaryDarken5)
-
-			&:active
-				background var(--primaryAlpha03)
-
-.ui-button
-	&.fill
-		root(true)
 	&:not(.fill)
-		root(false)
+		color var(--primary)
+		background none
+
+		&:hover
+			color var(--primaryDarken5)
+
+		&:active
+			background var(--primaryAlpha03)
 
 </style>
diff --git a/src/client/app/common/views/widgets/broadcast.vue b/src/client/app/common/views/widgets/broadcast.vue
index 65e37bfc69..620b09ff0e 100644
--- a/src/client/app/common/views/widgets/broadcast.vue
+++ b/src/client/app/common/views/widgets/broadcast.vue
@@ -5,7 +5,6 @@
 			:data-found="announcements && announcements.length != 0"
 			:data-melt="props.design == 1"
 			:data-mobile="platform == 'mobile'"
-			:data-darkmode="$store.state.device.darkmode"
 		>
 			<div class="icon">
 				<svg height="32" version="1.1" viewBox="0 0 32 32" width="32">
diff --git a/src/client/app/desktop/style.styl b/src/client/app/desktop/style.styl
index 626671fd25..96481a9808 100644
--- a/src/client/app/desktop/style.styl
+++ b/src/client/app/desktop/style.styl
@@ -1,8 +1,6 @@
 @import "../app"
 @import "../reset"
 
-@import "./ui"
-
 *::input-placeholder
 	color #D8CBC5
 
diff --git a/src/client/app/desktop/ui.styl b/src/client/app/desktop/ui.styl
deleted file mode 100644
index 3ab5d79c5d..0000000000
--- a/src/client/app/desktop/ui.styl
+++ /dev/null
@@ -1,179 +0,0 @@
-button
-	font-family sans-serif
-
-	*
-		pointer-events none
-
-button.ui
-.button.ui
-	display inline-block
-	cursor pointer
-	padding 0 14px
-	margin 0
-	min-width 100px
-	line-height 38px
-	font-size 14px
-	color #888
-	text-decoration none
-	background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
-	border solid 1px #e2e2e2
-	border-radius 4px
-	outline none
-
-	&.block
-		display block
-
-	&:focus
-		&:after
-			content ""
-			pointer-events none
-			position absolute
-			top -5px
-			right -5px
-			bottom -5px
-			left -5px
-			border 2px solid var(--primaryAlpha03)
-			border-radius 8px
-
-	&:disabled
-		opacity 0.7
-		cursor default
-
-	&:hover
-		background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
-		border-color #dcdcdc
-
-	&:active
-		background #ececec
-		border-color #dcdcdc
-
-	&.primary
-		color var(--primaryForeground)
-		//background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
-		border solid 1px var(--primaryLighten15)
-
-		&:not(:disabled)
-			font-weight bold
-
-		&:hover:not(:disabled)
-			//background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
-			border-color var(--primary)
-
-		&:active:not(:disabled)
-			background var(--primary)
-			border-color var(--primary)
-
-input:not([type]).ui
-input[type='text'].ui
-input[type='password'].ui
-input[type='email'].ui
-input[type='date'].ui
-input[type='number'].ui
-textarea.ui
-	display block
-	padding 10px
-	width 100%
-	height 40px
-	font-family sans-serif
-	font-size 16px
-	color #55595c
-	border solid 1px #dadada
-	border-radius 4px
-
-	&:hover
-		border-color #b0b0b0
-
-	&:focus
-		border-color var(--primary)
-
-textarea.ui
-	min-width 100%
-	max-width 100%
-	min-height 64px
-
-.ui.info
-	display block
-	margin 1em 0
-	padding 0 1em
-	font-size 90%
-	color rgba(#000, 0.87)
-	background #f8f8f9
-	border solid 1px rgba(34, 36, 38, 0.22)
-	border-radius 4px
-
-	> p
-		opacity 0.8
-
-		> [data-fa]:first-child
-			margin-right 0.25em
-
-	&.warn
-		color #573a08
-		background #FFFAF3
-		border-color #C9BA9B
-
-.ui.from.group
-	display block
-	margin 16px 0
-
-	> p:first-child
-		margin 0 0 6px 0
-		font-size 90%
-		font-weight bold
-		color rgba(#373a3c, 0.9)
-
-html[data-darkmode]
-	button.ui
-	.button.ui
-		color #fff
-		background linear-gradient(to bottom, #313543 0%, #282c37 100%)
-		border-color #1c2023
-
-		&:hover
-			background linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%)
-			border-color #151a1d
-
-		&:active
-			background #22262f
-			border-color #151a1d
-
-		&.primary
-			color var(--primaryForeground)
-			//background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
-			border solid 1px var(--primaryLighten15)
-
-			&:hover:not(:disabled)
-				//background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
-				border-color var(--primary)
-
-			&:active:not(:disabled)
-				background var(--primary)
-				border-color var(--primary)
-
-	input:not([type]).ui
-	input[type='text'].ui
-	input[type='password'].ui
-	input[type='email'].ui
-	input[type='date'].ui
-	input[type='number'].ui
-	textarea.ui
-		display block
-		padding 10px
-		width 100%
-		height 40px
-		font-family sans-serif
-		font-size 16px
-		color #dee4e8
-		background #191b22
-		border solid 1px #495156
-		border-radius 4px
-
-		&:hover
-			border-color #b0b0b0
-
-		&:focus
-			border-color var(--primary)
-
-	.ui.from.group
-		> p:first-child
-			color #c0c7cc
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index b2a6fed8e8..6cb73ebc43 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -599,21 +599,19 @@ export default Vue.extend({
 		height 40px
 		font-size 1em
 		color var(--primaryForeground)
-		background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+		background var(--primary)
 		outline none
-		border solid 1px var(--primaryLighten15)
+		border none
 		border-radius 4px
 
 		&:not(:disabled)
 			font-weight bold
 
 		&:hover:not(:disabled)
-			background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
-			border-color var(--primary)
+			background var(--primaryLighten5)
 
 		&:active:not(:disabled)
-			background var(--primary)
-			border-color var(--primary)
+			background var(--primaryDarken5)
 
 		&:focus
 			&:after
diff --git a/src/client/app/desktop/views/components/renote-form.vue b/src/client/app/desktop/views/components/renote-form.vue
index 6717ced3b1..68d485bada 100644
--- a/src/client/app/desktop/views/components/renote-form.vue
+++ b/src/client/app/desktop/views/components/renote-form.vue
@@ -4,8 +4,8 @@
 	<template v-if="!quote">
 		<footer>
 			<a class="quote" v-if="!quote" @click="onQuote">%i18n:@quote%</a>
-			<button class="ui cancel" @click="cancel">%i18n:@cancel%</button>
-			<button class="ui primary ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:@reposting%' : '%i18n:@renote%' }}</button>
+			<ui-button class="button cancel" inline @click="cancel">%i18n:@cancel%</ui-button>
+			<ui-button class="button ok" inline primary @click="ok" :disabled="wait">{{ wait ? '%i18n:@reposting%' : '%i18n:@renote%' }}</ui-button>
 		</footer>
 	</template>
 	<template v-if="quote">
@@ -71,7 +71,7 @@ export default Vue.extend({
 			left 28px
 			line-height 40px
 
-		button
+		> .button
 			display block
 			position absolute
 			bottom 16px
diff --git a/src/client/app/desktop/views/widgets/profile.vue b/src/client/app/desktop/views/widgets/profile.vue
index fa35138c31..91354324ce 100644
--- a/src/client/app/desktop/views/widgets/profile.vue
+++ b/src/client/app/desktop/views/widgets/profile.vue
@@ -4,7 +4,6 @@
 		<div class="egwyvoaaryotefqhqtmiyawwefemjfsd-body"
 			:data-compact="props.design == 1 || props.design == 2"
 			:data-melt="props.design == 2"
-			:data-darkmode="$store.state.device.darkmode"
 		>
 			<div class="banner"
 				:style="$store.state.i.bannerUrl ? `background-image: url(${$store.state.i.bannerUrl})` : ''"
diff --git a/src/client/app/init.css b/src/client/app/init.css
index 6ee25d64e2..92bb1d8cf4 100644
--- a/src/client/app/init.css
+++ b/src/client/app/init.css
@@ -32,7 +32,7 @@ body > noscript {
 	left: 0;
 	width: 100%;
 	height: 100%;
-	background: #fff;
+	background: var(--bg);
 	cursor: wait;
 }
 	#ini > svg {
@@ -47,10 +47,6 @@ body > noscript {
 		animation: ini 0.6s infinite linear;
 	}
 
-html[data-darkmode] #ini {
-	background: #191b22;
-}
-
 @keyframes ini {
 	from {
 		transform: rotate(0deg);
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index c43de3024e..015225ddab 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -67,6 +67,10 @@
 	"inputLabel": "rgba(255, 255, 255, 0.7)",
 	"inputText": "#fff",
 
+	"buttonBg": "rgba(255, 255, 255, 0.05)",
+	"buttonHoverBg": "rgba(255, 255, 255, 0.1)",
+	"buttonActiveBg": "rgba(255, 255, 255, 0.15)",
+
 	"autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)",
 	"autocompleteItemText": "rgba(255, 255, 255, 0.8)",
 	"autocompleteItemTextSub": "rgba(255, 255, 255, 0.3)",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 2e4f4b8cc9..3d131f066a 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -67,6 +67,10 @@
 	"inputLabel": "rgba(0, 0, 0, 0.54)",
 	"inputText": "#000",
 
+	"buttonBg": "rgba(0, 0, 0, 0.05)",
+	"buttonHoverBg": "rgba(0, 0, 0, 0.1)",
+	"buttonActiveBg": "rgba(0, 0, 0, 0.15)",
+
 	"autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)",
 	"autocompleteItemText": "rgba(0, 0, 0, 0.8)",
 	"autocompleteItemTextSub": "rgba(0, 0, 0, 0.3)",

From 1fa4d0d3f8552c9e82f763f8a086cb916d0e9250 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 21:48:53 +0900
Subject: [PATCH 67/72] wip

---
 locales/ja-JP.yml                             |  1 -
 .../components/games/reversi/reversi.room.vue |  2 +-
 .../app/common/views/components/ui/switch.vue |  2 +-
 .../app/desktop/views/components/settings.vue | 60 ++++++++++---------
 4 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index f5d0a180d8..0f83ba8419 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -792,7 +792,6 @@ desktop/views/components/settings.vue:
   show-renoted-my-notes: "自分の投稿のRenoteをタイムラインに表示する"
   show-local-renotes: "ローカルの投稿のRenoteをタイムラインに表示する"
   show-maps: "マップの自動展開"
-  show-maps-desc: "位置情報が添付された投稿のマップを自動的に展開します。"
 
   sound: "サウンド"
   enable-sounds: "サウンドを有効にする"
diff --git a/src/client/app/common/views/components/games/reversi/reversi.room.vue b/src/client/app/common/views/components/games/reversi/reversi.room.vue
index 236141ee28..9f0d9c23fb 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.room.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.room.vue
@@ -60,7 +60,7 @@
 
 			<div>
 				<template v-for="item in form">
-					<mk-switch v-if="item.type == 'switch'" v-model="item.value" :key="item.id" :text="item.label" @change="onChangeForm(item)">{{ item.desc || '' }}</mk-switch>
+					<ui-switch v-if="item.type == 'switch'" v-model="item.value" :key="item.id" :text="item.label" @change="onChangeForm(item)">{{ item.desc || '' }}</ui-switch>
 
 					<div class="card" v-if="item.type == 'radio'" :key="item.id">
 						<header>
diff --git a/src/client/app/common/views/components/ui/switch.vue b/src/client/app/common/views/components/ui/switch.vue
index 2ee787cb76..935f219833 100644
--- a/src/client/app/common/views/components/ui/switch.vue
+++ b/src/client/app/common/views/components/ui/switch.vue
@@ -19,7 +19,7 @@
 	<span class="label">
 		<span :aria-hidden="!checked"><slot></slot></span>
 		<p :aria-hidden="!checked">
-			<slot name="text"></slot>
+			<slot name="desc"></slot>
 		</p>
 	</span>
 </div>
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 4d839f1dc9..c7d82590ea 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -21,12 +21,14 @@
 
 		<section class="web" v-show="page == 'web'">
 			<h1>%i18n:@behaviour%</h1>
-			<mk-switch v-model="fetchOnScroll" text="%i18n:@fetch-on-scroll%">
-				<span>%i18n:@fetch-on-scroll-desc%</span>
-			</mk-switch>
-			<mk-switch v-model="autoPopout" text="%i18n:@auto-popout%">
-				<span>%i18n:@auto-popout-desc%</span>
-			</mk-switch>
+			<ui-switch v-model="fetchOnScroll">
+				%i18n:@fetch-on-scroll%
+				<span slot="desc">%i18n:@fetch-on-scroll-desc%</span>
+			</ui-switch>
+			<ui-switch v-model="autoPopout">
+				%i18n:@auto-popout%
+				<span slot="desc">%i18n:@auto-popout-desc%</span>
+			</ui-switch>
 
 			<section>
 				<header>%i18n:@note-visibility%</header>
@@ -45,9 +47,10 @@
 
 			<details>
 				<summary>%i18n:@advanced%</summary>
-				<mk-switch v-model="apiViaStream" text="%i18n:@api-via-stream%">
-					<span>%i18n:@api-via-stream-desc%</span>
-				</mk-switch>
+				<ui-switch v-model="apiViaStream">
+					%i18n:@api-via-stream%
+					<span slot="desc">%i18n:@api-via-stream-desc%</span>
+				</ui-switch>
 			</details>
 		</section>
 
@@ -76,9 +79,7 @@
 			<ui-switch v-model="showMyRenotes">%i18n:@show-my-renotes%</ui-switch>
 			<ui-switch v-model="showRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch>
 			<ui-switch v-model="showLocalRenotes">%i18n:@show-local-renotes%</ui-switch>
-			<mk-switch v-model="showMaps" text="%i18n:@show-maps%">
-				<span>%i18n:@show-maps-desc%</span>
-			</mk-switch>
+			<ui-switch v-model="showMaps">%i18n:@show-maps%</ui-switch>
 			<ui-switch v-model="disableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch>
 			<ui-switch v-model="games_reversi_showBoardLabels">%i18n:common.show-reversi-board-labels%</ui-switch>
 			<ui-switch v-model="games_reversi_useContrastStones">%i18n:common.use-contrast-reversi-stones%</ui-switch>
@@ -86,9 +87,10 @@
 
 		<section class="web" v-show="page == 'web'">
 			<h1>%i18n:@sound%</h1>
-			<mk-switch v-model="enableSounds" text="%i18n:@enable-sounds%">
-				<span>%i18n:@enable-sounds-desc%</span>
-			</mk-switch>
+			<ui-switch v-model="enableSounds">
+				%i18n:@enable-sounds%
+				<span slot="desc">%i18n:@enable-sounds-desc%</span>
+			</ui-switch>
 			<label>%i18n:@volume%</label>
 			<input type="range"
 				v-model="soundVolume"
@@ -130,9 +132,10 @@
 
 		<section class="notification" v-show="page == 'notification'">
 			<h1>%i18n:@notification%</h1>
-			<mk-switch v-model="$store.state.i.settings.autoWatch" @change="onChangeAutoWatch" text="%i18n:@auto-watch%">
-				<span>%i18n:@auto-watch-desc%</span>
-			</mk-switch>
+			<ui-switch v-model="$store.state.i.settings.autoWatch" @change="onChangeAutoWatch">
+				%i18n:@auto-watch%
+				<span slot="desc">%i18n:@auto-watch-desc%</span>
+			</ui-switch>
 		</section>
 
 		<section class="drive" v-show="page == 'drive'">
@@ -200,20 +203,23 @@
 			</button>
 			<details>
 				<summary>%i18n:@update-settings%</summary>
-				<mk-switch v-model="preventUpdate" text="%i18n:@prevent-update%">
-					<span>%i18n:@prevent-update-desc%</span>
-				</mk-switch>
+				<ui-switch v-model="preventUpdate">
+					%i18n:@prevent-update%
+					<span slot="desc">%i18n:@prevent-update-desc%</span>
+				</ui-switch>
 			</details>
 		</section>
 
 		<section class="other" v-show="page == 'other'">
 			<h1>%i18n:@advanced-settings%</h1>
-			<mk-switch v-model="debug" text="%i18n:@debug-mode%">
-				<span>%i18n:@debug-mode-desc%</span>
-			</mk-switch>
-			<mk-switch v-model="enableExperimentalFeatures" text="%i18n:@experimental%">
-				<span>%i18n:@experimental-desc%</span>
-			</mk-switch>
+			<ui-switch v-model="debug">
+				%i18n:@debug-mode%
+				<span slot="desc">%i18n:@debug-mode-desc%</span>
+			</ui-switch>
+			<ui-switch v-model="enableExperimentalFeatures">
+				%i18n:@experimental%
+				<span slot="desc">%i18n:@experimental-desc%</span>
+			</ui-switch>
 		</section>
 	</div>
 </div>

From 6a82e94c5489d4879cbbf86091cd15c7d144f284 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 29 Sep 2018 00:01:11 +0900
Subject: [PATCH 68/72] wip

---
 locales/ja-JP.yml                             |  24 +++
 package.json                                  |   1 +
 src/client/app/app.vue                        |  12 +-
 .../app/common/views/components/avatar.vue    |   4 +-
 .../app/common/views/components/index.ts      |   2 +
 .../app/common/views/components/theme.vue     | 179 ++++++++++++++++++
 .../app/common/views/components/ui/button.vue |  12 +-
 .../app/desktop/views/components/settings.vue |   5 +
 src/client/app/init.ts                        |  35 +++-
 .../app/mobile/views/pages/settings.vue       |   7 +
 src/client/app/store.ts                       |   3 +
 src/client/app/{common/scripts => }/theme.ts  |  27 ++-
 src/client/theme/dark.json                    |   2 +-
 src/client/theme/halloween.json               |   3 +-
 src/client/theme/light.json                   |   2 +-
 15 files changed, 287 insertions(+), 31 deletions(-)
 create mode 100644 src/client/app/common/views/components/theme.vue
 rename src/client/app/{common/scripts => }/theme.ts (74%)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 0f83ba8419..46dea949d2 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -285,6 +285,28 @@ common/views/components/media-banner.vue:
   sensitive: "閲覧注意"
   click-to-show: "クリックして表示"
 
+common/views/components/theme.vue:
+  light-theme: "非ダークモード時に使用するテーマ"
+  dark-theme: "ダークモード時に使用するテーマ"
+  install-a-theme: "テーマのインストール"
+  theme-code: "テーマコード"
+  install: "インストール"
+  create-a-theme: "テーマの作成"
+  save-created-theme: "テーマを保存"
+  primary-color: "プライマリ カラー"
+  secondary-color: "セカンダリ カラー"
+  text-color: "文字色"
+  base-theme: "ベーステーマ"
+  base-theme-light: "Light"
+  base-theme-dark: "Dark"
+  theme-name: "テーマ名"
+  preview-created-theme: "プレビュー"
+  invalid-theme: "テーマが正しくありません。"
+  already-installed: "既にそのテーマはインストールされています。"
+  saved: "保存しました"
+  installed-themes: "インストールされたテーマ"
+  select-theme: "テーマを選択してください"
+
 common/views/components/cw-button.vue:
   hide: "隠す"
   show: "もっと見る"
@@ -762,6 +784,7 @@ desktop/views/components/settings.vue:
   2fa: "二段階認証"
   other: "その他"
   license: "ライセンス"
+  theme: "テーマ"
 
   behaviour: "動作"
   fetch-on-scroll: "スクロールで自動読み込み"
@@ -1417,6 +1440,7 @@ mobile/views/pages/settings.vue:
   notification-position: "通知の表示"
   notification-position-bottom: "下"
   notification-position-top: "上"
+  theme: "テーマ"
   behavior: "動作"
   fetch-on-scroll: "スクロールで自動読み込み"
   note-visibility: "投稿の公開範囲"
diff --git a/package.json b/package.json
index 347e9d0c24..e19283cf64 100644
--- a/package.json
+++ b/package.json
@@ -208,6 +208,7 @@
 		"v-animate-css": "0.0.2",
 		"vue": "2.5.17",
 		"vue-chartjs": "3.4.0",
+		"vue-color": "2.6.0",
 		"vue-cropperjs": "2.2.2",
 		"vue-js-modal": "1.3.26",
 		"vue-json-tree-view": "2.1.4",
diff --git a/src/client/app/app.vue b/src/client/app/app.vue
index 9b6af27ece..778e9f29cf 100644
--- a/src/client/app/app.vue
+++ b/src/client/app/app.vue
@@ -14,8 +14,7 @@ export default Vue.extend({
 		keymap(): any {
 			return {
 				'h|slash': this.help,
-				'd': this.dark,
-				'x': this.test
+				'd': this.dark
 			};
 		}
 	},
@@ -26,11 +25,10 @@ export default Vue.extend({
 		},
 
 		dark() {
-			applyTheme(darkTheme);
-		},
-
-		test() {
-			applyTheme(halloweenTheme);
+			this.$store.commit('device/set', {
+				key: 'darkmode',
+				value: !this.$store.state.device.darkmode
+			});
 		}
 	}
 });
diff --git a/src/client/app/common/views/components/avatar.vue b/src/client/app/common/views/components/avatar.vue
index ca09af87de..ac018abcfc 100644
--- a/src/client/app/common/views/components/avatar.vue
+++ b/src/client/app/common/views/components/avatar.vue
@@ -59,7 +59,9 @@ export default Vue.extend({
 		}
 	},
 	mounted() {
-		this.$el.style.color = `rgb(${this.user.avatarColor.slice(0, 3).join(',')})`;
+		if (this.user.avatarColor) {
+			this.$el.style.color = `rgb(${this.user.avatarColor.slice(0, 3).join(',')})`;
+		}
 	},
 	methods: {
 		onClick(e) {
diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 4c1c0afa80..0dea38a7a1 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 
+import theme from './theme.vue';
 import instance from './instance.vue';
 import cwButton from './cw-button.vue';
 import tagCloud from './tag-cloud.vue';
@@ -43,6 +44,7 @@ import uiSelect from './ui/select.vue';
 import formButton from './ui/form/button.vue';
 import formRadio from './ui/form/radio.vue';
 
+Vue.component('mk-theme', theme);
 Vue.component('mk-instance', instance);
 Vue.component('mk-cw-button', cwButton);
 Vue.component('mk-tag-cloud', tagCloud);
diff --git a/src/client/app/common/views/components/theme.vue b/src/client/app/common/views/components/theme.vue
new file mode 100644
index 0000000000..27888d1e85
--- /dev/null
+++ b/src/client/app/common/views/components/theme.vue
@@ -0,0 +1,179 @@
+<template>
+<div class="nicnklzforebnpfgasiypmpdaaglujqm">
+	<label>
+		<span>%i18n:@light-theme%</span>
+		<ui-select v-model="light" placeholder="%i18n:@light-theme%">
+			<option v-for="x in themes" :value="x.meta.id" :key="x.meta.id">{{ x.meta.name }}</option>
+		</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.meta.id" :key="x.meta.id">{{ x.meta.name }}</option>
+		</ui-select>
+	</label>
+
+	<details class="creator">
+		<summary>%i18n:@create-a-theme%</summary>
+		<div>
+			<span>%i18n:@base-theme%:</span>
+			<ui-radio v-model="myThemeBase" value="light">%i18n:@base-theme-light%</ui-radio>
+			<ui-radio v-model="myThemeBase" value="dark">%i18n:@base-theme-dark%</ui-radio>
+		</div>
+		<div>
+			<ui-input v-model="myThemeName">
+				<span>%i18n:@theme-name%</span>
+			</ui-input>
+		</div>
+		<div>
+			<div style="padding-bottom:8px;">%i18n:@primary-color%:</div>
+			<color-picker v-model="myThemePrimary"/>
+		</div>
+		<div>
+			<div style="padding-bottom:8px;">%i18n:@secondary-color%:</div>
+			<color-picker v-model="myThemeSecondary"/>
+		</div>
+		<div>
+			<div style="padding-bottom:8px;">%i18n:@text-color%:</div>
+			<color-picker v-model="myThemeText"/>
+		</div>
+		<ui-button @click="preview()">%i18n:@preview-created-theme%</ui-button>
+		<ui-button primary @click="gen()">%i18n:@save-created-theme%</ui-button>
+	</details>
+
+	<details>
+		<summary>%i18n:@install-a-theme%</summary>
+		<ui-textarea v-model="installThemeCode">
+			<span>%i18n:@theme-code%</span>
+		</ui-textarea>
+		<ui-button @click="install()">%i18n:@install%</ui-button>
+	</details>
+
+	<details>
+		<summary>%i18n:@installed-themes%</summary>
+		<ui-select v-model="selectedInstalledTheme" placeholder="%i18n:@select-theme%">
+			<option v-for="x in installedThemes" :value="x.meta.id" :key="x.meta.id">{{ x.meta.name }}</option>
+		</ui-select>
+		<ui-textarea readonly :value="selectedInstalledThemeCode">
+			<span>%i18n:@theme-code%</span>
+		</ui-textarea>
+	</details>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { apiUrl, docsUrl } from '../../../config';
+import { lightTheme, darkTheme, builtinThemes, applyTheme } from '../../../theme';
+import { Chrome } from 'vue-color';
+import * as uuid from 'uuid';
+import * as tinycolor from 'tinycolor2';
+
+export default Vue.extend({
+	components: {
+		ColorPicker: Chrome
+	},
+
+	data() {
+		return {
+			installThemeCode: null,
+			selectedInstalledTheme: null,
+			myThemeBase: 'light',
+			myThemeName: '',
+			myThemePrimary: lightTheme.meta.vars.primary,
+			myThemeSecondary: lightTheme.meta.vars.secondary,
+			myThemeText: lightTheme.meta.vars.text
+		};
+	},
+
+	computed: {
+		themes(): any {
+			return this.$store.state.device.themes.concat(builtinThemes);
+		},
+
+		installedThemes(): any {
+			return this.$store.state.device.themes;
+		},
+
+		light: {
+			get() { return this.$store.state.device.lightTheme; },
+			set(value) { this.$store.commit('device/set', { key: 'lightTheme', value }); }
+		},
+
+		dark: {
+			get() { return this.$store.state.device.darkTheme; },
+			set(value) { this.$store.commit('device/set', { key: 'darkTheme', value }); }
+		},
+
+		selectedInstalledThemeCode() {
+			if (this.selectedInstalledTheme == null) return null;
+			return JSON.stringify(this.installedThemes.find(x => x.meta.id == this.selectedInstalledTheme));
+		},
+
+		myTheme(): any {
+			return {
+				meta: {
+					name: this.myThemeName,
+					author: this.$store.state.i.name,
+					base: this.myThemeBase,
+					vars: {
+						primary: tinycolor(typeof this.myThemePrimary == 'string' ? this.myThemePrimary : this.myThemePrimary.rgba).toRgbString(),
+						secondary: tinycolor(typeof this.myThemeSecondary == 'string' ? this.myThemeSecondary : this.myThemeSecondary.rgba).toRgbString(),
+						text: tinycolor(typeof this.myThemeText == 'string' ? this.myThemeText : this.myThemeText.rgba).toRgbString()
+					}
+				}
+			};
+		}
+	},
+
+	watch: {
+		myThemeBase(v) {
+			const theme = v == 'light' ? lightTheme : darkTheme;
+			this.myThemePrimary = theme.meta.vars.primary;
+			this.myThemeSecondary = theme.meta.vars.secondary;
+			this.myThemeText = theme.meta.vars.text;
+		}
+	},
+
+	methods: {
+		install() {
+			const theme = JSON.parse(this.installThemeCode);
+			if (theme.meta == null || theme.meta.id == null) {
+				alert('%i18n:@invalid-theme%');
+				return;
+			}
+			if (this.$store.state.device.themes.some(t => t.meta.id == theme.meta.id)) {
+				alert('%i18n:@already-installed%');
+				return;
+			}
+			const themes = this.$store.state.device.themes.concat(theme);
+			this.$store.commit('device/set', {
+				key: 'themes', value: themes
+			});
+		},
+
+		preview() {
+			applyTheme(this.myTheme, false);
+		},
+
+		gen() {
+			const theme = this.myTheme;
+			theme.meta.id = uuid();
+			const themes = this.$store.state.device.themes.concat(theme);
+			this.$store.commit('device/set', {
+				key: 'themes', value: themes
+			});
+			alert('%i18n:@saved%');
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.nicnklzforebnpfgasiypmpdaaglujqm
+	> .creator
+		> div
+			padding 16px 0
+			border-bottom solid 1px var(--faceDivider)
+</style>
diff --git a/src/client/app/common/views/components/ui/button.vue b/src/client/app/common/views/components/ui/button.vue
index a165d100a4..47644b32b5 100644
--- a/src/client/app/common/views/components/ui/button.vue
+++ b/src/client/app/common/views/components/ui/button.vue
@@ -27,14 +27,6 @@ export default Vue.extend({
 		return {
 			styl: 'fill'
 		};
-	},
-	inject: {
-		isCardChild: { default: false }
-	},
-	created() {
-		if (this.isCardChild) {
-			this.styl = 'line';
-		}
 	}
 });
 </script>
@@ -43,6 +35,7 @@ export default Vue.extend({
 .dmtdnykelhudezerjlfpbhgovrgnqqgr
 	display block
 	width 100%
+	min-height 40px
 	margin 0
 	padding 0
 	font-weight normal
@@ -52,6 +45,9 @@ export default Vue.extend({
 	outline none
 	box-shadow none
 
+	&:not(.inline) + .dmtdnykelhudezerjlfpbhgovrgnqqgr
+		margin-top 16px
+
 	&.inline
 		display inline-block
 		width auto
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index c7d82590ea..1cb8d4d4c8 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -19,6 +19,11 @@
 			<x-profile/>
 		</section>
 
+		<section class="web" v-show="page == 'web'">
+			<h1>%i18n:@theme%</h1>
+			<mk-theme/>
+		</section>
+
 		<section class="web" v-show="page == 'web'">
 			<h1>%i18n:@behaviour%</h1>
 			<ui-switch v-model="fetchOnScroll">
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index 8d430ad7ff..802f7b42eb 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -14,11 +14,11 @@ import App from './app.vue';
 import checkForUpdate from './common/scripts/check-for-update';
 import MiOS, { API } from './mios';
 import { version, codename, lang } from './config';
-import applyTheme from './common/scripts/theme';
-const defaultTheme = require('../theme/light.json');
+import { builtinThemes, applyTheme } from './theme';
+const lightTheme = require('../theme/light.json');
 
 if (localStorage.getItem('theme') == null) {
-	applyTheme(defaultTheme);
+	applyTheme(lightTheme);
 }
 
 Vue.use(Vuex);
@@ -92,6 +92,35 @@ export default (callback: (launch: (router: VueRouter, api?: (os: MiOS) => API)
 		const launch = (router: VueRouter, api?: (os: MiOS) => API) => {
 			os.apis = api ? api(os) : null;
 
+			//#region theme
+			os.store.watch(s => {
+				return s.device.darkmode;
+			}, v => {
+				const themes = os.store.state.device.themes.concat(builtinThemes);
+				const dark = themes.find(t => t.meta.id == os.store.state.device.darkTheme);
+				const light = themes.find(t => t.meta.id == os.store.state.device.lightTheme);
+				applyTheme(v ? dark : light);
+			});
+			os.store.watch(s => {
+				return s.device.lightTheme;
+			}, v => {
+				const themes = os.store.state.device.themes.concat(builtinThemes);
+				const theme = themes.find(t => t.meta.id == v);
+				if (!os.store.state.device.darkmode) {
+					applyTheme(theme);
+				}
+			});
+			os.store.watch(s => {
+				return s.device.darkTheme;
+			}, v => {
+				const themes = os.store.state.device.themes.concat(builtinThemes);
+				const theme = themes.find(t => t.meta.id == v);
+				if (os.store.state.device.darkmode) {
+					applyTheme(theme);
+				}
+			});
+			//#endregion
+
 			//#region shadow
 			const shadow = '0 3px 8px rgba(0, 0, 0, 0.2)';
 			if (os.store.state.settings.useShadow) document.documentElement.style.setProperty('--shadow', shadow);
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index b83eaf6d33..94fa38cec9 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -23,6 +23,13 @@
 					<ui-switch v-model="games_reversi_useContrastStones">%i18n:common.use-contrast-reversi-stones%</ui-switch>
 				</section>
 
+				<section>
+					<header>%i18n:@theme%</header>
+					<div>
+						<mk-theme/>
+					</div>
+				</section>
+
 				<section>
 					<header>%i18n:@timeline%</header>
 					<div>
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index fbcc53d7be..545261225a 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -44,6 +44,9 @@ const defaultDeviceSettings = {
 	apiViaStream: true,
 	autoPopout: false,
 	darkmode: false,
+	darkTheme: 'dark',
+	lightTheme: 'light',
+	themes: [],
 	enableSounds: true,
 	soundVolume: 0.5,
 	lang: null,
diff --git a/src/client/app/common/scripts/theme.ts b/src/client/app/theme.ts
similarity index 74%
rename from src/client/app/common/scripts/theme.ts
rename to src/client/app/theme.ts
index 7a1c6abb76..1147ff300d 100644
--- a/src/client/app/common/scripts/theme.ts
+++ b/src/client/app/theme.ts
@@ -1,22 +1,21 @@
 import * as tinycolor from 'tinycolor2';
-const lightTheme = require('../../../theme/light');
-const darkTheme = require('../../../theme/dark');
 
 type Theme = {
 	meta: {
 		id: string;
 		name: string;
-		inherit: string;
+		author: string;
+		base?: string;
 		vars: any;
 	};
 } & {
 	[key: string]: string;
 };
 
-export default function(theme: Theme) {
-	if (theme.meta.inherit) {
-		const inherit = [lightTheme, darkTheme].find(x => x.meta.id == theme.meta.inherit);
-		theme = Object.assign({}, inherit, theme);
+export function applyTheme(theme: Theme, persisted = true) {
+	if (theme.meta.base) {
+		const base = [lightTheme, darkTheme].find(x => x.meta.id == theme.meta.base);
+		theme = Object.assign({}, base, theme);
 	}
 
 	const props = compile(theme);
@@ -26,7 +25,9 @@ export default function(theme: Theme) {
 		document.documentElement.style.setProperty(`--${k}`, v.toString());
 	});
 
-	localStorage.setItem('theme', JSON.stringify(props));
+	if (persisted) {
+		localStorage.setItem('theme', JSON.stringify(props));
+	}
 }
 
 function compile(theme: Theme): { [key: string]: string } {
@@ -87,3 +88,13 @@ function compile(theme: Theme): { [key: string]: string } {
 function genValue(c: tinycolor.Instance): string {
 	return c.toRgbString();
 }
+
+export const lightTheme = require('../theme/light.json');
+export const darkTheme = require('../theme/dark.json');
+export const halloweenTheme = require('../theme/halloween.json');
+
+export const builtinThemes = [
+	lightTheme,
+	darkTheme,
+	halloweenTheme
+];
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 015225ddab..74447b8f2f 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -1,6 +1,6 @@
 {
 	"meta": {
-		"id": "9978f7f9-5616-44fd-a704-cc5985efdd63",
+		"id": "dark",
 		"name": "Dark",
 		"author": "syuilo",
 		"vars": {
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index 6e92db95ff..fb34db57a8 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -3,10 +3,9 @@
 		"id": "42e4f09b-67d5-498c-af7d-29faa54745b0",
 		"name": "Halloween",
 		"author": "syuilo",
-		"inherit": "9978f7f9-5616-44fd-a704-cc5985efdd63",
+		"base": "dark",
 		"vars": {
 			"primary": "#d67036",
-			"primaryForeground": "#fff",
 			"secondary": "#1f1d30",
 			"text": "#b1bee3"
 		}
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 3d131f066a..1b6604e642 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -1,6 +1,6 @@
 {
 	"meta": {
-		"id": "406cfea3-a4e7-486c-9057-30ede1353c3f",
+		"id": "light",
 		"name": "Light",
 		"author": "syuilo",
 		"vars": {

From 7b426532710c69e5b08407e33f21fa592f976e99 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 29 Sep 2018 00:03:28 +0900
Subject: [PATCH 69/72] wip

---
 src/client/theme/light.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 1b6604e642..b853aa9a26 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -43,7 +43,7 @@
 	"noteHeaderBadgeFg": "#aaa",
 	"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.05)",
 	"noteHeaderAdminFg": "#f15f71",
-	"noteHeaderAdminBg": "#5d282e",
+	"noteHeaderAdminBg": "#ffdfdf",
 	"noteHeaderAcct": "#ccc",
 	"noteHeaderInfo": "#c0c0c0",
 

From 094d873f2e7dbcc6c250260d21524afb15cca47f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 29 Sep 2018 00:20:49 +0900
Subject: [PATCH 70/72] wip

---
 src/client/app/common/views/components/ui/button.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/client/app/common/views/components/ui/button.vue b/src/client/app/common/views/components/ui/button.vue
index 47644b32b5..b29f8bb1c9 100644
--- a/src/client/app/common/views/components/ui/button.vue
+++ b/src/client/app/common/views/components/ui/button.vue
@@ -45,6 +45,18 @@ export default Vue.extend({
 	outline none
 	box-shadow none
 
+	&:focus
+		&:after
+			content ""
+			pointer-events none
+			position absolute
+			top -5px
+			right -5px
+			bottom -5px
+			left -5px
+			border 2px solid var(--primaryAlpha03)
+			border-radius 10px
+
 	&:not(.inline) + .dmtdnykelhudezerjlfpbhgovrgnqqgr
 		margin-top 16px
 

From 57669c9c0302392c1e12008fd01578cfd1d3f157 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 29 Sep 2018 00:44:23 +0900
Subject: [PATCH 71/72] wip

---
 src/client/app/theme.ts     |  2 ++
 src/client/theme/light.json | 10 +++++-----
 src/client/theme/pink.json  | 17 +++++++++++++++++
 3 files changed, 24 insertions(+), 5 deletions(-)
 create mode 100644 src/client/theme/pink.json

diff --git a/src/client/app/theme.ts b/src/client/app/theme.ts
index 1147ff300d..555f8411f2 100644
--- a/src/client/app/theme.ts
+++ b/src/client/app/theme.ts
@@ -91,10 +91,12 @@ function genValue(c: tinycolor.Instance): string {
 
 export const lightTheme = require('../theme/light.json');
 export const darkTheme = require('../theme/dark.json');
+export const pinkTheme = require('../theme/pink.json');
 export const halloweenTheme = require('../theme/halloween.json');
 
 export const builtinThemes = [
 	lightTheme,
 	darkTheme,
+	pinkTheme,
 	halloweenTheme
 ];
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index b853aa9a26..0d50dc5caa 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -39,16 +39,16 @@
 	"renoteText": "#9dbb00",
 	"quoteBorder": "#c0dac6",
 	"noteText": "#717171",
-	"noteHeaderName": "#627079",
+	"noteHeaderName": ":darken<2<$text",
 	"noteHeaderBadgeFg": "#aaa",
 	"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.05)",
 	"noteHeaderAdminFg": "#f15f71",
 	"noteHeaderAdminBg": "#ffdfdf",
-	"noteHeaderAcct": "#ccc",
-	"noteHeaderInfo": "#c0c0c0",
+	"noteHeaderAcct": ":alpha<0.7<@noteHeaderName",
+	"noteHeaderInfo": ":alpha<0.7<@noteHeaderName",
 
-	"noteActions": "#ddd",
-	"noteActionsHover": "#444",
+	"noteActions": ":alpha<0.3<$text",
+	"noteActionsHover": ":alpha<0.9<$text",
 	"noteActionsReplyHover": "#0af",
 	"noteActionsRenoteHover": "#8d0",
 	"noteActionsReactionHover": "#fa0",
diff --git a/src/client/theme/pink.json b/src/client/theme/pink.json
new file mode 100644
index 0000000000..ddb56b46e1
--- /dev/null
+++ b/src/client/theme/pink.json
@@ -0,0 +1,17 @@
+{
+	"meta": {
+		"id": "e9c8c01d-9c15-48d0-9b5c-3d00843b5b36",
+		"name": "Pink",
+		"author": "syuilo",
+		"base": "light",
+		"vars": {
+			"primary": "rgb(251, 78, 112)",
+			"secondary": "rgb(255, 218, 240)",
+			"text": "rgb(113, 91, 102)"
+		}
+	},
+
+	"renoteGradient": "#ffb1c9",
+	"renoteText": "#ff588d",
+	"quoteBorder": "#ff6c9b"
+}

From f26e64190575c53601fbfccba539a95568813007 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 29 Sep 2018 00:48:02 +0900
Subject: [PATCH 72/72] wip

---
 .../app/desktop/views/components/settings.profile.vue | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/client/app/desktop/views/components/settings.profile.vue b/src/client/app/desktop/views/components/settings.profile.vue
index 9dd2798557..5f465a52bb 100644
--- a/src/client/app/desktop/views/components/settings.profile.vue
+++ b/src/client/app/desktop/views/components/settings.profile.vue
@@ -6,22 +6,19 @@
 		<button class="ui" @click="updateAvatar">%i18n:@choice-avatar%</button>
 	</label>
 	<label class="ui from group">
-		<p>%i18n:@name%</p>
-		<input v-model="name" type="text" class="ui"/>
+		<ui-input v-model="name" type="text">%i18n:@name%</ui-input>
 	</label>
 	<label class="ui from group">
-		<p>%i18n:@location%</p>
-		<input v-model="location" type="text" class="ui"/>
+		<ui-input v-model="location" type="text">%i18n:@location%</ui-input>
 	</label>
 	<label class="ui from group">
-		<p>%i18n:@description%</p>
-		<textarea v-model="description" class="ui"></textarea>
+		<ui-textarea v-model="description">%i18n:@description%</ui-textarea>
 	</label>
 	<label class="ui from group">
 		<p>%i18n:@birthday%</p>
 		<input type="date" v-model="birthday"/>
 	</label>
-	<button class="ui primary" @click="save">%i18n:@save%</button>
+	<ui-button primary @click="save">%i18n:@save%</ui-button>
 	<section>
 		<h2>%i18n:@locked-account%</h2>
 		<ui-switch v-model="$store.state.i.isLocked" @change="onChangeIsLocked">%i18n:@is-locked%</ui-switch>