🎨

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

@@ -217,7 +217,7 @@ export default Vue.extend({
 @import '~const.styl'
 
 root(isDark)
-	margin 0
+	margin 0 auto
 	padding 0
 	overflow hidden
 	text-align left
@@ -241,13 +241,13 @@ root(isDark)
 		border-radius 6px 6px 0 0
 
 		&:hover
-			background #f6f6f6
+			background isDark ? #2e3440 : #f6f6f6
 
 		&:active
-			background #f0f0f0
+			background isDark ? #21242b : #f0f0f0
 
 		&:disabled
-			color #ccc
+			color isDark ? #21242b : #ccc
 
 	> .context
 		> *
@@ -294,8 +294,8 @@ root(isDark)
 			clear both
 
 		&:hover
-			> .main > footer > button
-				color #888
+			> footer > button
+				color isDark ? #707b97 : #888
 
 		> .avatar-anchor
 			display block
@@ -340,7 +340,7 @@ root(isDark)
 				top 0
 				right 32px
 				font-size 1em
-				color #c0c0c0
+				color isDark ? #606984 : #c0c0c0
 
 		> .body
 			padding 8px 0
@@ -415,11 +415,11 @@ root(isDark)
 				background transparent
 				border none
 				font-size 1em
-				color #ddd
+				color isDark ? #606984 : #ccc
 				cursor pointer
 
 				&:hover
-					color #666
+					color isDark ? #9198af : #666
 
 				> .count
 					display inline

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

src/client/app/mobile/views/pages/home.vue

@@ -17,7 +17,7 @@
 		<button @click="fn">%fa:pencil-alt%</button>
 	</template>
 
-	<main>
+	<main :data-darkmode="_darkmode_">
 		<div class="nav" v-if="showNav">
 			<div class="bg" @click="showNav = false"></div>
 			<div class="body">
@@ -100,7 +100,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-main
+root(isDark)
 	> .nav
 		> .bg
 			position fixed
@@ -119,23 +119,12 @@ main
 			right 0
 			width 300px
 			margin 0 auto
-			background #fff
+			background isDark ? #272f3a : #fff
 			border-radius 8px
 			box-shadow 0 0 16px rgba(0, 0, 0, 0.1)
 
 			$balloon-size = 16px
 
-			&:before
-				content ""
-				display block
-				position absolute
-				top -($balloon-size * 2)
-				left s('calc(50% - %s)', $balloon-size)
-				border-top solid $balloon-size transparent
-				border-left solid $balloon-size transparent
-				border-right solid $balloon-size transparent
-				border-bottom solid $balloon-size $border-color
-
 			&:after
 				content ""
 				display block
@@ -145,7 +134,7 @@ main
 				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 isDark ? #272f3a : #fff
 
 			> div
 				padding 8px 0
@@ -153,13 +142,14 @@ main
 				> *
 					display block
 					padding 8px 16px
+					color isDark ? #cdd0d8 : #666
 
 					&[data-active]
 						color $theme-color-foreground
 						background $theme-color
 
 					&:not([data-active]):hover
-						background #eee
+						background isDark ? #353e4a : #eee
 
 	> .tl
 		max-width 680px
@@ -172,4 +162,10 @@ main
 		@media (min-width 600px)
 			padding 32px
 
+main[data-darkmode]
+	root(true)
+
+main:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/mobile/views/pages/user.vue

@@ -108,6 +108,8 @@ export default Vue.extend({
 @import '~const.styl'
 
 root(isDark)
+	$bg = isDark ? #22252f : #f7f7f7
+
 	> .is-suspended
 	> .is-remote
 		&.is-suspended
@@ -132,6 +134,7 @@ root(isDark)
 				font-size 12px
 
 	> header
+		background $bg
 
 		> .banner
 			padding-bottom 33.3%
@@ -162,14 +165,14 @@ root(isDark)
 						left -2px
 						bottom -2px
 						width 100%
-						background isDark ? #191b22 : #ececed
-						border 3px solid isDark ? #191b22 : #ececed
+						background $bg
+						border 3px solid $bg
 						border-radius 6px
 
 						@media (min-width 500px)
 							left -4px
 							bottom -4px
-							border 4px solid isDark ? #191b22 : #ececed
+							border 4px solid $bg
 							border-radius 12px
 
 				> .mk-follow-button
@@ -235,7 +238,7 @@ root(isDark)
 		position sticky
 		top 47px
 		box-shadow 0 4px 4px isDark ? rgba(#000, 0.3) : rgba(#000, 0.07)
-		background-color isDark ? #191b22 : #ececed
+		background-color $bg
 		z-index 1
 
 		> .nav-container
@@ -248,12 +251,16 @@ root(isDark)
 				display block
 				flex 1 1
 				text-align center
-				line-height 52px
-				font-size 14px
+				line-height 48px
+				font-size 12px
 				text-decoration none
 				color isDark ? #657786 : #9ca1a5
 				border-bottom solid 2px transparent
 
+				@media (min-width 400px)
+					line-height 52px
+					font-size 14px
+
 				&[data-active]
 					font-weight bold
 					color $theme-color

src/client/app/mobile/views/pages/user/home.vue

@@ -54,7 +54,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.root.home
+root(isDark)
 	max-width 600px
 	margin 0 auto
 
@@ -65,7 +65,7 @@ export default Vue.extend({
 			margin 0 0 16px 0
 
 	> section
-		background #eee
+		background isDark ? #21242f : #eee
 		border-radius 8px
 		box-shadow 0 4px 16px rgba(#000, 0.1)
 
@@ -80,10 +80,13 @@ export default Vue.extend({
 			padding 8px 10px
 			font-size 15px
 			font-weight normal
-			color #465258
-			background #fff
+			color isDark ? #b8c5cc : #465258
+			background isDark ? #282c37 : #fff
 			border-radius 8px 8px 0 0
 
+			@media (min-width 500px)
+				padding 10px 16px
+
 			> i
 				margin-right 6px
 
@@ -95,6 +98,12 @@ export default Vue.extend({
 		display block
 		margin 16px
 		text-align center
-		color #cad2da
+		color isDark ? #cad2da : #929aa0
+
+.root.home[data-darkmode]
+	root(true)
+
+.root.home:not([data-darkmode])
+	root(false)
 
 </style>