[wip] darkmode

src/client/app/common/views/components/switch.vue

@@ -87,7 +87,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-switch
+root(isDark)
 	display flex
 	margin 12px 0
 	cursor pointer
@@ -121,11 +121,12 @@ export default Vue.extend({
 	&:hover
 		> .label
 			> span
-				color #2e3338
+				color isDark ? #fff : #2e3338
 
 		> .button
-			background #ced2da
+			$color = isDark ? #15181d : #ced2da
-			border-color #ced2da
+			background $color
+			border-color $color
 
 	> input
 		position absolute
@@ -147,14 +148,16 @@ export default Vue.extend({
 				border-radius 14px
 
 	> .button
+		$color = isDark ? #1c1f25 : #dcdfe6
+
 		display inline-block
 		margin 0
 		width 40px
 		min-width 40px
 		height 20px
 		min-height 20px
-		background #dcdfe6
+		background $color
-		border 1px solid #dcdfe6
+		border 1px solid $color
 		outline none
 		border-radius 10px
 		transition inherit
@@ -179,12 +182,18 @@ export default Vue.extend({
 		> span
 			display block
 			line-height 20px
-			color #4a535a
+			color isDark ? #c4ccd2 : #4a535a
 			transition inherit
 
 		> p
 			margin 0
 			//font-size 90%
-			color #9daab3
+			color isDark ? #78858e : #9daab3
+
+.mk-switch[data-darkmode]
+	root(true)
+
+.mk-switch:not([data-darkmode])
+	root(false)
 
 </style>

src/client/app/common/views/widgets/calendar.vue

@@ -109,10 +109,10 @@ export default define({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mkw-calendar
+root(isDark)
 	padding 16px 0
-	color #777
+	color isDark ? #c5ced6 :#777
-	background #fff
+	background isDark ? #282C37 : #fff
 	border solid 1px rgba(0, 0, 0, 0.075)
 	border-radius 6px
 
@@ -171,7 +171,7 @@ export default define({
 				margin 0 0 2px 0
 				font-size 12px
 				line-height 18px
-				color #888
+				color isDark ? #7a8692 : #888
 
 				> b
 					margin-left 2px
@@ -179,7 +179,7 @@ export default define({
 			> .meter
 				width 100%
 				overflow hidden
-				background #eee
+				background isDark ? #1c1f25 : #eee
 				border-radius 8px
 
 				> .val
@@ -198,4 +198,10 @@ export default define({
 				> .meter > .val
 					background #41ddde
 
+.mkw-calendar[data-darkmode]
+	root(true)
+
+.mkw-calendar:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/desktop/ui.styl

@@ -65,6 +65,20 @@ button.ui
 			background $theme-color
 			border-color $theme-color
 
+html[data-darkmode] button.ui
+html[data-darkmode] .button.ui
+	color #fff
+	background linear-gradient(to bottom, #313543 0%, #282c37 100%)
+	border-color #1c2023
+
+	&:hover
+		background linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%)
+		border-color #151a1d
+
+	&:active
+		background #22262f
+		border-color #151a1d
+
 input:not([type]).ui
 input[type='text'].ui
 input[type='password'].ui

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
+root(isDark)
-	color #777
+	color isDark ? #c5ced6 : #777
-	background #fff
+	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
+				color isDark ? #e3e7ea : #555
-				border-bottom solid 1px #eee
+				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>

src/client/app/desktop/views/widgets/polls.vue

@@ -1,16 +1,19 @@
 <template>
 <div class="mkw-polls">
-	<template v-if="!props.compact">
+	<mk-widget-container :show-header="!props.compact">
-		<p class="title">%fa:chart-pie%%i18n:@title%</p>
+		<template slot="header">%fa:chart-pie%%i18n:@title%</template>
-		<button @click="fetch" title="%i18n:@refresh%">%fa:sync%</button>
+		<button slot="func" title="%i18n:@refresh%" @click="fetch">%fa:sync%</button>
-	</template>
+
-	<div class="poll" v-if="!fetching && poll != null">
+		<div class="mkw-polls--body" :data-darkmode="_darkmode_">
-		<p v-if="poll.text"><router-link to="poll | notePage">{{ poll.text }}</router-link></p>
+			<div class="poll" v-if="!fetching && poll != null">
-		<p v-if="!poll.text"><router-link to="poll | notePage">%fa:link%</router-link></p>
+				<p v-if="poll.text"><router-link to="poll | notePage">{{ poll.text }}</router-link></p>
-		<mk-poll :note="poll"/>
+				<p v-if="!poll.text"><router-link to="poll | notePage">%fa:link%</router-link></p>
-	</div>
+				<mk-poll :note="poll"/>
-	<p class="empty" v-if="!fetching && poll == null">%i18n:@nothing%</p>
+			</div>
-	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+			<p class="empty" v-if="!fetching && poll == null">%i18n:@nothing%</p>
+			<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+		</div>
+	</mk-widget-container>
 </div>
 </template>
 
@@ -60,40 +63,7 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-.mkw-polls
+root(isDark)
-	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
-	border-radius 6px
-
-	> .title
-		margin 0
-		padding 0 16px
-		line-height 42px
-		font-size 0.9em
-		font-weight bold
-		color #888
-		border-bottom solid 1px #eee
-
-		> [data-fa]
-			margin-right 4px
-
-	> button
-		position absolute
-		z-index 2
-		top 0
-		right 0
-		padding 0
-		width 42px
-		font-size 0.9em
-		line-height 42px
-		color #ccc
-
-		&:hover
-			color #aaa
-
-		&:active
-			color #999
-
 	> .poll
 		padding 16px
 		font-size 12px
@@ -120,4 +90,10 @@ export default define({
 		> [data-fa]
 			margin-right 4px
 
+.mkw-polls--body[data-darkmode]
+	root(true)
+
+.mkw-polls--body:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/desktop/views/widgets/profile.vue

@@ -42,9 +42,9 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-.mkw-profile
+root(isDark)
 	overflow hidden
-	background #fff
+	background isDark ? #282c37 : #fff
 	border solid 1px rgba(0, 0, 0, 0.075)
 	border-radius 6px
 
@@ -104,7 +104,7 @@ export default define({
 		width 58px
 		height 58px
 		margin 0
-		border solid 3px #fff
+		border solid 3px isDark ? #282c37 : #fff
 		border-radius 8px
 		vertical-align bottom
 		cursor pointer
@@ -114,13 +114,19 @@ export default define({
 		margin 10px 0 0 84px
 		line-height 16px
 		font-weight bold
-		color #555
+		color isDark ? #fff : #555
 
 	> .username
 		display block
 		margin 4px 0 8px 84px
 		line-height 16px
 		font-size 0.9em
-		color #999
+		color isDark ? #606984 : #999
+
+.mkw-profile[data-darkmode]
+	root(true)
+
+.mkw-profile:not([data-darkmode])
+	root(false)
 
 </style>