Merge pull request #2781 from syuilo/theme

Theme

32 files changed, 234 insertions, 446 deletions

diff --git a/src/client/app/mobile/views/components/dialog.vue b/src/client/app/mobile/views/components/dialog.vue
index 6a0d74c752..fff44a28c3 100644
--- a/src/client/app/mobile/views/components/dialog.vue
+++ b/src/client/app/mobile/views/components/dialog.vue
@@ -91,7 +91,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mk-dialog
 	> .bg
@@ -145,20 +145,20 @@ export default Vue.extend({
 					margin 0 0.375em
 
 				&:hover
-					color $theme-color
+					color var(--primary)
 
 				&:active
-					color darken($theme-color, 10%)
+					color var(--primaryDarken10)
 					transition color 0s ease
 
 </style>
 
 <style lang="stylus" module>
-@import '~const.styl'
+
 
 .header
 	margin 0 0 1em 0
-	color $theme-color
+	color var(--primary)
 	// color #43A4EC
 	font-weight bold
 
diff --git a/src/client/app/mobile/views/components/drive-file-chooser.vue b/src/client/app/mobile/views/components/drive-file-chooser.vue
index 92ac211af2..5fca19939e 100644
--- a/src/client/app/mobile/views/components/drive-file-chooser.vue
+++ b/src/client/app/mobile/views/components/drive-file-chooser.vue
@@ -46,7 +46,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.cdxzvcfawjxdyxsekbxbfgtplebnoneb
 	position fixed
 	z-index 20000
 	top 0
@@ -59,11 +59,11 @@ root(isDark)
 	> .body
 		width 100%
 		height 100%
-		background isDark ? #282c37 : #fff
+		background var(--faceHeader)
 
 		> header
-			border-bottom solid 1px isDark ? #1b1f29 : #eee
-			color isDark ? #fff : #111
+			border-bottom solid 1px var(--faceDivider)
+			color var(--text)
 
 			> h1
 				margin 0
@@ -96,10 +96,4 @@ root(isDark)
 			overflow scroll
 			-webkit-overflow-scrolling touch
 
-.cdxzvcfawjxdyxsekbxbfgtplebnoneb[data-darkmode]
-	root(true)
-
-.cdxzvcfawjxdyxsekbxbfgtplebnoneb:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/drive.file-detail.vue b/src/client/app/mobile/views/components/drive.file-detail.vue
index 8108892597..de46297fcb 100644
--- a/src/client/app/mobile/views/components/drive.file-detail.vue
+++ b/src/client/app/mobile/views/components/drive.file-detail.vue
@@ -134,10 +134,10 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.pyvicwrksnfyhpfgkjwqknuururpaztw
 	> .preview
 		padding 8px
-		background isDark ? #191b22 : #f0f0f0
+		background var(--bg)
 
 		> img
 			display block
@@ -148,9 +148,10 @@ root(isDark)
 
 		> footer
 			padding 8px 8px 0 8px
-			font-size 0.8em
-			color isDark ? #606984 : #888
 			text-align center
+			font-size 0.8em
+			color var(--text)
+			opacity 0.7
 
 			> .separator
 				display inline
@@ -178,12 +179,12 @@ root(isDark)
 	> .info
 		padding 14px
 		font-size 0.8em
-		border-top solid 1px isDark ? #1c2023 : #dfdfdf
+		border-top solid 1px var(--faceDivider)
 
 		> div
 			max-width 500px
 			margin 0 auto
-			color isDark ? #9397a2 : #9d9d9d
+			color var(--text)
 
 			> .separator
 				padding 0 4px
@@ -198,7 +199,7 @@ root(isDark)
 
 	> .menu
 		padding 14px
-		border-top solid 1px isDark ? #1c2023 : #dfdfdf
+		border-top solid 1px var(--faceDivider)
 
 		> div
 			max-width 500px
@@ -209,31 +210,26 @@ root(isDark)
 				width 100%
 				padding 10px 16px
 				margin 0 0 12px 0
-				color isDark ? #dfe3e8 : #333
+				color var(--primaryForeground)
 				font-size 0.9em
 				text-align center
 				text-decoration none
-				text-shadow 0 1px 0 isDark ? rgba(0, 0, 0, 0.9) : rgba(255, 255, 255, 0.9)
-				background-image isDark ? linear-gradient(#292f3c, #1b2025) : linear-gradient(#fafafa, #eaeaea)
-				border 1px solid isDark ? #121417 : #ddd
-				border-bottom-color isDark ? #060606 : #cecece
+				background var(--primary)
+				border none
 				border-radius 3px
 
 				&:last-child
 					margin-bottom 0
 
 				&:active
-					background-color #767676
-					background-image none
-					border-color #444
-					box-shadow 0 1px 3px rgba(#000, 0.075), inset 0 0 5px rgba(#000, 0.2)
+					background var(--primaryDarken10)
 
 				> [data-fa]
 					margin-right 4px
 
 	> .hash
 		padding 14px
-		border-top solid 1px isDark ? #1c2023 : #dfdfdf
+		border-top solid 1px var(--faceDivider)
 
 		> div
 			max-width 500px
@@ -243,7 +239,7 @@ root(isDark)
 				display block
 				margin 0
 				padding 0
-				color isDark ? #a8b7d0 : #555
+				color var(--text)
 				font-size 0.9em
 
 				> [data-fa]
@@ -264,7 +260,7 @@ root(isDark)
 
 	> .exif
 		padding 14px
-		border-top solid 1px isDark ? #1c2023 : #dfdfdf
+		border-top solid 1px var(--faceDivider)
 
 		> div
 			max-width 500px
@@ -274,7 +270,7 @@ root(isDark)
 				display block
 				margin 0
 				padding 0
-				color isDark ? #a8b7d0 : #555
+				color var(--text)
 				font-size 0.9em
 
 				> [data-fa]
@@ -292,10 +288,4 @@ root(isDark)
 				border-radius 2px
 				background #f5f5f5
 
-.pyvicwrksnfyhpfgkjwqknuururpaztw[data-darkmode]
-	root(true)
-
-.pyvicwrksnfyhpfgkjwqknuururpaztw:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/drive.file.vue b/src/client/app/mobile/views/components/drive.file.vue
index 4375cfdd7b..68978bb944 100644
--- a/src/client/app/mobile/views/components/drive.file.vue
+++ b/src/client/app/mobile/views/components/drive.file.vue
@@ -63,9 +63,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
-
-root(isDark)
+.vupkuhvjnjyqaqhsiogfbywvjxynrgsm
 	display block
 	text-decoration none !important
 
@@ -103,7 +101,7 @@ root(isDark)
 				padding 0
 				font-size 0.9em
 				font-weight bold
-				color isDark ? #fff : #555
+				color var(--text)
 				text-overflow ellipsis
 				overflow-wrap break-word
 
@@ -127,21 +125,22 @@ root(isDark)
 				display block
 				margin 4px 0 0 0
 				font-size 0.7em
+				color var(--text)
 
 				> .separator
 					padding 0 4px
 
 				> .type
-					color #9D9D9D
+					opacity 0.7
 
 					> .mk-file-type-icon
 						margin-right 4px
 
 				> .data-size
-					color #9D9D9D
+					opacity 0.7
 
 				> .created-at
-					color #BDBDBD
+					opacity 0.7
 
 					> [data-fa]
 						margin-right 2px
@@ -150,15 +149,9 @@ root(isDark)
 					color #bf4633
 
 	&[data-is-selected]
-		background $theme-color
+		background var(--primary)
 
 		&, *
 			color #fff !important
 
-.vupkuhvjnjyqaqhsiogfbywvjxynrgsm[data-darkmode]
-	root(true)
-
-.vupkuhvjnjyqaqhsiogfbywvjxynrgsm:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/drive.folder.vue b/src/client/app/mobile/views/components/drive.folder.vue
index f76ecba6ad..05dcbd083e 100644
--- a/src/client/app/mobile/views/components/drive.folder.vue
+++ b/src/client/app/mobile/views/components/drive.folder.vue
@@ -24,9 +24,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.jvwxssxsytqlqvrpiymarjlzlsxskqsr
 	display block
-	color isDark ? #fff : #777
+	color var(--text)
 	text-decoration none !important
 
 	*
@@ -55,10 +55,4 @@ root(isDark)
 			> *
 				height 100%
 
-.jvwxssxsytqlqvrpiymarjlzlsxskqsr[data-darkmode]
-	root(true)
-
-.jvwxssxsytqlqvrpiymarjlzlsxskqsr:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/drive.vue b/src/client/app/mobile/views/components/drive.vue
index 36a6ea2f40..8919462511 100644
--- a/src/client/app/mobile/views/components/drive.vue
+++ b/src/client/app/mobile/views/components/drive.vue
@@ -473,8 +473,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
-	background isDark ? #282c37 : #fff
+.kmmwchoexgckptowjmjgfsygeltxfeqs
+	background var(--face)
 
 	> nav
 		display block
@@ -487,10 +487,10 @@ root(isDark)
 		overflow auto
 		white-space nowrap
 		font-size 0.9em
-		color rgba(isDark ? #fff : #000, 0.67)
+		color var(--text)
 		-webkit-backdrop-filter blur(12px)
 		backdrop-filter blur(12px)
-		background-color rgba(isDark ? #313543 : #fff, 0.75)
+		background-color var(--mobileDriveNavBg)
 		border-bottom solid 1px rgba(#000, 0.13)
 
 		> p
@@ -516,7 +516,7 @@ root(isDark)
 			opacity 0.5
 
 		> .info
-			border-bottom solid 1px isDark ? #1c2023 : #eee
+			border-bottom solid 1px var(--faceDivider)
 
 			&:empty
 				display none
@@ -527,15 +527,15 @@ root(isDark)
 				margin 0 auto
 				padding 4px 16px
 				font-size 10px
-				color isDark ? #606984 : #777
+				color var(--text)
 
 		> .folders
 			> .folder
-				border-bottom solid 1px isDark ? #1c2023 : #eee
+				border-bottom solid 1px var(--faceDivider)
 
 		> .files
 			> .file
-				border-bottom solid 1px isDark ? #1c2023 : #eee
+				border-bottom solid 1px var(--faceDivider)
 
 			> .more
 				display block
@@ -591,10 +591,4 @@ root(isDark)
 	> .file
 		display none
 
-.kmmwchoexgckptowjmjgfsygeltxfeqs[data-darkmode]
-	root(true)
-
-.kmmwchoexgckptowjmjgfsygeltxfeqs:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/follow-button.vue b/src/client/app/mobile/views/components/follow-button.vue
index ff7260edb5..cff830d998 100644
--- a/src/client/app/mobile/views/components/follow-button.vue
+++ b/src/client/app/mobile/views/components/follow-button.vue
@@ -93,7 +93,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mk-follow-button
 	display block
@@ -105,29 +105,29 @@ export default Vue.extend({
 	line-height 36px
 	font-size 14px
 	font-weight bold
-	color $theme-color
+	color var(--primary)
 	background transparent
 	outline none
-	border solid 1px $theme-color
+	border solid 1px var(--primary)
 	border-radius 36px
 
 	&:hover
-		background rgba($theme-color, 0.1)
+		background var(--primaryAlpha01)
 
 	&:active
-		background rgba($theme-color, 0.2)
+		background var(--primaryAlpha02)
 
 	&.active
-		color $theme-color-foreground
-		background $theme-color
+		color var(--primaryForeground)
+		background var(--primary)
 
 		&:hover
-			background lighten($theme-color, 10%)
-			border-color lighten($theme-color, 10%)
+			background var(--primaryLighten10)
+			border-color var(--primaryLighten10)
 
 		&:active
-			background darken($theme-color, 10%)
-			border-color darken($theme-color, 10%)
+			background var(--primaryDarken10)
+			border-color var(--primaryDarken10)
 
 	&.wait
 		cursor wait !important
diff --git a/src/client/app/mobile/views/components/mute-button.vue b/src/client/app/mobile/views/components/mute-button.vue
index 3cb568615d..316fbda8f1 100644
--- a/src/client/app/mobile/views/components/mute-button.vue
+++ b/src/client/app/mobile/views/components/mute-button.vue
@@ -41,11 +41,11 @@ export default Vue.extend({
 
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mk-mute-button
   display block
-  user-select none 
+  user-select none
   cursor pointer
   padding 0 16px
   margin 0
@@ -53,27 +53,27 @@ export default Vue.extend({
   line-height 36px
   font-size 14px
   font-weight bold
-  color $theme-color
+  color var(--primary)
   background transparent
   outline none
-  border solid 1px $theme-color
+  border solid 1px var(--primary)
   border-radius 36px
 
   &:hover
-    background rgba($theme-color, 0.1)
+    background var(--primaryAlpha01)
 
   &:active
-    background rgba($theme-color, 0.2)
+    background var(--primaryAlpha02)
 
   &.active
-    color $theme-color-foreground
-    background $theme-color
+    color var(--primaryForeground)
+    background var(--primary)
 
     &:hover
-      background lighten($theme-color, 10%)
-      border-color lighten($theme-color, 10%)
+      background var(--primaryLighten10)
+      border-color var(--primaryLighten10)
     &:active
-      background darken($theme-color, 10%)
-      border-color darken($theme-color, 10%)
+      background var(--primaryDarken10)
+      border-color var(--primaryDarken10)
 
 </style>
diff --git a/src/client/app/mobile/views/components/note-card.vue b/src/client/app/mobile/views/components/note-card.vue
index e8427798cd..de9c9c1450 100644
--- a/src/client/app/mobile/views/components/note-card.vue
+++ b/src/client/app/mobile/views/components/note-card.vue
@@ -27,17 +27,18 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-note-card
 	display inline-block
 	width 150px
 	//height 120px
 	font-size 12px
-	background isDark ? #282c37 : #fff
+	background var(--face)
 	border-radius 4px
+	box-shadow 0 2px 8px rgba(0, 0, 0, 0.2)
 
 	> a
 		display block
-		color isDark ? #fff : #2c3940
+		color var(--noteText)
 
 		&:hover
 			text-decoration none
@@ -75,17 +76,11 @@ root(isDark)
 				left 0
 				width 100%
 				height 20px
-				background isDark ? linear-gradient(to bottom, rgba(#282c37, 0) 0%, #282c37 100%) : linear-gradient(to bottom, rgba(#fff, 0) 0%, #fff 100%)
+				background linear-gradient(to bottom, transparent 0%, var(--face) 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>
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 68be9f8ac4..48d6d32868 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -223,13 +223,11 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
-
-root(isDark)
+.mk-note-detail
 	overflow hidden
 	width 100%
 	text-align left
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	border-radius 8px
 	box-shadow 0 0 2px rgba(#000, 0.1)
 
@@ -248,26 +246,26 @@ root(isDark)
 		text-align center
 		color #999
 		cursor pointer
-		background isDark ? #21242d : #fafafa
+		background var(--subNoteBg)
 		outline none
 		border none
-		border-bottom solid 1px isDark ? #1c2023 : #eef0f2
+		border-bottom solid 1px var(--faceDivider)
 		border-radius 6px 6px 0 0
 		box-shadow none
 
 		&:hover
-			background isDark ? #16181d : #f6f6f6
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
 
-		&:disabled
-			color #ccc
+		&:active
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
 
 	> .conversation
 		> *
-			border-bottom 1px solid isDark ? #1c2023 : #eef0f2
+			border-bottom 1px solid var(--faceDivider)
 
 	> .renote
-		color #9dbb00
-		background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+		color var(--renoteText)
+		background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
 
 		> p
 			margin 0
@@ -290,7 +288,7 @@ root(isDark)
 			padding-top 8px
 
 	> .reply-to
-		border-bottom 1px solid isDark ? #1c2023 : #eef0f2
+		border-bottom 1px solid var(--faceDivider)
 
 	> article
 		padding 14px 16px 9px 16px
@@ -323,7 +321,7 @@ root(isDark)
 				> .name
 					display inline-block
 					margin .4em 0
-					color isDark ? #fff : #627079
+					color var(--noteHeaderName)
 					font-size 16px
 					font-weight bold
 					text-align left
@@ -336,7 +334,7 @@ root(isDark)
 					display block
 					text-align left
 					margin 0
-					color isDark ? #606984 : #ccc
+					color var(--noteHeaderAcct)
 
 		> .body
 			padding 8px 0
@@ -347,7 +345,7 @@ root(isDark)
 				margin 0
 				padding 0
 				overflow-wrap break-word
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 				> .text
 					margin-right 8px
@@ -360,7 +358,7 @@ root(isDark)
 					padding 0
 					overflow-wrap break-word
 					font-size 16px
-					color isDark ? #fff : #717171
+					color var(--noteText)
 
 					@media (min-width 500px)
 						font-size 24px
@@ -370,7 +368,7 @@ root(isDark)
 
 					> *
 						padding 16px
-						border dashed 1px #c0dac6
+						border dashed 1px var(--quoteBorder)
 						border-radius 8px
 
 				> .location
@@ -395,7 +393,7 @@ root(isDark)
 
 		> .time
 			font-size 16px
-			color isDark ? #606984 : #c0c0c0
+			color var(--noteHeaderInfo)
 
 		> footer
 			font-size 1.2em
@@ -407,14 +405,14 @@ root(isDark)
 				border none
 				box-shadow none
 				font-size 1em
-				color isDark ? #606984 : #ddd
+				color var(--noteActions)
 				cursor pointer
 
 				&:not(:last-child)
 					margin-right 28px
 
 				&:hover
-					color isDark ? #9198af : #666
+					color var(--noteActionsHover)
 
 				> .count
 					display inline
@@ -422,16 +420,10 @@ root(isDark)
 					color #999
 
 				&.reacted
-					color $theme-color
+					color var(--primary)
 
 	> .replies
 		> *
-			border-top 1px solid isDark ? #1c2023 : #eef0f2
-
-.mk-note-detail[data-darkmode]
-	root(true)
-
-.mk-note-detail:not([data-darkmode])
-	root(false)
+			border-top 1px solid var(--faceDivider)
 
 </style>
diff --git a/src/client/app/mobile/views/components/note-preview.vue b/src/client/app/mobile/views/components/note-preview.vue
index 4c03593a9e..525f54998e 100644
--- a/src/client/app/mobile/views/components/note-preview.vue
+++ b/src/client/app/mobile/views/components/note-preview.vue
@@ -36,7 +36,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.yohlumlkhizgfkvvscwfcrcggkotpvry
 	display flex
 	margin 0
 	padding 0
@@ -88,7 +88,7 @@ root(isDark)
 				margin 0
 				padding 0
 				overflow-wrap break-word
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 				> .text
 					margin-right 8px
@@ -98,12 +98,6 @@ root(isDark)
 					cursor default
 					margin 0
 					padding 0
-					color isDark ? #959ba7 : #717171
-
-.yohlumlkhizgfkvvscwfcrcggkotpvry[data-darkmode]
-	root(true)
-
-.yohlumlkhizgfkvvscwfcrcggkotpvry:not([data-darkmode])
-	root(false)
+					color var(--subNoteText)
 
 </style>
diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue
index c25f827dad..24f5be160c 100644
--- a/src/client/app/mobile/views/components/note.sub.vue
+++ b/src/client/app/mobile/views/components/note.sub.vue
@@ -41,11 +41,11 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.zlrxdaqttccpwhpaagdmkawtzklsccam
 	display flex
 	padding 16px
 	font-size 10px
-	background isDark ? #21242d : #fcfcfc
+	background var(--subNoteBg)
 
 	@media (min-width 350px)
 		font-size 12px
@@ -95,7 +95,7 @@ root(isDark)
 				margin 0
 				padding 0
 				overflow-wrap break-word
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 				> .text
 					margin-right 8px
@@ -104,16 +104,10 @@ root(isDark)
 				> .text
 					margin 0
 					padding 0
-					color isDark ? #959ba7 : #717171
+					color var(--subNoteText)
 
 					pre
 						max-height 120px
 						font-size 80%
 
-.zlrxdaqttccpwhpaagdmkawtzklsccam[data-darkmode]
-	root(true)
-
-.zlrxdaqttccpwhpaagdmkawtzklsccam: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 0ce72cab11..4af19ade29 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -228,11 +228,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
-
-root(isDark)
+.note
 	font-size 12px
-	border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+	border-bottom solid 1px var(--faceDivider)
 
 	&:last-of-type
 		border-bottom none
@@ -256,8 +254,8 @@ root(isDark)
 		padding 8px 16px
 		line-height 28px
 		white-space pre
-		color #9dbb00
-		background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+		color var(--renoteText)
+		background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
 
 		@media (min-width 500px)
 			padding 16px
@@ -349,7 +347,7 @@ root(isDark)
 					margin 0
 					padding 0
 					overflow-wrap break-word
-					color isDark ? #fff : #717171
+					color var(--noteText)
 
 					> .text
 						margin-right 8px
@@ -361,7 +359,7 @@ root(isDark)
 						margin 0
 						padding 0
 						overflow-wrap break-word
-						color isDark ? #fff : #717171
+						color var(--noteText)
 
 						>>> .title
 							display block
@@ -369,7 +367,7 @@ root(isDark)
 							padding 4px
 							font-size 90%
 							text-align center
-							background isDark ? #2f3944 : #eef1f3
+							background var(--mfmTitleBg)
 							border-radius 4px
 
 						>>> .code
@@ -378,25 +376,25 @@ root(isDark)
 						>>> .quote
 							margin 8px
 							padding 6px 12px
-							color isDark ? #6f808e : #aaa
-							border-left solid 3px isDark ? #637182 : #eee
+							color var(--mfmQuote)
+							border-left solid 3px var(--mfmQuoteLine)
 
 						> .reply
 							margin-right 8px
-							color isDark ? #99abbf : #717171
+							color var(--noteText)
 
 						> .rp
 							margin-left 4px
 							font-style oblique
-							color #a0bf46
+							color var(--renoteText)
 
 						[data-is-me]:after
 							content "you"
 							padding 0 4px
 							margin-left 4px
 							font-size 80%
-							color $theme-color-foreground
-							background $theme-color
+							color var(--primaryForeground)
+							background var(--primary)
 							border-radius 4px
 
 					.mk-url-preview
@@ -427,7 +425,7 @@ root(isDark)
 
 						> *
 							padding 16px
-							border dashed 1px isDark ? #4e945e : #c0dac6
+							border dashed 1px var(--quoteBorder)
 							border-radius 8px
 
 				> .app
@@ -442,14 +440,14 @@ root(isDark)
 					border none
 					box-shadow none
 					font-size 1em
-					color isDark ? #606984 : #ddd
+					color var(--noteActions)
 					cursor pointer
 
 					&:not(:last-child)
 						margin-right 28px
 
 					&:hover
-						color isDark ? #9198af : #666
+						color var(--noteActionsHover)
 
 					> .count
 						display inline
@@ -457,13 +455,7 @@ root(isDark)
 						color #999
 
 					&.reacted
-						color $theme-color
-
-.note[data-darkmode]
-	root(true)
-
-.note:not([data-darkmode])
-	root(false)
+						color var(--primary)
 
 </style>
 
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index 401df3ae5b..8f0a1ef196 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -217,11 +217,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
-
-root(isDark)
+.mk-notes
 	overflow hidden
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	border-radius 8px
 	box-shadow 0 0 2px rgba(#000, 0.1)
 
@@ -243,9 +241,9 @@ root(isDark)
 			line-height 32px
 			text-align center
 			font-size 0.9em
-			color isDark ? #666b79 : #aaa
-			background isDark ? #242731 : #fdfdfd
-			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+			color var(--dateDividerFg)
+			background var(--dateDividerBg)
+			border-bottom solid 1px var(--faceDivider)
 
 			span
 				margin 0 16px
@@ -276,7 +274,7 @@ root(isDark)
 
 	> footer
 		text-align center
-		border-top solid 1px isDark ? #1c2023 : #eaeaea
+		border-top solid 1px var(--faceDivider)
 
 		&:empty
 			display none
@@ -293,10 +291,4 @@ root(isDark)
 			&:disabled
 				opacity 0.7
 
-.mk-notes[data-darkmode]
-	root(true)
-
-.mk-notes:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index ee90c6b46b..4a09104341 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -105,7 +105,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-notification
 	> .notification
 		padding 16px
 		font-size 12px
@@ -154,14 +154,14 @@ root(isDark)
 
 				> .mk-time
 					margin-left auto
-					color isDark ? #606984 : #c0c0c0
+					color var(--noteHeaderInfo)
 					font-size 0.9em
 
 			> .note-preview
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 			> .note-ref
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 				[data-fa]
 					font-size 1em
@@ -182,10 +182,4 @@ root(isDark)
 			> div > header i
 				color #888
 
-.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 11ac23f4b1..bfb6c1e62a 100644
--- a/src/client/app/mobile/views/components/notifications.vue
+++ b/src/client/app/mobile/views/components/notifications.vue
@@ -104,9 +104,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-notifications
 	margin 0 auto
-	background isDark ? #282C37 :#fff
+	background var(--face)
 	border-radius 8px
 	box-shadow 0 0 2px rgba(#000, 0.1)
 	overflow hidden
@@ -126,7 +126,7 @@ root(isDark)
 	> .notifications
 
 		> .mk-notification:not(:last-child)
-			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+			border-bottom solid 1px var(--faceDivider)
 
 		> .date
 			display block
@@ -134,9 +134,9 @@ root(isDark)
 			line-height 32px
 			text-align center
 			font-size 0.8em
-			color isDark ? #666b79 : #aaa
-			background isDark ? #242731 : #fdfdfd
-			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+			color var(--dateDividerFg)
+			background var(--dateDividerBg)
+			border-bottom solid 1px var(--faceDivider)
 
 			span
 				margin 0 16px
@@ -169,10 +169,4 @@ root(isDark)
 		> [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/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 72ec142572..e4ec1aa576 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -336,9 +336,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
-
-root(isDark)
+.mk-post-form
 	max-width 500px
 	width calc(100% - 16px)
 	margin 8px auto
@@ -354,27 +352,27 @@ root(isDark)
 		margin 32px auto
 
 	> .form
-		background isDark ? #282C37 : #fff
+		background var(--face)
 		border-radius 8px
 		box-shadow 0 0 2px rgba(#000, 0.1)
 
 		> header
 			z-index 1000
 			height 50px
-			box-shadow 0 1px 0 0 isDark ? rgba(#000, 0.2) : rgba(#000, 0.1)
+			box-shadow 0 1px 0 0 var(--mobilePostFormDivider)
 
 			> .cancel
 				padding 0
 				width 50px
 				line-height 50px
 				font-size 24px
-				color isDark ? #9baec8 : #555
+				color var(--text)
 
 			> div
 				position absolute
 				top 0
 				right 0
-				color #657786
+				color var(--text)
 
 				> .text-count
 					line-height 50px
@@ -388,8 +386,8 @@ root(isDark)
 					padding 0 16px
 					line-height 34px
 					vertical-align bottom
-					color $theme-color-foreground
-					background $theme-color
+					color var(--primaryForeground)
+					background var(--primary)
 					border-radius 4px
 
 					&:disabled
@@ -408,7 +406,7 @@ root(isDark)
 
 				> span
 					margin-right 16px
-					color isDark ? #fff : #666
+					color var(--text)
 
 			> input
 				z-index 1
@@ -420,11 +418,11 @@ root(isDark)
 				margin 0
 				width 100%
 				font-size 16px
-				color isDark ? #fff : #333
-				background isDark ? #191d23 : #fff
+				color var(--inputText)
+				background var(--mobilePostFormTextareaBg)
 				border none
 				border-radius 0
-				box-shadow 0 1px 0 0 isDark ? rgba(#000, 0.2) : rgba(#000, 0.1)
+				box-shadow 0 1px 0 0 var(--mobilePostFormDivider)
 
 				&:disabled
 					opacity 0.5
@@ -493,10 +491,4 @@ root(isDark)
 		> *
 			margin-right 8px
 
-.mk-post-form[data-darkmode]
-	root(true)
-
-.mk-post-form:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/sub-note-content.vue b/src/client/app/mobile/views/components/sub-note-content.vue
index 4d0aa25f34..2238edf278 100644
--- a/src/client/app/mobile/views/components/sub-note-content.vue
+++ b/src/client/app/mobile/views/components/sub-note-content.vue
@@ -37,7 +37,7 @@ export default Vue.extend({
 		> .rp
 			margin-left 4px
 			font-style oblique
-			color #a0bf46
+			color var(--renoteText)
 
 	mk-poll
 		font-size 80%
diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
index 15c8299c2e..7fd68002e7 100644
--- a/src/client/app/mobile/views/components/ui.header.vue
+++ b/src/client/app/mobile/views/components/ui.header.vue
@@ -4,7 +4,6 @@
 	<mk-special-message/>
 	<div class="main" ref="main">
 		<div class="backdrop"></div>
-		<p ref="welcomeback" v-if="$store.getters.isSignedIn">%i18n:@welcome-back%<b>{{ $store.state.i | userName }}</b>%i18n:@adjective%</p>
 		<div class="content" ref="mainContainer">
 			<button class="nav" @click="$parent.isDrawerOpening = true">%fa:bars%</button>
 			<template v-if="hasUnreadNotification || hasUnreadMessagingMessage || hasGameInvitation">%fa:circle%</template>
@@ -50,53 +49,6 @@ export default Vue.extend({
 
 			this.connection.on('reversi_invited', this.onReversiInvited);
 			this.connection.on('reversi_no_invites', this.onReversiNoInvites);
-
-			const ago = (new Date().getTime() - new Date(this.$store.state.i.lastUsedAt).getTime()) / 1000;
-			const isHisasiburi = ago >= 3600;
-			this.$store.state.i.lastUsedAt = new Date();
-
-			if (isHisasiburi) {
-				(this.$refs.welcomeback as any).style.display = 'block';
-				(this.$refs.main as any).style.overflow = 'hidden';
-
-				anime({
-					targets: this.$refs.welcomeback,
-					top: '0',
-					opacity: 1,
-					delay: 1000,
-					duration: 500,
-					easing: 'easeOutQuad'
-				});
-
-				anime({
-					targets: this.$refs.mainContainer,
-					opacity: 0,
-					delay: 1000,
-					duration: 500,
-					easing: 'easeOutQuad'
-				});
-
-				setTimeout(() => {
-					anime({
-						targets: this.$refs.welcomeback,
-						top: '-48px',
-						opacity: 0,
-						duration: 500,
-						complete: () => {
-							(this.$refs.welcomeback as any).style.display = 'none';
-							(this.$refs.main as any).style.overflow = 'initial';
-						},
-						easing: 'easeInQuad'
-					});
-
-					anime({
-						targets: this.$refs.mainContainer,
-						opacity: 1,
-						duration: 500,
-						easing: 'easeInQuad'
-					});
-				}, 2500);
-			}
 		}
 	},
 	beforeDestroy() {
@@ -118,9 +70,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
-
-root(isDark)
+.header
 	$height = 48px
 
 	position fixed
@@ -134,7 +84,7 @@ root(isDark)
 
 	> .indicator
 		height 3px
-		background $theme-color
+		background var(--primary)
 
 	> .warn
 		display block
@@ -146,7 +96,7 @@ root(isDark)
 		color #fff
 
 	> .main
-		color rgba(#fff, 0.9)
+		color var(--mobileHeaderFg)
 
 		> .backdrop
 			position absolute
@@ -156,20 +106,7 @@ root(isDark)
 			height $height
 			-webkit-backdrop-filter blur(12px)
 			backdrop-filter blur(12px)
-			//background-color rgba(#1b2023, 0.75)
-			background-color isDark ? #313543 : #595f6f
-
-		> p
-			display none
-			position absolute
-			z-index 1002
-			top $height
-			width 100%
-			line-height $height
-			margin 0
-			text-align center
-			color #fff
-			opacity 0
+			background-color var(--mobileHeaderBg)
 
 		> .content
 			z-index 1001
@@ -216,7 +153,7 @@ root(isDark)
 				left 8px
 				pointer-events none
 				font-size 10px
-				color $theme-color
+				color var(--primary)
 
 			> button:last-child
 				display block
@@ -231,10 +168,4 @@ root(isDark)
 				line-height $height
 				border-left solid 1px rgba(#000, 0.1)
 
-.header[data-darkmode]
-	root(true)
-
-.header:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index c3ae05fef6..ba122cc3e2 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -121,10 +121,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
-
-root(isDark)
-	$color = isDark ? #c9d2e0 : #777
+.nav
+	$color = var(--text)
 
 	.backdrop
 		position fixed
@@ -133,7 +131,7 @@ root(isDark)
 		z-index 1025
 		width 100%
 		height 100%
-		background isDark ? rgba(#000, 0.7) : rgba(#000, 0.2)
+		background var(--mobileNavBackdrop)
 
 	.body
 		position fixed
@@ -144,7 +142,7 @@ root(isDark)
 		height 100%
 		overflow auto
 		-webkit-overflow-scrolling touch
-		background isDark ? #16191f : #fff
+		background var(--secondary)
 
 	.me
 		display block
@@ -198,11 +196,11 @@ root(isDark)
 				text-decoration none
 
 				&[data-active]
-					color $theme-color-foreground
-					background $theme-color
+					color var(--primaryForeground)
+					background var(--primary)
 
 					> [data-fa]:last-child
-						color $theme-color-foreground
+						color var(--primaryForeground)
 
 				> [data-fa]:first-child
 					margin-right 0.5em
@@ -212,7 +210,7 @@ root(isDark)
 				> [data-fa].circle
 					margin-left 6px
 					font-size 10px
-					color $theme-color
+					color var(--primary)
 
 				> [data-fa]:last-child
 					position absolute
@@ -226,8 +224,8 @@ root(isDark)
 
 	.announcements
 		> article
-			background isDark ? rgba(30, 129, 216, 0.2) : rgba(155, 196, 232, 0.2)
-			color isDark ? #fff : #3f4967
+			background var(--mobileAnnouncement)
+			color var(--mobileAnnouncementFg)
 			padding 16px
 			margin 8px 0
 			font-size 12px
@@ -265,10 +263,4 @@ root(isDark)
 	opacity: 0;
 }
 
-.nav[data-darkmode]
-	root(true)
-
-.nav:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/users-list.vue b/src/client/app/mobile/views/components/users-list.vue
index a57b821293..f06f5245b8 100644
--- a/src/client/app/mobile/views/components/users-list.vue
+++ b/src/client/app/mobile/views/components/users-list.vue
@@ -65,7 +65,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mk-users-list
 
@@ -87,8 +87,8 @@ export default Vue.extend({
 
 			&[data-active]
 				font-weight bold
-				color $theme-color
-				border-color $theme-color
+				color var(--primary)
+				border-color var(--primary)
 
 			> span
 				display inline-block
diff --git a/src/client/app/mobile/views/components/widget-container.vue b/src/client/app/mobile/views/components/widget-container.vue
index a713a10621..2a4025002b 100644
--- a/src/client/app/mobile/views/components/widget-container.vue
+++ b/src/client/app/mobile/views/components/widget-container.vue
@@ -25,8 +25,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
-	background isDark ? #21242f : #eee
+.mk-widget-container
+	background var(--face)
 	border-radius 8px
 	box-shadow 0 4px 16px rgba(#000, 0.1)
 	overflow hidden
@@ -35,17 +35,14 @@ root(isDark)
 		background transparent !important
 		box-shadow none !important
 
-	&.hideHeader
-		background isDark ? #21242f : #fff
-
 	> header
 		> .title
 			margin 0
 			padding 8px 10px
 			font-size 15px
 			font-weight normal
-			color isDark ? #b8c5cc : #465258
-			background isDark ? #282c37 : #fff
+			color var(--faceHeaderText)
+			background var(--faceHeader)
 			border-radius 8px 8px 0 0
 
 			> [data-fa]
@@ -65,10 +62,4 @@ root(isDark)
 			font-size 15px
 			color #465258
 
-.mk-widget-container[data-darkmode]
-	root(true)
-
-.mk-widget-container:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/pages/favorites.vue b/src/client/app/mobile/views/pages/favorites.vue
index 53512e804c..a25f70147b 100644
--- a/src/client/app/mobile/views/pages/favorites.vue
+++ b/src/client/app/mobile/views/pages/favorites.vue
@@ -71,7 +71,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 main
 	width 100%
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index ca62d4e2f8..edba8585bd 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -22,7 +22,7 @@
 		<button @click="fn">%fa:pencil-alt%</button>
 	</template>
 
-	<main :data-darkmode="$store.state.device.darkmode">
+	<main>
 		<div class="nav" v-if="showNav">
 			<div class="bg" @click="showNav = false"></div>
 			<div class="pointer"></div>
@@ -154,9 +154,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
-
-root(isDark)
+main
 	> .nav
 		> .pointer
 			position fixed
@@ -176,7 +174,7 @@ root(isDark)
 				border-top solid $size transparent
 				border-left solid $size transparent
 				border-right solid $size transparent
-				border-bottom solid $size isDark ? #272f3a : #fff
+				border-bottom solid $size var(--popupBg)
 
 		> .bg
 			position fixed
@@ -198,7 +196,7 @@ root(isDark)
 			margin 0 auto
 			overflow auto
 			-webkit-overflow-scrolling touch
-			background isDark ? #272f3a : #fff
+			background var(--popupBg)
 			border-radius 8px
 			box-shadow 0 0 16px rgba(#000, 0.1)
 
@@ -207,24 +205,24 @@ root(isDark)
 
 				> .hr
 					margin 8px 0
-					border-top solid 1px isDark ? rgba(#000, 0.3) : rgba(#000, 0.1)
+					border-top solid 1px var(--faceDivider)
 
 				> *:not(.hr)
 					display block
 					padding 8px 16px
-					color isDark ? #cdd0d8 : #666
+					color var(--text)
 
 					&[data-active]
-						color $theme-color-foreground
-						background $theme-color
+						color var(--primaryForeground)
+						background var(--primary)
 
 					&:not([data-active]):hover
-						background isDark ? #353e4a : #eee
+						background var(--mobileHomeTlItemHover)
 
 					> .badge
 						margin-left 6px
 						font-size 10px
-						color $theme-color
+						color var(--primary)
 
 	> .tl
 		max-width 680px
@@ -237,17 +235,9 @@ root(isDark)
 		@media (min-width 600px)
 			padding 32px
 
-main[data-darkmode]
-	root(true)
-
-main:not([data-darkmode])
-	root(false)
-
 </style>
 
 <style lang="stylus" module>
-@import '~const.styl'
-
 .title
 	i
 		margin-right 4px
@@ -255,7 +245,7 @@ main:not([data-darkmode])
 .badge
 	margin-left 6px
 	font-size 10px
-	color $theme-color
+	color var(--primary)
 	vertical-align middle
 
 </style>
diff --git a/src/client/app/mobile/views/pages/notifications.vue b/src/client/app/mobile/views/pages/notifications.vue
index bddcd457bb..ce33332faf 100644
--- a/src/client/app/mobile/views/pages/notifications.vue
+++ b/src/client/app/mobile/views/pages/notifications.vue
@@ -34,7 +34,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 main
 	width 100%
diff --git a/src/client/app/mobile/views/pages/received-follow-requests.vue b/src/client/app/mobile/views/pages/received-follow-requests.vue
index 77938c3d60..beaf6bba57 100644
--- a/src/client/app/mobile/views/pages/received-follow-requests.vue
+++ b/src/client/app/mobile/views/pages/received-follow-requests.vue
@@ -52,8 +52,6 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
-
 main
 	width 100%
 	max-width 680px
@@ -69,7 +67,7 @@ main
 	> div
 		display flex
 		padding 16px
-		border solid 1px isDark ? #1c2023 : #eee
+		border solid 1px var(--faceDivider)
 		border-radius 4px
 
 		> span
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 9e90416370..94fa38cec9 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -1,7 +1,7 @@
 <template>
 <mk-ui>
 	<span slot="header"><span style="margin-right:4px;">%fa:cog%</span>%i18n:@settings%</span>
-	<main :data-darkmode="$store.state.device.darkmode">
+	<main>
 		<div class="signin-as" v-html="'%i18n:@signed-in-as%'.replace('{}', `<b>${name}</b>`)"></div>
 
 		<div>
@@ -24,6 +24,13 @@
 				</section>
 
 				<section>
+					<header>%i18n:@theme%</header>
+					<div>
+						<mk-theme/>
+					</div>
+				</section>
+
+				<section>
 					<header>%i18n:@timeline%</header>
 					<div>
 						<ui-switch v-model="showReplyTarget">%i18n:@show-reply-target%</ui-switch>
@@ -322,7 +329,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+main
 	margin 0 auto
 	max-width 600px
 	width 100%
@@ -331,27 +338,22 @@ root(isDark)
 		margin 16px
 		padding 16px
 		text-align center
-		color isDark ? #49ab63 : #2c662d
-		background isDark ? #273c34 : #fcfff5
+		color var(--mobileSignedInAsFg)
+		background var(--mobileSignedInAsBg)
 		box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
 
 	> .signout
 		margin 16px
 		padding 16px
 		text-align center
-		color isDark ? #ff5f56 : #cc2727
-		background isDark ? #652222 : #fff6f5
+		color var(--mobileSignedInAsFg)
+		background var(--mobileSignedInAsBg)
 		box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
 
 	> footer
 		margin 16px
 		text-align center
-		color isDark ? #c9d2e0 : #888
-
-main[data-darkmode]
-	root(true)
-
-main:not([data-darkmode])
-	root(false)
+		color var(--text)
+		opacity 0.7
 
 </style>
diff --git a/src/client/app/mobile/views/pages/user-list.vue b/src/client/app/mobile/views/pages/user-list.vue
index 1c6a829cd5..f8c8aafa61 100644
--- a/src/client/app/mobile/views/pages/user-list.vue
+++ b/src/client/app/mobile/views/pages/user-list.vue
@@ -53,7 +53,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 main
 	width 100%
diff --git a/src/client/app/mobile/views/pages/user-lists.vue b/src/client/app/mobile/views/pages/user-lists.vue
index 5ee0636dea..fc80f5d1c6 100644
--- a/src/client/app/mobile/views/pages/user-lists.vue
+++ b/src/client/app/mobile/views/pages/user-lists.vue
@@ -51,7 +51,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 main
 	width 100%
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index c1082f31a9..a2a6bd7a83 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -1,7 +1,7 @@
 <template>
 <mk-ui>
 	<template slot="header" v-if="!fetching"><img :src="user.avatarUrl" alt="">{{ user | userName }}</template>
-	<main v-if="!fetching" :data-darkmode="$store.state.device.darkmode">
+	<main v-if="!fetching">
 		<div class="is-suspended" v-if="user.isSuspended"><p>%fa:exclamation-triangle% %i18n:@is-suspended%</p></div>
 		<div class="is-remote" v-if="user.host != null"><p>%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></p></div>
 		<header>
@@ -115,10 +115,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
-
-root(isDark)
-	$bg = isDark ? #22252f : #f7f7f7
+main
+	$bg = var(--face)
 
 	> .is-suspended
 	> .is-remote
@@ -148,7 +146,7 @@ root(isDark)
 
 		> .banner
 			padding-bottom 33.3%
-			background-color isDark ? #5f7273 : #cacaca
+			background-color rgba(0, 0, 0, 0.1)
 			background-size cover
 			background-position center
 
@@ -198,26 +196,26 @@ root(isDark)
 					margin 0
 					line-height 22px
 					font-size 20px
-					color isDark ? #fff : #757c82
+					color var(--mobileUserPageName)
 
 				> .username
 					display inline-block
 					line-height 20px
 					font-size 16px
 					font-weight bold
-					color isDark ? #657786 : #969ea5
+					color var(--mobileUserPageAcct)
 
 				> .followed
 					margin-left 8px
 					padding 2px 4px
 					font-size 12px
-					color isDark ? #657786 : #fff
-					background isDark ? #f8f8f8 : #a7bec7
+					color var(--mobileUserPageFollowedFg)
+					background var(--mobileUserPageFollowedBg)
 					border-radius 4px
 
 			> .description
 				margin 8px 0
-				color isDark ? #fff : #757c82
+				color var(--mobileUserPageDescription)
 
 			> .info
 				margin 8px 0
@@ -225,14 +223,14 @@ root(isDark)
 				> p
 					display inline
 					margin 0 16px 0 0
-					color isDark ? #a9b9c1 : #90989c
+					color var(--text)
 
 					> i
 						margin-right 4px
 
 			> .status
 				> a
-					color isDark ? #657786 : #818a92
+					color var(--text)
 
 					&:not(:last-child)
 						margin-right 16px
@@ -240,7 +238,7 @@ root(isDark)
 					> b
 						margin-right 4px
 						font-size 16px
-						color isDark ? #fff : #787e86
+						color var(--mobileUserPageStatusHighlight)
 
 					> i
 						font-size 14px
@@ -249,7 +247,7 @@ root(isDark)
 		position -webkit-sticky
 		position sticky
 		top 47px
-		box-shadow 0 4px 4px isDark ? rgba(#000, 0.3) : rgba(#000, 0.07)
+		box-shadow 0 4px 4px var(--mobileUserPageHeaderShadow)
 		background-color $bg
 		z-index 2
 
@@ -266,7 +264,7 @@ root(isDark)
 				line-height 48px
 				font-size 12px
 				text-decoration none
-				color isDark ? #657786 : #9ca1a5
+				color var(--text)
 				border-bottom solid 2px transparent
 
 				@media (min-width 400px)
@@ -275,8 +273,8 @@ root(isDark)
 
 				&[data-active]
 					font-weight bold
-					color $theme-color
-					border-color $theme-color
+					color var(--primary)
+					border-color var(--primary)
 
 	> .body
 		max-width 680px
@@ -289,10 +287,4 @@ root(isDark)
 		@media (min-width 600px)
 			padding 32px
 
-main[data-darkmode]
-	root(true)
-
-main:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/pages/user/home.vue b/src/client/app/mobile/views/pages/user/home.vue
index 4118afef19..2c7134ed43 100644
--- a/src/client/app/mobile/views/pages/user/home.vue
+++ b/src/client/app/mobile/views/pages/user/home.vue
@@ -54,7 +54,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.root.home
 	max-width 600px
 	margin 0 auto
 
@@ -65,7 +65,7 @@ root(isDark)
 			margin 0 0 16px 0
 
 	> section
-		background isDark ? #21242f : #eee
+		background var(--face)
 		border-radius 8px
 		box-shadow 0 4px 16px rgba(#000, 0.1)
 
@@ -80,8 +80,8 @@ root(isDark)
 			padding 8px 10px
 			font-size 15px
 			font-weight normal
-			color isDark ? #b8c5cc : #465258
-			background isDark ? #282c37 : #fff
+			color var(--text)
+			background var(--faceHeader)
 			border-radius 8px 8px 0 0
 
 			@media (min-width 500px)
@@ -98,12 +98,6 @@ root(isDark)
 		display block
 		margin 16px
 		text-align center
-		color isDark ? #cad2da : #929aa0
-
-.root.home[data-darkmode]
-	root(true)
-
-.root.home:not([data-darkmode])
-	root(false)
+		color var(--text)
 
 </style>
diff --git a/src/client/app/mobile/views/pages/welcome.vue b/src/client/app/mobile/views/pages/welcome.vue
index 82ccfeaff5..32f74bfe3a 100644
--- a/src/client/app/mobile/views/pages/welcome.vue
+++ b/src/client/app/mobile/views/pages/welcome.vue
@@ -3,7 +3,7 @@
 	<div class="banner" :style="{ backgroundImage: banner ? `url(${banner})` : null }"></div>
 
 	<div>
-		<img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" :alt="name">
+		<img svg-inline src="../../../../assets/title.svg" :alt="name">
 		<p class="host">{{ host }}</p>
 		<div class="about">
 			<h2>{{ name }}</h2>
@@ -122,9 +122,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.wgwfgvvimdjvhjfwxropcwksnzftjqes
 	text-align center
-	//background #fff
 
 	> .banner
 		position absolute
@@ -144,16 +143,17 @@ root(isDark)
 			left 0
 			width 100%
 			height 100px
-			background linear-gradient(transparent, isDark ? #191b22 : #f7f7f7)
+			background linear-gradient(transparent, var(--bg))
 
 	> div:not(.banner)
 		padding 32px
 		margin 0 auto
 		max-width 500px
 
-		> img
+		> svg
 			display block
-			max-width 200px
+			width 200px
+			height 50px
 			margin 0 auto
 
 		> .host
@@ -169,8 +169,8 @@ root(isDark)
 		> .about
 			margin-top 16px
 			padding 16px
-			color #555
-			background #fff
+			color var(--text)
+			background var(--face)
 			border-radius 6px
 
 			> h2
@@ -238,7 +238,7 @@ root(isDark)
 			margin 16px 0
 			padding 8px
 			font-size 14px
-			color #444
+			color var(--text)
 			background rgba(#000, 0.1)
 			border-radius 6px
 
@@ -249,9 +249,9 @@ root(isDark)
 			margin 16px 0
 
 			> article
-				background isDark ? rgba(30, 129, 216, 0.2) : rgba(155, 196, 232, 0.2)
+				background var(--mobileAnnouncement)
 				border-radius 6px
-				color isDark ? #fff : #3f4967
+				color var(--mobileAnnouncementFg)
 				padding 16px
 				margin 8px 0
 				font-size 12px
@@ -263,10 +263,10 @@ root(isDark)
 			margin 16px 0
 			padding 32px
 			font-size 14px
-			background #fff
+			background var(--face)
 			border-radius 6px
 			overflow hidden
-			color #3a3e46
+			color var(--text)
 
 			> h1
 				margin 0
@@ -279,12 +279,12 @@ root(isDark)
 
 			> section
 				> h2
-					border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
+					border-bottom 1px solid var(--faceDivider)
 
 				> section
 					margin-bottom 16px
 					padding-bottom 16px
-					border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
+					border-bottom 1px solid var(--faceDivider)
 
 					> h3
 						margin-bottom 8px
@@ -301,7 +301,7 @@ root(isDark)
 
 		> .info
 			padding 16px 0
-			border solid 2px #ddd
+			border solid 2px rgba(0, 0, 0, 0.1)
 			border-radius 8px
 
 			> *
@@ -309,17 +309,11 @@ root(isDark)
 
 		> footer
 			text-align center
-			color #444
+			color var(--text)
 
 			> small
 				display block
 				margin 16px 0 0 0
 				opacity 0.7
 
-.wgwfgvvimdjvhjfwxropcwksnzftjqes[data-darkmode]
-	root(true)
-
-.wgwfgvvimdjvhjfwxropcwksnzftjqes:not([data-darkmode])
-	root(false)
-
 </style>