モバイル版のダークモード

など

17 files changed, 223 insertions, 179 deletions

diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue
index ba87ae3497..e2c8a6ed3f 100644
--- a/src/client/app/common/views/components/reaction-picker.vue
+++ b/src/client/app/common/views/components/reaction-picker.vue
@@ -120,7 +120,7 @@ root(isDark)
 		z-index 10000
 		width 100%
 		height 100%
-		background rgba(0, 0, 0, 0.1)
+		background isDark ? rgba(#000, 0.4) : rgba(#000, 0.1)
 		opacity 0
 
 	> .popover
diff --git a/src/client/app/desktop/views/components/note-detail.sub.vue b/src/client/app/desktop/views/components/note-detail.sub.vue
index cbea77ae74..fb33421309 100644
--- a/src/client/app/desktop/views/components/note-detail.sub.vue
+++ b/src/client/app/desktop/views/components/note-detail.sub.vue
@@ -16,7 +16,9 @@
 			</div>
 		</header>
 		<div class="body">
-			<mk-note-html v-if="note.text" :text="note.text" :i="os.i" :class="$style.text"/>
+			<div class="text">
+				<mk-note-html v-if="note.text" :text="note.text" :i="os.i"/>
+			</div>
 			<div class="media" v-if="note.mediaIds.length > 0">
 				<mk-media-list :media-list="note.media"/>
 			</div>
@@ -40,10 +42,10 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.sub
+root(isDark)
 	margin 0
 	padding 20px 32px
-	background #fdfdfd
+	background isDark ? #21242d : #fdfdfd
 
 	&:after
 		content ""
@@ -87,7 +89,7 @@ export default Vue.extend({
 					display inline
 					margin 0
 					padding 0
-					color #777
+					color isDark ? #fff : #777
 					font-size 1em
 					font-weight 700
 					text-align left
@@ -99,24 +101,29 @@ export default Vue.extend({
 				> .username
 					text-align left
 					margin 0 0 0 8px
-					color #ccc
+					color isDark ? #606984 : #ccc
 
 			> .right
 				float right
 
 				> .time
 					font-size 0.9em
-					color #c0c0c0
+					color isDark ? #606984 : #c0c0c0
 
-</style>
+		> .body
+			> .text
+				cursor default
+				display block
+				margin 0
+				padding 0
+				overflow-wrap break-word
+				font-size 1em
+				color isDark ? #959ba7 : #717171
+
+.sub[data-darkmode]
+	root(true)
+
+.sub:not([data-darkmode])
+	root(false)
 
-<style lang="stylus" module>
-.text
-	cursor default
-	display block
-	margin 0
-	padding 0
-	overflow-wrap break-word
-	font-size 1em
-	color #717171
 </style>
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index f5153bad63..266644cf85 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -38,7 +38,9 @@
 			</router-link>
 		</header>
 		<div class="body">
-			<mk-note-html :class="$style.text" v-if="p.text" :text="p.text" :i="os.i"/>
+			<div class="text">
+				<mk-note-html v-if="p.text" :text="p.text" :i="os.i"/>
+			</div>
 			<div class="media" v-if="p.media.length > 0">
 				<mk-media-list :media-list="p.media"/>
 			</div>
@@ -214,12 +216,12 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-note-detail
+root(isDark)
 	margin 0
 	padding 0
 	overflow hidden
 	text-align left
-	background #fff
+	background isDark ? #282C37 : #fff
 	border solid 1px rgba(0, 0, 0, 0.1)
 	border-radius 8px
 
@@ -232,10 +234,10 @@ export default Vue.extend({
 		text-align center
 		color #999
 		cursor pointer
-		background #fafafa
+		background isDark ? #21242d : #fafafa
 		outline none
 		border none
-		border-bottom solid 1px #eef0f2
+		border-bottom solid 1px isDark ? #1c2023 : #eef0f2
 		border-radius 6px 6px 0 0
 
 		&:hover
@@ -249,11 +251,11 @@ export default Vue.extend({
 
 	> .context
 		> *
-			border-bottom 1px solid #eef0f2
+			border-bottom 1px solid isDark ? #1c2023 : #eef0f2
 
 	> .renote
 		color #9dbb00
-		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+		background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
 
 		> p
 			margin 0
@@ -281,7 +283,7 @@ export default Vue.extend({
 			padding-top 8px
 
 	> .reply-to
-		border-bottom 1px solid #eef0f2
+		border-bottom 1px solid isDark ? #1c2023 : #eef0f2
 
 	> article
 		padding 28px 32px 18px 32px
@@ -318,7 +320,7 @@ export default Vue.extend({
 				display inline-block
 				margin 0
 				line-height 24px
-				color #777
+				color isDark ? #fff : #627079
 				font-size 18px
 				font-weight 700
 				text-align left
@@ -331,7 +333,7 @@ export default Vue.extend({
 				display block
 				text-align left
 				margin 0
-				color #ccc
+				color isDark ? #606984 : #ccc
 
 			> .time
 				position absolute
@@ -343,6 +345,15 @@ export default Vue.extend({
 		> .body
 			padding 8px 0
 
+			> .text
+				cursor default
+				display block
+				margin 0
+				padding 0
+				overflow-wrap break-word
+				font-size 1.5em
+				color isDark ? #fff : #717171
+
 			> .renote
 				margin 8px 0
 
@@ -420,17 +431,12 @@ export default Vue.extend({
 
 	> .replies
 		> *
-			border-top 1px solid #eef0f2
+			border-top 1px solid isDark ? #1c2023 : #eef0f2
 
-</style>
+.mk-note-detail[data-darkmode]
+	root(true)
+
+.mk-note-detail:not([data-darkmode])
+	root(false)
 
-<style lang="stylus" module>
-.text
-	cursor default
-	display block
-	margin 0
-	padding 0
-	overflow-wrap break-word
-	font-size 1.5em
-	color #717171
 </style>
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 6d0e0c8f5c..9e7a7a6d29 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -434,7 +434,7 @@ root(isDark)
 					margin 0 .5em 0 0
 					padding 1px 6px
 					font-size 12px
-					color isDark ? #758188 :#aaa
+					color isDark ? #758188 : #aaa
 					border solid 1px isDark ? #57616f : #ddd
 					border-radius 3px
 
diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts
index 1de4891973..2e9805e0d0 100644
--- a/src/client/app/mobile/script.ts
+++ b/src/client/app/mobile/script.ts
@@ -55,15 +55,15 @@ init((launch) => {
 			{ path: '/signup', name: 'signup', component: MkSignup },
 			{ path: '/i/settings', component: MkSettings },
 			{ path: '/i/settings/profile', component: MkProfileSetting },
-			{ path: '/i/notifications', component: MkNotifications },
-			{ path: '/i/messaging', component: MkMessaging },
+			{ path: '/i/notifications', name: 'notifications', component: MkNotifications },
+			{ path: '/i/messaging', name: 'messaging', component: MkMessaging },
 			{ path: '/i/messaging/:user', component: MkMessagingRoom },
-			{ path: '/i/drive', component: MkDrive },
+			{ path: '/i/drive', name: 'drive', component: MkDrive },
 			{ path: '/i/drive/folder/:folder', component: MkDrive },
 			{ path: '/i/drive/file/:file', component: MkDrive },
 			{ path: '/selectdrive', component: MkSelectDrive },
 			{ path: '/search', component: MkSearch },
-			{ path: '/othello', component: MkOthello },
+			{ path: '/othello', name: 'othello', component: MkOthello },
 			{ path: '/othello/:game', component: MkOthello },
 			{ path: '/@:user', component: MkUser },
 			{ path: '/@:user/followers', component: MkFollowers },
diff --git a/src/client/app/mobile/views/components/note-detail.sub.vue b/src/client/app/mobile/views/components/note-detail.sub.vue
index 06f442d308..683b5ffd1b 100644
--- a/src/client/app/mobile/views/components/note-detail.sub.vue
+++ b/src/client/app/mobile/views/components/note-detail.sub.vue
@@ -27,23 +27,22 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.root.sub
+root(isDark)
 	padding 8px
 	font-size 0.9em
-	background #fdfdfd
+	background isDark ? #21242d : #fdfdfd
 
 	@media (min-width 500px)
 		padding 12px
 
+	@media (min-width 600px)
+		padding 24px 32px
+
 	&:after
 		content ""
 		display block
 		clear both
 
-	&:hover
-		> .main > footer > button
-			color #888
-
 	> .avatar-anchor
 		display block
 		float left
@@ -71,7 +70,7 @@ export default Vue.extend({
 				margin 0 .5em 0 0
 				padding 0
 				overflow hidden
-				color #607073
+				color isDark ? #fff : #607073
 				font-size 1em
 				font-weight 700
 				text-align left
@@ -84,11 +83,11 @@ export default Vue.extend({
 			> .username
 				text-align left
 				margin 0 .5em 0 0
-				color #d1d8da
+				color isDark ? #606984 : #d1d8da
 
 			> .time
 				margin-left auto
-				color #b2b8bb
+				color isDark ? #606984 : #b2b8bb
 
 		> .body
 
@@ -97,7 +96,12 @@ export default Vue.extend({
 				margin 0
 				padding 0
 				font-size 1.1em
-				color #717171
+				color isDark ? #959ba7 : #717171
 
-</style>
+.root.sub[data-darkmode]
+	root(true)
 
+.root.sub:not([data-darkmode])
+	root(false)
+
+</style>
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 62dd9184cd..5d593c02d3 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -34,7 +34,9 @@
 			</div>
 		</header>
 		<div class="body">
-			<mk-note-html v-if="p.text" :text="p.text" :i="os.i" :class="$style.text"/>
+			<div class="text">
+				<mk-note-html v-if="p.text" :text="p.text" :i="os.i"/>
+			</div>
 			<div class="tags" v-if="p.tags && p.tags.length > 0">
 				<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
 			</div>
@@ -209,15 +211,18 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-note-detail
+root(isDark)
 	overflow hidden
 	margin 0 auto
 	padding 0
 	width 100%
 	text-align left
-	background #fff
+	background isDark ? #282C37 : #fff
 	border-radius 8px
-	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+	box-shadow 0 0 2px rgba(#000, 0.1)
+
+	@media (min-width 500px)
+		box-shadow 0 8px 32px rgba(#000, 0.1)
 
 	> .fetching
 		padding 64px 0
@@ -231,29 +236,26 @@ export default Vue.extend({
 		text-align center
 		color #999
 		cursor pointer
-		background #fafafa
+		background isDark ? #21242d : #fafafa
 		outline none
 		border none
-		border-bottom solid 1px #eef0f2
+		border-bottom solid 1px isDark ? #1c2023 : #eef0f2
 		border-radius 6px 6px 0 0
 		box-shadow none
 
 		&:hover
-			background #f6f6f6
-
-		&:active
-			background #f0f0f0
+			background isDark ? #16181d : #f6f6f6
 
 		&:disabled
 			color #ccc
 
 	> .context
 		> *
-			border-bottom 1px solid #eef0f2
+			border-bottom 1px solid isDark ? #1c2023 : #eef0f2
 
 	> .renote
 		color #9dbb00
-		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+		background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
 
 		> p
 			margin 0
@@ -281,7 +283,7 @@ export default Vue.extend({
 			padding-top 8px
 
 	> .reply-to
-		border-bottom 1px solid #eef0f2
+		border-bottom 1px solid isDark ? #1c2023 : #eef0f2
 
 	> article
 		padding 14px 16px 9px 16px
@@ -294,17 +296,13 @@ export default Vue.extend({
 			display block
 			clear both
 
-		&:hover
-			> .main > footer > button
-				color #888
-
 		> header
 			display flex
-			line-height 1.1
+			line-height 1.1em
 
 			> .avatar-anchor
 				display block
-				padding 0 .5em 0 0
+				padding 0 12px 0 0
 
 				> .avatar
 					display block
@@ -323,7 +321,7 @@ export default Vue.extend({
 				> .name
 					display inline-block
 					margin .4em 0
-					color #777
+					color isDark ? #fff : #627079
 					font-size 16px
 					font-weight bold
 					text-align left
@@ -336,11 +334,22 @@ export default Vue.extend({
 					display block
 					text-align left
 					margin 0
-					color #ccc
+					color isDark ? #606984 : #ccc
 
 		> .body
 			padding 8px 0
 
+			> .text
+				display block
+				margin 0
+				padding 0
+				overflow-wrap break-word
+				font-size 16px
+				color isDark ? #fff : #717171
+
+				@media (min-width 500px)
+					font-size 24px
+
 			> .renote
 				margin 8px 0
 
@@ -427,20 +436,12 @@ export default Vue.extend({
 
 	> .replies
 		> *
-			border-top 1px solid #eef0f2
+			border-top 1px solid isDark ? #1c2023 : #eef0f2
 
-</style>
+.mk-note-detail[data-darkmode]
+	root(true)
 
-<style lang="stylus" module>
-.text
-	display block
-	margin 0
-	padding 0
-	overflow-wrap break-word
-	font-size 16px
-	color #717171
-
-	@media (min-width 500px)
-		font-size 24px
+.mk-note-detail:not([data-darkmode])
+	root(false)
 
 </style>
diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue
index 759de4746b..38659143ac 100644
--- a/src/client/app/mobile/views/components/note.sub.vue
+++ b/src/client/app/mobile/views/components/note.sub.vue
@@ -27,7 +27,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.sub
+root(isDark)
 	font-size 0.9em
 	padding 16px
 
@@ -76,7 +76,7 @@ export default Vue.extend({
 				margin 0 0.5em 0 0
 				padding 0
 				overflow hidden
-				color #607073
+				color isDark ? #fff : #607073
 				font-size 1em
 				font-weight 700
 				text-align left
@@ -89,11 +89,11 @@ export default Vue.extend({
 			> .username
 				text-align left
 				margin 0
-				color #d1d8da
+				color isDark ? #606984 : #d1d8da
 
 			> .created-at
 				margin-left auto
-				color #b2b8bb
+				color isDark ? #606984 : #b2b8bb
 
 		> .body
 			max-height 128px
@@ -104,11 +104,16 @@ export default Vue.extend({
 				margin 0
 				padding 0
 				font-size 1.1em
-				color #717171
+				color isDark ? #959ba7 : #717171
 
 				pre
 					max-height 120px
 					font-size 80%
 
-</style>
+.sub[data-darkmode]
+	root(true)
+
+.sub:not([data-darkmode])
+	root(false)
 
+</style>
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 5772fb2b7e..e7a43f7985 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -261,7 +261,7 @@ root(isDark)
 		padding 8px 16px
 		line-height 28px
 		color #9dbb00
-		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+		background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
 
 		@media (min-width 500px)
 			padding 16px
@@ -325,9 +325,9 @@ root(isDark)
 			display block
 			float left
 			margin 0 10px 8px 0
-			position -webkit-sticky
-			position sticky
-			top 62px
+			//position -webkit-sticky
+			//position sticky
+			//top 62px
 
 			@media (min-width 500px)
 				margin-right 16px
@@ -365,7 +365,7 @@ root(isDark)
 					margin 0 0.5em 0 0
 					padding 0
 					overflow hidden
-					color #627079
+					color isDark ? #fff : #627079
 					font-size 1em
 					font-weight bold
 					text-decoration none
@@ -378,15 +378,15 @@ root(isDark)
 					margin 0 0.5em 0 0
 					padding 1px 6px
 					font-size 12px
-					color #aaa
-					border solid 1px #ddd
+					color isDark ? #758188 : #aaa
+					border solid 1px isDark ? #57616f : #ddd
 					border-radius 3px
 
 				> .username
 					margin 0 0.5em 0 0
 					overflow hidden
 					text-overflow ellipsis
-					color #ccc
+					color isDark ? #606984 : #ccc
 
 				> .info
 					margin-left auto
@@ -394,10 +394,10 @@ root(isDark)
 
 					> .mobile
 						margin-right 6px
-						color #c0c0c0
+						color isDark ? #606984 : #c0c0c0
 
 					> .created-at
-						color #c0c0c0
+						color isDark ? #606984 : #c0c0c0
 
 			> .body
 
@@ -434,7 +434,7 @@ root(isDark)
 						padding 0
 						overflow-wrap break-word
 						font-size 1.1em
-						color #717171
+						color isDark ? #fff : #717171
 
 						>>> .title
 							display block
@@ -442,7 +442,7 @@ root(isDark)
 							padding 4px
 							font-size 90%
 							text-align center
-							background #eef1f3
+							background isDark ? #2f3944 : #eef1f3
 							border-radius 4px
 
 						>>> .code
@@ -451,12 +451,12 @@ root(isDark)
 						>>> .quote
 							margin 8px
 							padding 6px 12px
-							color #aaa
-							border-left solid 3px #eee
+							color isDark ? #6f808e : #aaa
+							border-left solid 3px isDark ? #637182 : #eee
 
 						> .reply
 							margin-right 8px
-							color #717171
+							color isDark ? #99abbf : #717171
 
 						> .rp
 							margin-left 4px
@@ -528,7 +528,7 @@ root(isDark)
 
 						> .mk-note-preview
 							padding 16px
-							border dashed 1px #c0dac6
+							border dashed 1px isDark ? #4e945e : #c0dac6
 							border-radius 8px
 
 				> .app
@@ -543,14 +543,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
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index ecd9c8cf2b..58069b06ee 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -202,10 +202,10 @@ export default Vue.extend({
 root(isDark)
 	background isDark ? #282C37 : #fff
 	border-radius 8px
-	box-shadow 0 0 2px rgba(0, 0, 0, 0.1)
+	box-shadow 0 0 2px rgba(#000, 0.1)
 
 	@media (min-width 500px)
-		box-shadow 0 8px 32px rgba(0, 0, 0, 0.1)
+		box-shadow 0 8px 32px rgba(#000, 0.1)
 
 	.transition
 		.mk-notes-enter
@@ -222,9 +222,9 @@ root(isDark)
 			line-height 32px
 			text-align center
 			font-size 0.9em
-			color #aaa
-			background #fdfdfd
-			border-bottom solid 1px #eaeaea
+			color isDark ? #666b79 : #aaa
+			background isDark ? #242731 : #fdfdfd
+			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
 
 			span
 				margin 0 16px
diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index 793f34fe85..a4e6b027ed 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -91,8 +91,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-notification
-
+root(isDark)
 	> .notification
 		padding 16px
 		font-size 12px
@@ -105,7 +104,7 @@ export default Vue.extend({
 			font-size 16px
 
 		@media (min-width 600px)
-			padding 32px
+			padding 24px 32px
 
 		&:after
 			content ""
@@ -143,14 +142,14 @@ export default Vue.extend({
 
 				> .mk-time
 					margin-left auto
-					color rgba(0, 0, 0, 0.3)
+					color isDark ? #606984 : #c0c0c0
 					font-size 0.9em
 
 			> .note-preview
-				color rgba(0, 0, 0, 0.7)
+				color isDark ? #fff : #717171
 
 			> .note-ref
-				color rgba(0, 0, 0, 0.7)
+				color isDark ? #fff : #717171
 
 				[data-fa]
 					font-size 1em
@@ -167,5 +166,10 @@ export default Vue.extend({
 			> div > header i
 				color #53c7ce
 
-</style>
+.mk-notification[data-darkmode]
+	root(true)
 
+.mk-notification:not([data-darkmode])
+	root(false)
+
+</style>
diff --git a/src/client/app/mobile/views/components/notifications.vue b/src/client/app/mobile/views/components/notifications.vue
index 7a878740cc..a0d8938646 100644
--- a/src/client/app/mobile/views/components/notifications.vue
+++ b/src/client/app/mobile/views/components/notifications.vue
@@ -103,9 +103,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-notifications
+root(isDark)
 	margin 0 auto
-	background #fff
+	background isDark ? #282C37 :#fff
 	border-radius 8px
 	box-shadow 0 0 2px rgba(0, 0, 0, 0.1)
 
@@ -123,11 +123,8 @@ export default Vue.extend({
 
 	> .notifications
 
-		> .mk-notification
-			border-bottom solid 1px rgba(0, 0, 0, 0.05)
-
-			&:last-child
-				border-bottom none
+		> .mk-notification:not(:last-child)
+			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
 
 		> .date
 			display block
@@ -135,9 +132,9 @@ export default Vue.extend({
 			line-height 32px
 			text-align center
 			font-size 0.8em
-			color #aaa
-			background #fdfdfd
-			border-bottom solid 1px rgba(0, 0, 0, 0.05)
+			color isDark ? #666b79 : #aaa
+			background isDark ? #242731 : #fdfdfd
+			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
 
 			span
 				margin 0 16px
@@ -170,4 +167,10 @@ export default Vue.extend({
 		> [data-fa]
 			margin-right 4px
 
+.mk-notifications[data-darkmode]
+	root(true)
+
+.mk-notifications:not([data-darkmode])
+	root(false)
+
 </style>
diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
index 89edcf5a9e..1e6c7b0856 100644
--- a/src/client/app/mobile/views/components/ui.header.vue
+++ b/src/client/app/mobile/views/components/ui.header.vue
@@ -150,7 +150,7 @@ root(isDark)
 	top 0
 	z-index 1024
 	width 100%
-	//box-shadow 0 1px 0 rgba(#000, 0.075)
+	box-shadow 0 1px 0 rgba(#000, 0.075)
 
 	&, *
 		user-select none
diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index 68cdacb3b5..2ea4364fb1 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -15,19 +15,20 @@
 			</router-link>
 			<div class="links">
 				<ul>
-					<li><router-link to="/">%fa:home%%i18n:@home%%fa:angle-right%</router-link></li>
-					<li><router-link to="/i/notifications">%fa:R bell%%i18n:@notifications%<template v-if="hasUnreadNotifications">%fa:circle%</template>%fa:angle-right%</router-link></li>
-					<li><router-link to="/i/messaging">%fa:R comments%%i18n:@messaging%<template v-if="hasUnreadMessagingMessages">%fa:circle%</template>%fa:angle-right%</router-link></li>
-					<li><router-link to="/othello">%fa:gamepad%ゲーム<template v-if="hasGameInvitations">%fa:circle%</template>%fa:angle-right%</router-link></li>
+					<li><router-link to="/" :data-active="$route.name == 'index'">%fa:home%%i18n:@home%%fa:angle-right%</router-link></li>
+					<li><router-link to="/i/notifications" :data-active="$route.name == 'notifications'">%fa:R bell%%i18n:@notifications%<template v-if="hasUnreadNotifications">%fa:circle%</template>%fa:angle-right%</router-link></li>
+					<li><router-link to="/i/messaging" :data-active="$route.name == 'messaging'">%fa:R comments%%i18n:@messaging%<template v-if="hasUnreadMessagingMessages">%fa:circle%</template>%fa:angle-right%</router-link></li>
+					<li><router-link to="/othello" :data-active="$route.name == 'othello'">%fa:gamepad%ゲーム<template v-if="hasGameInvitations">%fa:circle%</template>%fa:angle-right%</router-link></li>
 				</ul>
 				<ul>
-					<li><router-link to="/i/drive">%fa:cloud%%i18n:@drive%%fa:angle-right%</router-link></li>
+					<li><router-link to="/i/drive" :data-active="$route.name == 'drive'">%fa:cloud%%i18n:@drive%%fa:angle-right%</router-link></li>
 				</ul>
 				<ul>
 					<li><a @click="search">%fa:search%%i18n:@search%%fa:angle-right%</a></li>
 				</ul>
 				<ul>
 					<li><router-link to="/i/settings">%fa:cog%%i18n:@settings%%fa:angle-right%</router-link></li>
+					<li @click="dark"><p><template v-if="_darkmode_">%fa:moon%</template><template v-else>%fa:R moon%</template><span>ダークモード</span></p></li>
 				</ul>
 			</div>
 			<a :href="aboutUrl"><p class="about">%i18n:@about%</p></a>
@@ -113,6 +114,9 @@ export default Vue.extend({
 		},
 		onOthelloNoInvites() {
 			this.hasGameInvitations = false;
+		},
+		dark() {
+			(this as any)._updateDarkmode_(!(this as any)._darkmode_);
 		}
 	}
 });
@@ -121,7 +125,9 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.nav
+root(isDark)
+	$color = isDark ? #c9d2e0 : #777
+
 	.backdrop
 		position fixed
 		top 0
@@ -129,7 +135,7 @@ export default Vue.extend({
 		z-index 1025
 		width 100%
 		height 100%
-		background rgba(0, 0, 0, 0.2)
+		background isDark ? rgba(#000, 0.7) : rgba(#000, 0.2)
 
 	.body
 		position fixed
@@ -140,8 +146,7 @@ export default Vue.extend({
 		height 100%
 		overflow auto
 		-webkit-overflow-scrolling touch
-		color #777
-		background #fff
+		background isDark ? #16191f : #fff
 
 	.me
 		display block
@@ -162,7 +167,7 @@ export default Vue.extend({
 			left 80px
 			padding 0
 			width calc(100% - 112px)
-			color #777
+			color $color
 			line-height 96px
 			overflow hidden
 			text-overflow ellipsis
@@ -182,14 +187,22 @@ export default Vue.extend({
 			font-size 1em
 			line-height 1em
 
-			a
+			a, p
 				display block
+				margin 0
 				padding 0 20px
 				line-height 3rem
 				line-height calc(1rem + 30px)
-				color #777
+				color $color
 				text-decoration none
 
+				&[data-active]
+					color $theme-color-foreground
+					background $theme-color
+
+					> [data-fa]:last-child
+						color $theme-color-foreground
+
 				> [data-fa]:first-child
 					margin-right 0.5em
 
@@ -205,18 +218,16 @@ export default Vue.extend({
 					padding 0 20px
 					font-size 1.2em
 					line-height calc(1rem + 30px)
-					color #ccc
+					color $color
 
 	.about
 		margin 0
 		padding 1em 0
 		text-align center
 		font-size 0.8em
+		color $color
 		opacity 0.5
 
-		a
-			color #777
-
 .nav-enter-active,
 .nav-leave-active {
 	opacity: 1;
@@ -239,4 +250,10 @@ export default Vue.extend({
 	opacity: 0;
 }
 
+.nav[data-darkmode]
+	root(true)
+
+.nav:not([data-darkmode])
+	root(false)
+
 </style>
diff --git a/src/client/app/mobile/views/pages/note.vue b/src/client/app/mobile/views/pages/note.vue
index 7bcc5e71f5..aff0d5aa52 100644
--- a/src/client/app/mobile/views/pages/note.vue
+++ b/src/client/app/mobile/views/pages/note.vue
@@ -2,11 +2,13 @@
 <mk-ui>
 	<span slot="header">%fa:R sticky-note%%i18n:@title%</span>
 	<main v-if="!fetching">
-		<a v-if="note.next" :href="note.next">%fa:angle-up%%i18n:@next%</a>
 		<div>
 			<mk-note-detail :note="note"/>
 		</div>
-		<a v-if="note.prev" :href="note.prev">%fa:angle-down%%i18n:@prev%</a>
+		<footer>
+			<a v-if="note.prev" :href="note.prev">%fa:angle-left% %i18n:@prev%</a>
+			<a v-if="note.next" :href="note.next">%i18n:@next% %fa:angle-right%</a>
+		</footer>
 	</main>
 </mk-ui>
 </template>
@@ -52,33 +54,24 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 main
 	text-align center
+	padding 8px
 
-	> div
-		margin 8px auto
-		padding 0
-		max-width 500px
-		width calc(100% - 16px)
-
-		@media (min-width 500px)
-			margin 16px auto
-			width calc(100% - 32px)
-
-	> a
-		display inline-block
+	@media (min-width 500px)
+		padding 16px
 
-		&:first-child
-			margin-top 8px
+	@media (min-width 600px)
+		padding 32px
 
-			@media (min-width 500px)
-				margin-top 16px
-
-		&:last-child
-			margin-bottom 8px
+	> div
+		margin 0 auto
+		padding 0
+		max-width 600px
 
-			@media (min-width 500px)
-				margin-bottom 16px
+	> footer
+		margin-top 16px
 
-		> [data-fa]
-			margin-right 4px
+		> a
+			display inline-block
+			margin 0 16px
 
 </style>
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index abd4b5bd85..d2688a0f3d 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -135,7 +135,7 @@ root(isDark)
 
 		> .banner
 			padding-bottom 33.3%
-			background-color isDark ? #0e0e0e : #cacaca
+			background-color isDark ? #5f7273 : #cacaca
 			background-size cover
 			background-position center
 
@@ -162,6 +162,7 @@ root(isDark)
 						left -2px
 						bottom -2px
 						width 100%
+						background isDark ? #191b22 : #ececed
 						border 3px solid isDark ? #191b22 : #ececed
 						border-radius 6px
 
@@ -195,8 +196,8 @@ root(isDark)
 					margin-left 8px
 					padding 2px 4px
 					font-size 12px
-					color #657786
-					background #f8f8f8
+					color isDark ? #657786 : #fff
+					background isDark ? #f8f8f8 : #a7bec7
 					border-radius 4px
 
 			> .description
diff --git a/src/client/app/mobile/views/pages/user/home.vue b/src/client/app/mobile/views/pages/user/home.vue
index f4191edbbf..d9bb8041e4 100644
--- a/src/client/app/mobile/views/pages/user/home.vue
+++ b/src/client/app/mobile/views/pages/user/home.vue
@@ -61,6 +61,9 @@ export default Vue.extend({
 	> .mk-note-detail
 		margin 0 0 8px 0
 
+		@media (min-width 500px)
+			margin 0 0 16px 0
+
 	> section
 		background #eee
 		border-radius 8px