wip

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

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>