wip

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

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] == '@') {

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>

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>

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

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

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