wip

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', {
+			applyTheme(darkTheme);
-				key: 'darkmode',
-				value: !this.$store.state.device.darkmode
-			});
 		}
 	}
 });

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;
 

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)}`;
+}

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
+				background var(--primary)
-
-	&[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

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);

src/client/theme/dark.json

@@ -0,0 +1,10 @@
+{
+	"meta": {
+		"name": "Dark"
+	},
+	"primary": "#fb4e4e",
+	"bg": "#191B22",
+	"scrollbarTrack": "#282C37",
+	"scrollbarHandle": "#454954",
+	"scrollbarHandleHover": "#535660"
+}

src/client/theme/light.json

@@ -0,0 +1,10 @@
+{
+	"meta": {
+		"name": "Light"
+	},
+	"primary": "#fb4e4e",
+	"bg": "#f7f7f7",
+	"scrollbarTrack": "#fff",
+	"scrollbarHandle": "#00000033",
+	"scrollbarHandleHover": "#00000066"
+}