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>
-
+.onchrpzrvnoruiaenfcqvccjfuupzzwv
-
+	$bg-color = var(--popupBg)
-root(isDark)
-	$bg-color = isDark ? #2c303c : #fff
 	$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
+			background var(--faceDivider)
-
-.onchrpzrvnoruiaenfcqvccjfuupzzwv[data-darkmode]
-	root(true)
-
-.onchrpzrvnoruiaenfcqvccjfuupzzwv:not([data-darkmode])
-	root(false)
 
 </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
+			color var(--popupFg)
-			border-bottom solid 1px isDark ? #1c2023 : #e1e4e8
+			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

src/client/theme/dark.json

@@ -1,16 +1,22 @@
 {
 	"meta": {
+		"id": "9978f7f9-5616-44fd-a704-cc5985efdd63",
 		"name": "Dark"
 	},
 	"primary": "#fb4e4e",
 	"primaryForeground": "#fff",
-	"bg": "#191B22",
+	"bg": "#191b22",
-	"scrollbarTrack": "#282C37",
+	"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",

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"
+}

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",