wip

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

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>

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

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