🎨

src/client/app/common/views/components/welcome-timeline.vue

@@ -53,15 +53,15 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-welcome-timeline
+root(isDark)
-	background #fff
+	background isDark ? #282C37 : #fff
 
 	> div
 		padding 16px
 		overflow-wrap break-word
 		font-size .9em
-		color #4C4C4C
+		color isDark ? #fff : #4C4C4C
-		border-bottom 1px solid rgba(#000, 0.05)
+		border-bottom 1px solid isDark ? rgba(#000, 0.1) : rgba(#000, 0.05)
 
 		&:after
 			content ""
@@ -96,17 +96,23 @@ export default Vue.extend({
 					overflow hidden
 					font-weight bold
 					text-overflow ellipsis
-					color #627079
+					color isDark ? #fff : #627079
 
 				> .username
 					margin 0 .5em 0 0
-					color #ccc
+					color isDark ? #606984 : #ccc
 
 				> .info
 					margin-left auto
 					font-size 0.9em
 
 					> .created-at
-						color #c0c0c0
+						color isDark ? #606984 : #c0c0c0
+
+.mk-welcome-timeline[data-darkmode]
+	root(true)
+
+.mk-welcome-timeline:not([data-darkmode])
+	root(false)
 
 </style>

src/client/app/desktop/views/pages/welcome.vue

@@ -122,7 +122,7 @@ root(isDark)
 			margin 32px auto 0 auto
 			width 410px
 			text-align left
-			background #fff
+			background isDark ? #313543 : #fff
 			border-radius 8px
 			box-shadow 0 8px 32px rgba(#000, 0.15)
 			overflow hidden
@@ -130,7 +130,7 @@ root(isDark)
 			> header
 				z-index 1
 				padding 12px 16px
-				color #888d94
+				color isDark ? #e3e5e8 : #888d94
 				box-shadow 0 1px 0px rgba(#000, 0.1)
 
 				> div
@@ -144,7 +144,6 @@ root(isDark)
 						height 11px
 						width 11px
 						margin-left 6px
-						background #ccc
 						border-radius 100%
 						vertical-align middle