wip

11 files changed, 13 insertions, 13 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