[wip] darkmode

src/client/app/desktop/views/components/calendar.vue

@@ -133,9 +133,9 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-calendar
-	color #777
-	background #fff
+root(isDark)
+	color isDark ? #c5ced6 : #777
+	background isDark ? #282C37 : #fff
 	border solid 1px rgba(0, 0, 0, 0.075)
 	border-radius 6px
 
@@ -249,4 +249,10 @@ export default Vue.extend({
 					&:active > div
 						background darken($theme-color, 10%)
 
+.mk-calendar[data-darkmode]
+	root(true)
+
+.mk-calendar:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/desktop/views/components/settings.vue

@@ -374,7 +374,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-settings
+root(isDark)
 	display flex
 	width 100%
 	height 100%
@@ -385,13 +385,13 @@ export default Vue.extend({
 		height 100%
 		padding 16px 0 0 0
 		overflow auto
-		border-right solid 1px #ddd
+		border-right solid 1px isDark ? #1c2023 : #ddd
 
 		> p
 			display block
 			padding 10px 16px
 			margin 0
-			color #666
+			color isDark ? #9aa2a7 : #666
 			cursor pointer
 			user-select none
 			transition margin-left 0.2s ease
@@ -400,7 +400,7 @@ export default Vue.extend({
 				margin-right 4px
 
 			&:hover
-				color #555
+				color isDark ? #fff : #555
 
 			&.active
 				margin-left 8px
@@ -414,14 +414,14 @@ export default Vue.extend({
 
 		> section
 			margin 32px
-			color #4a535a
+			color isDark ? #c4ccd2 : #4a535a
 
 			> h1
 				margin 0 0 1em 0
 				padding 0 0 8px 0
 				font-size 1em
-				color #555
-				border-bottom solid 1px #eee
+				color isDark ? #e3e7ea : #555
+				border-bottom solid 1px isDark ? #1c2023 : #eee
 
 			&, >>> *
 				.ui.button.block
@@ -439,7 +439,13 @@ export default Vue.extend({
 
 		> .web
 			> .div
-				border-bottom solid 1px #eee
+				border-bottom solid 1px isDark ? #1c2023 : #eee
 				margin 16px 0
 
+.mk-settings[data-darkmode]
+	root(true)
+
+.mk-settings:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/desktop/views/components/ui.header.nav.vue

@@ -99,7 +99,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.nav
+root(isDark)
 	display inline-block
 	margin 0
 	padding 0
@@ -131,7 +131,7 @@ export default Vue.extend({
 				padding 0 24px
 				font-size 13px
 				font-variant small-caps
-				color #9eaba8
+				color isDark ? #b8c5ca : #9eaba8
 				text-decoration none
 				transition none
 				cursor pointer
@@ -140,7 +140,7 @@ export default Vue.extend({
 					pointer-events none
 
 				&:hover
-					color darken(#9eaba8, 20%)
+					color isDark ? #fff : darken(#9eaba8, 20%)
 					text-decoration none
 
 				> [data-fa]:first-child
@@ -164,4 +164,10 @@ export default Vue.extend({
 				@media (max-width 700px)
 					padding 0 12px
 
+.nav[data-darkmode]
+	root(true)
+
+.nav:not([data-darkmode])
+	root(false)
+
 </style>