wip

44 files changed, 58 insertions, 54 deletions

diff --git a/src/client/app/common/views/components/autocomplete.vue b/src/client/app/common/views/components/autocomplete.vue
index 99a87520a4..bba6f4f7b2 100644
--- a/src/client/app/common/views/components/autocomplete.vue
+++ b/src/client/app/common/views/components/autocomplete.vue
@@ -267,7 +267,7 @@ root(isDark)
 	max-width 100%
 	margin-top calc(1em + 8px)
 	overflow hidden
-	background isDark ? #313543 : #fff
+	background var(--faceHeader)
 	border solid 1px rgba(#000, 0.1)
 	border-radius 4px
 	transition top 0.1s ease, left 0.1s ease
diff --git a/src/client/app/common/views/components/games/reversi/reversi.index.vue b/src/client/app/common/views/components/games/reversi/reversi.index.vue
index f6c7f0e3c2..44a1262636 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.index.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.index.vue
@@ -190,7 +190,7 @@ root(isDark)
 		margin 8px 0
 		padding 8px
 		color isDark ? #fff : #677f84
-		background isDark ? #282c37 : #fff
+		background var(--face)
 		box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
 		border-radius 6px
 		cursor pointer
@@ -222,7 +222,7 @@ root(isDark)
 		margin 8px 0
 		padding 8px
 		color isDark ? #fff : #677f84
-		background isDark ? #282c37 : #fff
+		background var(--face)
 		box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
 		border-radius 6px
 		cursor pointer
diff --git a/src/client/app/common/views/components/games/reversi/reversi.room.vue b/src/client/app/common/views/components/games/reversi/reversi.room.vue
index d4b91ae7a7..072f3eda12 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.room.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.room.vue
@@ -273,7 +273,7 @@ root(isDark)
 					> select
 						width 100%
 						padding 12px 14px
-						background isDark ? #282C37 : #fff
+						background var(--face)
 						border 1px solid isDark ? #6a707d : #dcdfe6
 						border-radius 4px
 						color isDark ? #fff : #606266
@@ -331,7 +331,7 @@ root(isDark)
 		.card
 			max-width 400px
 			border-radius 4px
-			background isDark ? #282C37 : #fff
+			background var(--face)
 			color isDark ? #fff : #303133
 			box-shadow 0 2px 12px 0 rgba(#000, isDark ? 0.7 : 0.1)
 
diff --git a/src/client/app/common/views/components/messaging-room.vue b/src/client/app/common/views/components/messaging-room.vue
index 5bdf8b9034..52abfa4e1d 100644
--- a/src/client/app/common/views/components/messaging-room.vue
+++ b/src/client/app/common/views/components/messaging-room.vue
@@ -369,7 +369,7 @@ root(isDark)
 		max-width 600px
 		margin 0 auto
 		padding 0
-		background rgba(isDark ? #282c37 : #fff, 0.95)
+		//background rgba(var(--face), 0.95)
 		background-clip content-box
 
 		> .new-message
diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue
index 7181ddd01c..a984c980b1 100644
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@@ -329,7 +329,7 @@ root(isDark)
 		> a
 			display block
 			text-decoration none
-			background isDark ? #282c37 : #fff
+			background var(--face)
 			border-bottom solid 1px isDark ? #1c2023 : #eee
 
 			*
diff --git a/src/client/app/common/views/components/ui/card.vue b/src/client/app/common/views/components/ui/card.vue
index a9e0493810..be24027f6c 100644
--- a/src/client/app/common/views/components/ui/card.vue
+++ b/src/client/app/common/views/components/ui/card.vue
@@ -25,7 +25,7 @@ export default Vue.extend({
 root(isDark)
 	margin 16px
 	color isDark ? #fff : #000
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	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)
 
 	> header
diff --git a/src/client/app/common/views/components/welcome-timeline.vue b/src/client/app/common/views/components/welcome-timeline.vue
index 965ec78559..938ab602f0 100644
--- a/src/client/app/common/views/components/welcome-timeline.vue
+++ b/src/client/app/common/views/components/welcome-timeline.vue
@@ -91,7 +91,7 @@ export default Vue.extend({
 	transform translateY(-30px)
 
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 
 	> div
 		> *
diff --git a/src/client/app/common/views/pages/follow.vue b/src/client/app/common/views/pages/follow.vue
index d81e4c0820..5e2d448d8b 100644
--- a/src/client/app/common/views/pages/follow.vue
+++ b/src/client/app/common/views/pages/follow.vue
@@ -116,7 +116,7 @@ root(isDark)
 	text-align center
 	color isDark ? #9baec8 : #868c8c
 
-	$bg = isDark ? #282C37 : #fff
+	$bg = var(--face)
 
 	@media (max-width 400px)
 		padding 16px
diff --git a/src/client/app/common/views/widgets/donation.vue b/src/client/app/common/views/widgets/donation.vue
index 544ca1bd9d..a91aa8e749 100644
--- a/src/client/app/common/views/widgets/donation.vue
+++ b/src/client/app/common/views/widgets/donation.vue
@@ -31,7 +31,7 @@ export default define({
 
 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282c37 : #fff
+	background var(--face)
 	border solid 1px isDark ? #c3831c : #ead8bb
 	border-radius 6px
 
diff --git a/src/client/app/common/views/widgets/memo.vue b/src/client/app/common/views/widgets/memo.vue
index 079522d39b..42df683883 100644
--- a/src/client/app/common/views/widgets/memo.vue
+++ b/src/client/app/common/views/widgets/memo.vue
@@ -70,7 +70,7 @@ root(isDark)
 			min-width 100%
 			padding 16px
 			color isDark ? #fff : #222
-			background isDark ? #282c37 : #fff
+			background var(--face)
 			border none
 			border-bottom solid 1px isDark ? #1c2023 : #eee
 			border-radius 0
diff --git a/src/client/app/common/views/widgets/nav.vue b/src/client/app/common/views/widgets/nav.vue
index 0cbf7c158e..04dfe97c72 100644
--- a/src/client/app/common/views/widgets/nav.vue
+++ b/src/client/app/common/views/widgets/nav.vue
@@ -21,7 +21,7 @@ root(isDark)
 		padding 16px
 		font-size 12px
 		color isDark ? #9aa4b3 : #aaa
-		background isDark ? #282c37 : #fff
+		background var(--face)
 
 		a
 			color isDark ? #9aa4b3 : #999
diff --git a/src/client/app/desktop/views/components/calendar.vue b/src/client/app/desktop/views/components/calendar.vue
index 2414ced0c9..cd73ab350b 100644
--- a/src/client/app/desktop/views/components/calendar.vue
+++ b/src/client/app/desktop/views/components/calendar.vue
@@ -132,7 +132,7 @@ export default Vue.extend({
 
 root(isDark)
 	color isDark ? #c5ced6 : #777
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 	overflow hidden
diff --git a/src/client/app/desktop/views/components/context-menu.vue b/src/client/app/desktop/views/components/context-menu.vue
index 49aeac143f..170dcf55a1 100644
--- a/src/client/app/desktop/views/components/context-menu.vue
+++ b/src/client/app/desktop/views/components/context-menu.vue
@@ -82,7 +82,7 @@ root(isDark)
 	z-index 4096
 	width $width
 	font-size 0.8em
-	background isDark ? #282c37 : #fff
+	background var(--face)
 	border-radius 0 4px 4px 4px
 	box-shadow 2px 2px 8px rgba(#000, 0.2)
 	opacity 0
diff --git a/src/client/app/desktop/views/components/drive.vue b/src/client/app/desktop/views/components/drive.vue
index ccfdb3159f..a1748963aa 100644
--- a/src/client/app/desktop/views/components/drive.vue
+++ b/src/client/app/desktop/views/components/drive.vue
@@ -596,7 +596,7 @@ root(isDark)
 		overflow auto
 		font-size 0.9em
 		color isDark ? #d2d9dc : #555
-		background isDark ? #282c37 : #fff
+		background var(--face)
 		box-shadow 0 1px 0 rgba(#000, 0.05)
 
 		&, *
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index f004ca88ee..35eb6ac45d 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -230,7 +230,7 @@ export default Vue.extend({
 root(isDark)
 	overflow hidden
 	text-align left
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index a91212221b..13a8641170 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -322,7 +322,7 @@ export default Vue.extend({
 root(isDark)
 	margin 0
 	padding 0
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	border-bottom solid 1px isDark ? #1c2023 : #eaeaea
 
 	&[data-round]
diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index 2e3ffd171b..0bd45b1c21 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -260,7 +260,7 @@ root(isDark)
 			width 100%
 			text-align center
 			color #ccc
-			background isDark ? #282C37 : #fff
+			background var(--face)
 			border-top solid 1px isDark ? #1c2023 : #eaeaea
 			border-bottom-left-radius 6px
 			border-bottom-right-radius 6px
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index 32ed89ef0b..7800eae52d 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -178,7 +178,7 @@ export default Vue.extend({
 
 
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 	overflow hidden
@@ -186,7 +186,7 @@ root(isDark)
 	> header
 		padding 0 8px
 		z-index 10
-		background isDark ? #313543 : #fff
+		background var(--faceHeader)
 		box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
 
 		> .buttons
diff --git a/src/client/app/desktop/views/components/ui-notification.vue b/src/client/app/desktop/views/components/ui-notification.vue
index 7519124870..883a880e5d 100644
--- a/src/client/app/desktop/views/components/ui-notification.vue
+++ b/src/client/app/desktop/views/components/ui-notification.vue
@@ -47,7 +47,7 @@ root(isDark)
 	padding 128px 0 0 0
 	width 500px
 	color rgba(isDark ? #fff : #000, 0.6)
-	background rgba(isDark ? #282C37 : #fff, 0.9)
+	//background rgba(var(--face), 0.9)
 	border-radius 0 0 8px 8px
 	box-shadow 0 2px 4px rgba(#000, isDark ? 0.4 : 0.2)
 	transform translateY(-64px)
diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index 301efeb3e2..c728fa42be 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -177,7 +177,7 @@ root(isDark)
 			transition filter 100ms ease
 
 	> .menu
-		$bgcolor = isDark ? #282c37 : #fff
+		$bgcolor = var(--face)
 		display block
 		position absolute
 		top 56px
diff --git a/src/client/app/desktop/views/components/ui.header.notifications.vue b/src/client/app/desktop/views/components/ui.header.notifications.vue
index f9b68fa0e9..2a38655f3a 100644
--- a/src/client/app/desktop/views/components/ui.header.notifications.vue
+++ b/src/client/app/desktop/views/components/ui.header.notifications.vue
@@ -96,7 +96,7 @@ root(isDark)
 			color var(--primary)
 
 	> .pop
-		$bgcolor = isDark ? #282c37 : #fff
+		$bgcolor = var(--face)
 		display block
 		position absolute
 		top 56px
diff --git a/src/client/app/desktop/views/components/user-preview.vue b/src/client/app/desktop/views/components/user-preview.vue
index f988bb21e9..01b6cdbdc5 100644
--- a/src/client/app/desktop/views/components/user-preview.vue
+++ b/src/client/app/desktop/views/components/user-preview.vue
@@ -90,7 +90,7 @@ root(isDark)
 	z-index 2048
 	margin-top -8px
 	width 250px
-	background isDark ? #282c37 : #fff
+	background var(--face)
 	background-clip content-box
 	border solid 1px rgba(#000, 0.1)
 	border-radius 4px
@@ -111,7 +111,7 @@ root(isDark)
 		z-index 2
 		width 58px
 		height 58px
-		border solid 3px isDark ? #282c37 : #fff
+		border solid 3px var(--face)
 		border-radius 8px
 
 	> .title
diff --git a/src/client/app/desktop/views/components/widget-container.vue b/src/client/app/desktop/views/components/widget-container.vue
index fbf7691cd3..d17b9c91d8 100644
--- a/src/client/app/desktop/views/components/widget-container.vue
+++ b/src/client/app/desktop/views/components/widget-container.vue
@@ -35,7 +35,7 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 	overflow hidden
@@ -45,7 +45,7 @@ root(isDark)
 		box-shadow none !important
 
 	> header
-		background isDark ? #313543 : #fff
+		background var(--faceHeader)
 
 		> .title
 			z-index 1
diff --git a/src/client/app/desktop/views/components/window.vue b/src/client/app/desktop/views/components/window.vue
index 2b01c24ca8..15aa158073 100644
--- a/src/client/app/desktop/views/components/window.vue
+++ b/src/client/app/desktop/views/components/window.vue
@@ -562,7 +562,7 @@ root(isDark)
 		> .body
 			height 100%
 			overflow hidden
-			background isDark ? #282C37 : #fff
+			background var(--face)
 			border-radius 6px
 
 			if isDark
@@ -578,7 +578,7 @@ root(isDark)
 				overflow hidden
 				white-space nowrap
 				cursor move
-				background isDark ? #313543 : #fff
+				background var(--faceHeader)
 				border-radius 6px 6px 0 0
 				box-shadow 0 1px 0 rgba(#000, 0.1)
 
diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue
index 10454b1cc6..1cf8900ee5 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -277,7 +277,7 @@ root(isDark)
 	width 330px
 	min-width 330px
 	height 100%
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	border-radius 6px
 	//box-shadow 0 2px 16px rgba(#000, 0.1)
 	overflow hidden
@@ -318,7 +318,7 @@ root(isDark)
 		padding 0 16px
 		font-size 14px
 		color isDark ? #e3e5e8 : #888
-		background isDark ? #313543 : #fff
+		background var(--faceHeader)
 		box-shadow 0 1px rgba(#000, 0.15)
 		cursor pointer
 
diff --git a/src/client/app/desktop/views/pages/deck/deck.notes.vue b/src/client/app/desktop/views/pages/deck/deck.notes.vue
index 58f13dd57b..1217e0d4da 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notes.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notes.vue
@@ -232,7 +232,7 @@ root(isDark)
 			width 100%
 			text-align center
 			color #ccc
-			background isDark ? #282C37 : #fff
+			background var(--face)
 			border-top solid 1px isDark ? #1c2023 : #eaeaea
 			border-bottom-left-radius 6px
 			border-bottom-right-radius 6px
diff --git a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
index 0965d801c9..212e21a7a9 100644
--- a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
+++ b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
@@ -37,7 +37,7 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 
diff --git a/src/client/app/desktop/views/pages/user/user.friends.vue b/src/client/app/desktop/views/pages/user/user.friends.vue
index de37dc95c9..0a329b3d8e 100644
--- a/src/client/app/desktop/views/pages/user/user.friends.vue
+++ b/src/client/app/desktop/views/pages/user/user.friends.vue
@@ -41,7 +41,7 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 	overflow hidden
diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue
index 30dc74212d..ec46e955b5 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -103,7 +103,7 @@ export default Vue.extend({
 
 
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 	overflow hidden
diff --git a/src/client/app/desktop/views/pages/user/user.photos.vue b/src/client/app/desktop/views/pages/user/user.photos.vue
index 591edfd829..99e064446d 100644
--- a/src/client/app/desktop/views/pages/user/user.photos.vue
+++ b/src/client/app/desktop/views/pages/user/user.photos.vue
@@ -40,7 +40,7 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 	overflow hidden
diff --git a/src/client/app/desktop/views/pages/user/user.profile.vue b/src/client/app/desktop/views/pages/user/user.profile.vue
index 1ea242270a..e5ea8d1cc9 100644
--- a/src/client/app/desktop/views/pages/user/user.profile.vue
+++ b/src/client/app/desktop/views/pages/user/user.profile.vue
@@ -86,7 +86,7 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 
diff --git a/src/client/app/desktop/views/pages/user/user.timeline.vue b/src/client/app/desktop/views/pages/user/user.timeline.vue
index 3cde6cc10c..fe3ca9154b 100644
--- a/src/client/app/desktop/views/pages/user/user.timeline.vue
+++ b/src/client/app/desktop/views/pages/user/user.timeline.vue
@@ -115,14 +115,14 @@ export default Vue.extend({
 
 
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	border-radius var(--round)
 	overflow hidden
 
 	> header
 		padding 0 8px
 		z-index 10
-		background isDark ? #313543 : #fff
+		background var(--faceHeader)
 		box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
 
 		> span
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 05c32a7bd1..405fcb76d0 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -355,7 +355,7 @@ root(isDark)
 
 		.block
 			color isDark ? #fff : #444
-			background isDark ? #282C37 : #fff
+			background var(--face)
 			box-shadow var(--shadow)
 			//border-radius 8px
 			overflow auto
@@ -364,7 +364,7 @@ root(isDark)
 				z-index 1
 				padding 0 16px
 				line-height 48px
-				background isDark ? #313543 : #fff
+				background var(--faceHeader)
 
 				if !isDark
 					box-shadow 0 1px 0px rgba(0, 0, 0, 0.1)
diff --git a/src/client/app/desktop/views/widgets/profile.vue b/src/client/app/desktop/views/widgets/profile.vue
index 04ef18c8e3..aea0c90e34 100644
--- a/src/client/app/desktop/views/widgets/profile.vue
+++ b/src/client/app/desktop/views/widgets/profile.vue
@@ -100,7 +100,7 @@ root(isDark)
 		left 16px
 		width 58px
 		height 58px
-		border solid 3px isDark ? #282c37 : #fff
+		border solid 3px var(--face)
 		border-radius 8px
 		cursor pointer
 
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..6d3fc2343a 100644
--- a/src/client/app/mobile/views/components/drive-file-chooser.vue
+++ b/src/client/app/mobile/views/components/drive-file-chooser.vue
@@ -59,7 +59,7 @@ root(isDark)
 	> .body
 		width 100%
 		height 100%
-		background isDark ? #282c37 : #fff
+		background var(--face)
 
 		> header
 			border-bottom solid 1px isDark ? #1b1f29 : #eee
diff --git a/src/client/app/mobile/views/components/drive.vue b/src/client/app/mobile/views/components/drive.vue
index 36a6ea2f40..76d6c2737d 100644
--- a/src/client/app/mobile/views/components/drive.vue
+++ b/src/client/app/mobile/views/components/drive.vue
@@ -474,7 +474,7 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282c37 : #fff
+	background var(--face)
 
 	> nav
 		display block
@@ -490,7 +490,7 @@ root(isDark)
 		color rgba(isDark ? #fff : #000, 0.67)
 		-webkit-backdrop-filter blur(12px)
 		backdrop-filter blur(12px)
-		background-color rgba(isDark ? #313543 : #fff, 0.75)
+		//background-color rgba(var(--faceHeader), 0.75)
 		border-bottom solid 1px rgba(#000, 0.13)
 
 		> p
diff --git a/src/client/app/mobile/views/components/note-card.vue b/src/client/app/mobile/views/components/note-card.vue
index e8427798cd..e30e6c1c8f 100644
--- a/src/client/app/mobile/views/components/note-card.vue
+++ b/src/client/app/mobile/views/components/note-card.vue
@@ -32,7 +32,7 @@ root(isDark)
 	width 150px
 	//height 120px
 	font-size 12px
-	background isDark ? #282c37 : #fff
+	background var(--face)
 	border-radius 4px
 
 	> a
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 6daf375ed2..f0a91e82d4 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -229,7 +229,7 @@ root(isDark)
 	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)
 
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index 83674a33dc..539141954b 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -221,7 +221,7 @@ export default Vue.extend({
 
 root(isDark)
 	overflow hidden
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	border-radius 8px
 	box-shadow 0 0 2px rgba(#000, 0.1)
 
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 742163696e..6ada5e60ee 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -342,7 +342,7 @@ 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)
 
diff --git a/src/client/app/mobile/views/components/widget-container.vue b/src/client/app/mobile/views/components/widget-container.vue
index a713a10621..bf7adf5fcb 100644
--- a/src/client/app/mobile/views/components/widget-container.vue
+++ b/src/client/app/mobile/views/components/widget-container.vue
@@ -45,7 +45,7 @@ root(isDark)
 			font-size 15px
 			font-weight normal
 			color isDark ? #b8c5cc : #465258
-			background isDark ? #282c37 : #fff
+			background var(--face)
 			border-radius 8px 8px 0 0
 
 			> [data-fa]
diff --git a/src/client/app/mobile/views/pages/user/home.vue b/src/client/app/mobile/views/pages/user/home.vue
index 4118afef19..d19ccfd522 100644
--- a/src/client/app/mobile/views/pages/user/home.vue
+++ b/src/client/app/mobile/views/pages/user/home.vue
@@ -81,7 +81,7 @@ root(isDark)
 			font-size 15px
 			font-weight normal
 			color isDark ? #b8c5cc : #465258
-			background isDark ? #282c37 : #fff
+			background var(--face)
 			border-radius 8px 8px 0 0
 
 			@media (min-width 500px)
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index ffe0ffa3ce..fca316c5bc 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -7,5 +7,7 @@
 	"bg": "#191B22",
 	"scrollbarTrack": "#282C37",
 	"scrollbarHandle": "#454954",
-	"scrollbarHandleHover": "#535660"
+	"scrollbarHandleHover": "#535660",
+	"face": "#282c37",
+	"faceHeader": "#313543"
 }
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index f4d061e5ce..b091d87389 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -7,5 +7,7 @@
 	"bg": "#f7f7f7",
 	"scrollbarTrack": "#fff",
 	"scrollbarHandle": "#00000033",
-	"scrollbarHandleHover": "#00000066"
+	"scrollbarHandleHover": "#00000066",
+	"face": "#fff",
+	"faceHeader": "#fff"
 }