🎨

src/client/app/mobile/views/components/note-card.vue

@@ -27,17 +27,17 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-note-card
+root(isDark)
 	display inline-block
 	width 150px
 	//height 120px
 	font-size 12px
-	background #fff
+	background isDark ? #282c37 : #fff
 	border-radius 4px
 
 	> a
 		display block
-		color #2c3940
+		color isDark ? #fff : #2c3940
 
 		&:hover
 			text-decoration none
@@ -75,11 +75,17 @@ export default Vue.extend({
 				left 0
 				width 100%
 				height 20px
-				background linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%)
+				background isDark ? linear-gradient(to bottom, rgba(#282c37, 0) 0%, #282c37 100%) : linear-gradient(to bottom, rgba(#fff, 0) 0%, #fff 100%)
 
 		> .mk-time
 			display inline-block
 			padding 8px
 			color #aaa
 
+.mk-note-card[data-darkmode]
+	root(true)
+
+.mk-note-card:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/mobile/views/components/note-detail.vue

@@ -405,7 +405,7 @@ root(isDark)
 
 		> .time
 			font-size 16px
-			color #c0c0c0
+			color isDark ? #606984 : #c0c0c0
 
 		> footer
 			font-size 1.2em
@@ -417,14 +417,14 @@ root(isDark)
 				border none
 				box-shadow none
 				font-size 1em
-				color #ddd
+				color isDark ? #606984 : #ddd
 				cursor pointer
 
 				&:not(:last-child)
 					margin-right 28px
 
 				&:hover
-					color #666
+					color isDark ? #9198af : #666
 
 				> .count
 					display inline