[wip] darkmode

4 files changed, 53 insertions, 34 deletions

diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue
index f74d9643eb..6f799b34b6 100644
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@@ -169,7 +169,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-messaging
+root(isDark)
 
 	&[data-compact]
 		font-size 0.8em
@@ -209,7 +209,7 @@ export default Vue.extend({
 
 		> .form
 			padding 8px
-			background #f7f7f7
+			background isDark ? #282c37 : #f7f7f7
 
 			> label
 				display block
@@ -241,13 +241,14 @@ export default Vue.extend({
 				line-height 38px
 				color #000
 				outline none
-				border solid 1px #eee
+				background isDark ? #191b22 : #fff
+				border solid 1px isDark ? #495156 : #eee
 				border-radius 5px
 				box-shadow none
 				transition color 0.5s ease, border 0.5s ease
 
 				&:hover
-					border solid 1px #ddd
+					border solid 1px isDark ? #b0b0b0 : #ddd
 					transition border 0.2s ease
 
 				&:focus
@@ -328,21 +329,21 @@ export default Vue.extend({
 		> a
 			display block
 			text-decoration none
-			background #fff
-			border-bottom solid 1px #eee
+			background isDark ? #282c37 : #fff
+			border-bottom solid 1px isDark ? #1c2023 : #eee
 
 			*
 				pointer-events none
 				user-select none
 
 			&:hover
-				background #fafafa
+				background isDark ? #1e2129 : #fafafa
 
 				> .avatar
 					filter saturate(200%)
 
 			&:active
-				background #eee
+				background isDark ? #14161b : #eee
 
 			&[data-is-read]
 			&[data-is-me]
@@ -382,17 +383,17 @@ export default Vue.extend({
 						overflow hidden
 						text-overflow ellipsis
 						font-size 1em
-						color rgba(0, 0, 0, 0.9)
+						color isDark ? #fff : rgba(0, 0, 0, 0.9)
 						font-weight bold
 						transition all 0.1s ease
 
 					> .username
 						margin 0 8px
-						color rgba(0, 0, 0, 0.5)
+						color isDark ? #606984 : rgba(0, 0, 0, 0.5)
 
 					> .mk-time
 						margin 0 0 0 auto
-						color rgba(0, 0, 0, 0.5)
+						color isDark ? #606984 : rgba(0, 0, 0, 0.5)
 						font-size 80%
 
 				> .avatar
@@ -412,10 +413,10 @@ export default Vue.extend({
 						overflow hidden
 						overflow-wrap break-word
 						font-size 1.1em
-						color rgba(0, 0, 0, 0.8)
+						color isDark ? #fff : rgba(0, 0, 0, 0.8)
 
 						.me
-							color rgba(0, 0, 0, 0.4)
+							color isDark ? rgba(#fff, 0.7) : rgba(0, 0, 0, 0.4)
 
 					> .image
 						display block
@@ -460,4 +461,10 @@ export default Vue.extend({
 					> .avatar
 						margin 0 12px 0 0
 
+.mk-messaging[data-darkmode]
+	root(true)
+
+.mk-messaging:not([data-darkmode])
+	root(false)
+
 </style>
diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue
index 267eeb3a14..ba87ae3497 100644
--- a/src/client/app/common/views/components/reaction-picker.vue
+++ b/src/client/app/common/views/components/reaction-picker.vue
@@ -110,7 +110,7 @@ export default Vue.extend({
 
 $border-color = rgba(27, 31, 35, 0.15)
 
-.mk-reaction-picker
+root(isDark)
 	position initial
 
 	> .backdrop
@@ -124,9 +124,10 @@ $border-color = rgba(27, 31, 35, 0.15)
 		opacity 0
 
 	> .popover
+		$bgcolor = isDark ? #2c303c : #fff
 		position absolute
 		z-index 10001
-		background #fff
+		background $bgcolor
 		border 1px solid $border-color
 		border-radius 4px
 		box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
@@ -159,15 +160,15 @@ $border-color = rgba(27, 31, 35, 0.15)
 				border-top solid $balloon-size transparent
 				border-left solid $balloon-size transparent
 				border-right solid $balloon-size transparent
-				border-bottom solid $balloon-size #fff
+				border-bottom solid $balloon-size $bgcolor
 
 		> p
 			display block
 			margin 0
 			padding 8px 10px
 			font-size 14px
-			color #586069
-			border-bottom solid 1px #e1e4e8
+			color isDark ? #d6dce2 : #586069
+			border-bottom solid 1px isDark ? #1c2023 : #e1e4e8
 
 		> div
 			padding 4px
@@ -182,10 +183,16 @@ $border-color = rgba(27, 31, 35, 0.15)
 				border-radius 2px
 
 				&:hover
-					background #eee
+					background isDark ? #252731 : #eee
 
 				&:active
 					background $theme-color
 					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>
diff --git a/src/client/app/common/views/components/reactions-viewer.vue b/src/client/app/common/views/components/reactions-viewer.vue
index 1afcf525d2..97cb6be17c 100644
--- a/src/client/app/common/views/components/reactions-viewer.vue
+++ b/src/client/app/common/views/components/reactions-viewer.vue
@@ -1,15 +1,15 @@
 <template>
 <div class="mk-reactions-viewer">
 	<template v-if="reactions">
-		<span v-if="reactions.like"><mk-reaction-icon reaction='like'/><span>{{ reactions.like }}</span></span>
-		<span v-if="reactions.love"><mk-reaction-icon reaction='love'/><span>{{ reactions.love }}</span></span>
-		<span v-if="reactions.laugh"><mk-reaction-icon reaction='laugh'/><span>{{ reactions.laugh }}</span></span>
-		<span v-if="reactions.hmm"><mk-reaction-icon reaction='hmm'/><span>{{ reactions.hmm }}</span></span>
-		<span v-if="reactions.surprise"><mk-reaction-icon reaction='surprise'/><span>{{ reactions.surprise }}</span></span>
-		<span v-if="reactions.congrats"><mk-reaction-icon reaction='congrats'/><span>{{ reactions.congrats }}</span></span>
-		<span v-if="reactions.angry"><mk-reaction-icon reaction='angry'/><span>{{ reactions.angry }}</span></span>
-		<span v-if="reactions.confused"><mk-reaction-icon reaction='confused'/><span>{{ reactions.confused }}</span></span>
-		<span v-if="reactions.pudding"><mk-reaction-icon reaction='pudding'/><span>{{ reactions.pudding }}</span></span>
+		<span v-if="reactions.like"><mk-reaction-icon reaction="like"/><span>{{ reactions.like }}</span></span>
+		<span v-if="reactions.love"><mk-reaction-icon reaction="love"/><span>{{ reactions.love }}</span></span>
+		<span v-if="reactions.laugh"><mk-reaction-icon reaction="laugh"/><span>{{ reactions.laugh }}</span></span>
+		<span v-if="reactions.hmm"><mk-reaction-icon reaction="hmm"/><span>{{ reactions.hmm }}</span></span>
+		<span v-if="reactions.surprise"><mk-reaction-icon reaction="surprise"/><span>{{ reactions.surprise }}</span></span>
+		<span v-if="reactions.congrats"><mk-reaction-icon reaction="congrats"/><span>{{ reactions.congrats }}</span></span>
+		<span v-if="reactions.angry"><mk-reaction-icon reaction="angry"/><span>{{ reactions.angry }}</span></span>
+		<span v-if="reactions.confused"><mk-reaction-icon reaction="confused"/><span>{{ reactions.confused }}</span></span>
+		<span v-if="reactions.pudding"><mk-reaction-icon reaction="pudding"/><span>{{ reactions.pudding }}</span></span>
 	</template>
 </div>
 </template>
@@ -27,9 +27,10 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-reactions-viewer
-	border-top dashed 1px #eee
-	border-bottom dashed 1px #eee
+root(isDark)
+	$borderColor = isDark ? #5e6673 : #eee
+	border-top dashed 1px $borderColor
+	border-bottom dashed 1px $borderColor
 	margin 4px 0
 
 	&:empty
@@ -44,6 +45,12 @@ export default Vue.extend({
 		> span
 			margin-left 4px
 			font-size 1.2em
-			color #444
+			color isDark ? #d1d5dc : #444
+
+.mk-reactions-viewer[data-darkmode]
+	root(true)
+
+.mk-reactions-viewer:not([data-darkmode])
+	root(false)
 
 </style>
diff --git a/src/client/app/common/views/components/twitter-setting.vue b/src/client/app/common/views/components/twitter-setting.vue
index 6ca1037aba..ab07e6d09a 100644
--- a/src/client/app/common/views/components/twitter-setting.vue
+++ b/src/client/app/common/views/components/twitter-setting.vue
@@ -50,8 +50,6 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .mk-twitter-setting
-	color #4a535a
-
 	.account
 		border solid 1px #e1e8ed
 		border-radius 4px