wip

45 files changed, 200 insertions, 461 deletions

diff --git a/src/client/app/common/views/components/games/reversi/reversi.game.vue b/src/client/app/common/views/components/games/reversi/reversi.game.vue
index bc230496a6..751abe2ecd 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.game.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.game.vue
@@ -304,9 +304,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.xqnhankfuuilcwvhgsopeqncafzsquya
 	text-align center
 
 	> .go-index
@@ -319,7 +317,7 @@ root(isDark)
 
 	> header
 		padding 8px
-		border-bottom dashed 1px isDark ? #4c5761 : #c4cdd4
+		border-bottom dashed 1px var(--reversiGameHeaderLine)
 
 		a
 			color inherit
@@ -386,16 +384,16 @@ root(isDark)
 						user-select none
 
 					&.empty
-						border solid 2px isDark ? #51595f : #eee
+						border solid 2px var(--reversiGameEmptyCell)
 
 					&.empty.can
-						background isDark ? #51595f : #eee
+						background var(--reversiGameEmptyCell)
 
 					&.empty.myTurn
-						border-color isDark ? #6a767f : #ddd
+						border-color var(--reversiGameEmptyCellMyTurn)
 
 						&.can
-							background isDark ? #51595f : #eee
+							background var(--reversiGameEmptyCellCanPut)
 							cursor pointer
 
 							&:hover
@@ -409,7 +407,7 @@ root(isDark)
 						box-shadow 0 0 0 4px var(--primaryAlpha07)
 
 					&.isEnded
-						border-color isDark ? #6a767f : #ddd
+						border-color var(--reversiGameEmptyCellMyTurn)
 
 					&.none
 						border-color transparent !important
@@ -458,10 +456,4 @@ root(isDark)
 			margin 0 8px
 			min-width 70px
 
-.xqnhankfuuilcwvhgsopeqncafzsquya[data-darkmode]
-	root(true)
-
-.xqnhankfuuilcwvhgsopeqncafzsquya:not([data-darkmode])
-	root(false)
-
 </style>
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 44a1262636..3725aa6cb4 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
@@ -138,9 +138,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.phgnkghfpyvkrvwiajkiuoxyrdaqpzcx
 	> h1
 		margin 0
 		padding 24px
@@ -148,7 +146,7 @@ root(isDark)
 		text-align center
 		font-weight normal
 		color #fff
-		background linear-gradient(to bottom, isDark ? #45730e : #8bca3e, isDark ? #464300 : #d6cf31)
+		background linear-gradient(to bottom, var(--reversiBannerGradientStart), var(--reversiBannerGradientEnd))
 
 		& + p
 			margin 0
@@ -156,7 +154,7 @@ root(isDark)
 			margin-bottom 12px
 			text-align center
 			font-size 14px
-			border-bottom solid 1px isDark ? #535f65 : #d3d9dc
+			border-bottom solid 1px var(--faceDivider)
 
 	> .play
 		margin 0 auto
@@ -171,14 +169,14 @@ root(isDark)
 				padding 16px
 				font-size 14px
 				text-align left
-				background isDark ? #282c37 : #f5f5f5
+				background var(--reversiDescBg)
 				border-radius 8px
 
 	> section
 		margin 0 auto
 		padding 0 16px 16px 16px
 		max-width 500px
-		border-top solid 1px isDark ? #535f65 : #d3d9dc
+		border-top solid 1px var(--faceDivider)
 
 		> h2
 			margin 0
@@ -189,9 +187,9 @@ root(isDark)
 	.invitation
 		margin 8px 0
 		padding 8px
-		color isDark ? #fff : #677f84
+		color var(--text)
 		background var(--face)
-		box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
+		box-shadow 0 2px 16px var(--reversiListItemShadow)
 		border-radius 6px
 		cursor pointer
 
@@ -203,10 +201,10 @@ root(isDark)
 			border-color var(--primary)
 
 		&:hover
-			background isDark ? #313543 : #f5f5f5
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
 
 		&:active
-			background isDark ? #1e222b : #eee
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
 
 		> .avatar
 			width 32px
@@ -221,9 +219,9 @@ root(isDark)
 		display block
 		margin 8px 0
 		padding 8px
-		color isDark ? #fff : #677f84
+		color var(--text)
 		background var(--face)
-		box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
+		box-shadow 0 2px 16px var(--reversiListItemShadow)
 		border-radius 6px
 		cursor pointer
 
@@ -232,10 +230,10 @@ root(isDark)
 			user-select none
 
 		&:hover
-			background isDark ? #313543 : #f5f5f5
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
 
 		&:active
-			background isDark ? #1e222b : #eee
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
 
 		> .avatar
 			width 32px
@@ -246,10 +244,4 @@ root(isDark)
 			margin 0 8px
 			line-height 32px
 
-.phgnkghfpyvkrvwiajkiuoxyrdaqpzcx[data-darkmode]
-	root(true)
-
-.phgnkghfpyvkrvwiajkiuoxyrdaqpzcx:not([data-darkmode])
-	root(false)
-
 </style>
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 b407046ba9..236141ee28 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
@@ -252,11 +252,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.urbixznjwwuukfsckrwzwsqzsxornqij
 	text-align center
-	background isDark ? #191b22 : #f9f9f9
+	background var(--bg)
 
 	> header
 		padding 8px
@@ -274,9 +272,9 @@ root(isDark)
 						width 100%
 						padding 12px 14px
 						background var(--face)
-						border 1px solid isDark ? #6a707d : #dcdfe6
+						border 1px solid var(--reversiMapSelectBorder)
 						border-radius 4px
-						color isDark ? #fff : #606266
+						color var(--text)
 						cursor pointer
 						transition border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)
 						-webkit-appearance none
@@ -284,7 +282,7 @@ root(isDark)
 						appearance none
 
 						&:hover
-							border-color isDark ? #a7aebd : #c0c4cc
+							border-color var(--reversiMapSelectHoverBorder)
 
 						&:focus
 						&:active
@@ -294,7 +292,8 @@ root(isDark)
 					> .random
 						padding 32px 0
 						font-size 64px
-						color isDark ? #4e5961 : #d8d8d8
+						color var(--text)
+						opacity 0.7
 
 					> .board
 						display grid
@@ -302,11 +301,11 @@ root(isDark)
 						width 300px
 						height 300px
 						margin 0 auto
-						color isDark ? #fff : #444
+						color var(--text)
 
 						> div
 							background transparent
-							border solid 2px isDark ? #6a767f : #ddd
+							border solid 2px var(--faceDivider)
 							border-radius 6px
 							overflow hidden
 							cursor pointer
@@ -332,31 +331,25 @@ root(isDark)
 			max-width 400px
 			border-radius 4px
 			background var(--face)
-			color isDark ? #fff : #303133
-			box-shadow 0 2px 12px 0 rgba(#000, isDark ? 0.7 : 0.1)
+			color var(--text)
+			box-shadow 0 2px 12px 0 var(--reversiRoomFormShadow)
 
 			> header
 				padding 18px 20px
-				border-bottom 1px solid isDark ? #1c2023 : #ebeef5
+				border-bottom 1px solid var(--faceDivider)
 
 			> div
 				padding 20px
-				color isDark ? #fff : #606266
+				color var(--text)
 
 	> footer
 		position sticky
 		bottom 0
 		padding 16px
-		background rgba(isDark ? #191b22 : #fff, 0.9)
-		border-top solid 1px isDark ? #606266 : #c4cdd4
+		background var(--reversiRoomFooterBg)
+		border-top solid 1px var(--faceDivider)
 
 		> .status
 			margin 0 0 16px 0
 
-.urbixznjwwuukfsckrwzwsqzsxornqij[data-darkmode]
-	root(true)
-
-.urbixznjwwuukfsckrwzwsqzsxornqij:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/games/reversi/reversi.vue b/src/client/app/common/views/components/games/reversi/reversi.vue
index 75d7d574c1..6eb9511ce9 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.vue
@@ -156,11 +156,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
-	color isDark ? #fff : #677f84
-	background isDark ? #191b22 : #fff
+.vchtoekanapleubgzioubdtmlkribzfd
+	color var(--text)
+	background var(--bg)
 
 	> .matching
 		> h1
@@ -177,10 +175,4 @@ root(isDark)
 			text-align center
 			border-top dashed 1px #c4cdd4
 
-.vchtoekanapleubgzioubdtmlkribzfd[data-darkmode]
-	root(true)
-
-.vchtoekanapleubgzioubdtmlkribzfd:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/messaging-room.form.vue b/src/client/app/common/views/components/messaging-room.form.vue
index 8e62587c20..c93fd7f78d 100644
--- a/src/client/app/common/views/components/messaging-room.form.vue
+++ b/src/client/app/common/views/components/messaging-room.form.vue
@@ -195,9 +195,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-messaging-form
 	> textarea
 		cursor auto
 		display block
@@ -212,7 +210,7 @@ root(isDark)
 		color var(--inputText)
 		outline none
 		border none
-		border-top solid 1px isDark ? #4b5056 : #eee
+		border-top solid 1px var(--faceDivider)
 		border-radius 0
 		box-shadow none
 		background transparent
@@ -302,10 +300,4 @@ root(isDark)
 	input[type=file]
 		display none
 
-.mk-messaging-form[data-darkmode]
-	root(true)
-
-.mk-messaging-form:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/poll.vue b/src/client/app/common/views/components/poll.vue
index 0e60932796..0dc2622f9b 100644
--- a/src/client/app/common/views/components/poll.vue
+++ b/src/client/app/common/views/components/poll.vue
@@ -67,10 +67,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
-
+.mk-poll
 	> ul
 		display block
 		margin 0
@@ -82,8 +79,8 @@ root(isDark)
 			margin 4px 0
 			padding 4px 8px
 			width 100%
-			color isDark ? #fff : #000
-			border solid 1px isDark ? #5e636f : #eee
+			color var(--pollChoiceText)
+			border solid 1px var(--pollChoiceBorder)
 			border-radius 4px
 			overflow hidden
 			cursor pointer
@@ -110,7 +107,7 @@ root(isDark)
 					margin-left 4px
 
 	> p
-		color isDark ? #a3aebf : #000
+		color var(--text)
 
 		a
 			color inherit
@@ -125,10 +122,4 @@ root(isDark)
 			&:active
 				background transparent
 
-.mk-poll[data-darkmode]
-	root(true)
-
-.mk-poll:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/tag-cloud.vue b/src/client/app/common/views/components/tag-cloud.vue
index 5f2cc5276a..5cc828082f 100644
--- a/src/client/app/common/views/components/tag-cloud.vue
+++ b/src/client/app/common/views/components/tag-cloud.vue
@@ -63,7 +63,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.jtivnzhfwquxpsfidertopbmwmchmnmo
 	height 100%
 	width 100%
 
@@ -81,10 +81,4 @@ root(isDark)
 		height 100%
 		width 100%
 
-.jtivnzhfwquxpsfidertopbmwmchmnmo[data-darkmode]
-	root(true)
-
-.jtivnzhfwquxpsfidertopbmwmchmnmo:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/trends.vue b/src/client/app/common/views/components/trends.vue
index 0042dbe853..3d36d7449c 100644
--- a/src/client/app/common/views/components/trends.vue
+++ b/src/client/app/common/views/components/trends.vue
@@ -49,13 +49,14 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.csqvmxybqbycalfhkxvyfrgbrdalkaoc
 	> .fetching
 	> .empty
 		margin 0
 		padding 16px
 		text-align center
-		color #aaa
+		color var(--text)
+		opacity 0.7
 
 		> [data-fa]
 			margin-right 4px
@@ -70,13 +71,13 @@ root(isDark)
 			padding 14px 16px
 
 			&:not(:last-child)
-				border-bottom solid 1px isDark ? #393f4f : #eee
+				border-bottom solid 1px var(--faceDivider)
 
 			> .tag
 				flex 1
 				overflow hidden
 				font-size 14px
-				color isDark ? #9baec8 : #65727b
+				color var(--text)
 
 				> a
 					display block
@@ -94,10 +95,4 @@ root(isDark)
 			> .chart
 				height 30px
 
-.csqvmxybqbycalfhkxvyfrgbrdalkaoc[data-darkmode]
-	root(true)
-
-.csqvmxybqbycalfhkxvyfrgbrdalkaoc:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/ui/button.vue b/src/client/app/common/views/components/ui/button.vue
index c411f0f5c9..4934a1bdfa 100644
--- a/src/client/app/common/views/components/ui/button.vue
+++ b/src/client/app/common/views/components/ui/button.vue
@@ -32,7 +32,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark, fill)
+root(fill)
 	> button
 		display block
 		width 100%
@@ -65,16 +65,10 @@ root(isDark, fill)
 			&:active
 				background var(--primaryAlpha03)
 
-.ui-button[data-darkmode]
+.ui-button
 	&.fill
-		root(true, true)
+		root(true)
 	&:not(.fill)
-		root(true, false)
-
-.ui-button:not([data-darkmode])
-	&.fill
-		root(false, true)
-	&:not(.fill)
-		root(false, false)
+		root(false)
 
 </style>
diff --git a/src/client/app/common/views/components/ui/form/button.vue b/src/client/app/common/views/components/ui/form/button.vue
index bccf36e52f..3fd7b47629 100644
--- a/src/client/app/common/views/components/ui/form/button.vue
+++ b/src/client/app/common/views/components/ui/form/button.vue
@@ -25,9 +25,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.nvemkhtwcnnpkdrwfcbzuwhfulejhmzg
 	display inline-block
 
 	& + .nvemkhtwcnnpkdrwfcbzuwhfulejhmzg
@@ -38,11 +36,11 @@ root(isDark)
 		margin 0
 		padding 12px 20px
 		font-size 14px
-		border 1px solid isDark ? #6d727d : #dcdfe6
+		border 1px solid var(--formButtonBorder)
 		border-radius 4px
 		outline none
 		box-shadow none
-		color isDark ? #fff : #606266
+		color var(--text)
 		transition 0.1s
 
 		*
@@ -51,12 +49,12 @@ root(isDark)
 		&:hover
 		&:focus
 			color var(--primary)
-			//background rgba(var(--primary-r), var(--primary-g), var(--primary-b), isDark ? 0.2 : 0.12)
-			//border-color rgba(var(--primary-r), var(--primary-g), var(--primary-b), isDark ? 0.5 : 0.3)
+			background var(--formButtonHoverBg)
+			border-color var(--formButtonHoverBorder)
 
 		&:active
 			color var(--primaryDarken20)
-			//background rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.12)
+			background var(--formButtonActiveBg)
 			border-color var(--primary)
 			transition all 0s
 
@@ -80,10 +78,4 @@ root(isDark)
 		> button
 			border-radius 64px
 
-.nvemkhtwcnnpkdrwfcbzuwhfulejhmzg[data-darkmode]
-	root(true)
-
-.nvemkhtwcnnpkdrwfcbzuwhfulejhmzg:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/ui/form/radio.vue b/src/client/app/common/views/components/ui/form/radio.vue
index 5728a8171b..396b2997e5 100644
--- a/src/client/app/common/views/components/ui/form/radio.vue
+++ b/src/client/app/common/views/components/ui/form/radio.vue
@@ -49,9 +49,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.uywduthvrdnlpsvsjkqigicixgyfctto
 	display inline-flex
 	margin 0 16px 0 0
 	cursor pointer
@@ -93,7 +91,7 @@ root(isDark)
 		width 20px
 		height 20px
 		background none
-		border solid 2px isDark ? rgba(#fff, 0.6) : rgba(#000, 0.4)
+		border solid 2px var(--radioBorder)
 		border-radius 100%
 		transition inherit
 
@@ -117,10 +115,4 @@ root(isDark)
 		line-height 20px
 		cursor pointer
 
-.uywduthvrdnlpsvsjkqigicixgyfctto[data-darkmode]
-	root(true)
-
-.uywduthvrdnlpsvsjkqigicixgyfctto:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue
index d7b83d81cd..d7e72409f0 100644
--- a/src/client/app/common/views/components/ui/input.vue
+++ b/src/client/app/common/views/components/ui/input.vue
@@ -155,9 +155,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark, fill)
+root(fill)
 	margin 32px 0
 
 	> .icon
@@ -335,16 +333,10 @@ root(isDark, fill)
 				left 0 !important
 				transform scale(0.75)
 
-.ui-input[data-darkmode]
-	&.fill
-		root(true, true)
-	&:not(.fill)
-		root(true, false)
-
-.ui-input:not([data-darkmode])
+.ui-input
 	&.fill
-		root(false, true)
+		root(true)
 	&:not(.fill)
-		root(false, false)
+		root(false)
 
 </style>
diff --git a/src/client/app/common/views/components/ui/radio.vue b/src/client/app/common/views/components/ui/radio.vue
index 3a4407abc0..868a339aa4 100644
--- a/src/client/app/common/views/components/ui/radio.vue
+++ b/src/client/app/common/views/components/ui/radio.vue
@@ -51,9 +51,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.ui-radio
 	display inline-block
 	margin 0 32px 0 0
 	cursor pointer
@@ -111,10 +109,4 @@ root(isDark)
 		line-height 20px
 		cursor pointer
 
-.ui-radio[data-darkmode]
-	root(true)
-
-.ui-radio:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/ui/select.vue b/src/client/app/common/views/components/ui/select.vue
index bdb730fea9..8c1b8c0269 100644
--- a/src/client/app/common/views/components/ui/select.vue
+++ b/src/client/app/common/views/components/ui/select.vue
@@ -70,9 +70,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark, fill)
+root(fill)
 	margin 32px 0
 
 	> .icon
@@ -200,16 +198,10 @@ root(isDark, fill)
 				left 0 !important
 				transform scale(0.75)
 
-.ui-select[data-darkmode]
-	&.fill
-		root(true, true)
-	&:not(.fill)
-		root(true, false)
-
-.ui-select:not([data-darkmode])
+.ui-select
 	&.fill
-		root(false, true)
+		root(true)
 	&:not(.fill)
-		root(false, false)
+		root(false)
 
 </style>
diff --git a/src/client/app/common/views/pages/follow.vue b/src/client/app/common/views/pages/follow.vue
index ef7ee111e2..cb4785f468 100644
--- a/src/client/app/common/views/pages/follow.vue
+++ b/src/client/app/common/views/pages/follow.vue
@@ -107,14 +107,12 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.syxhndwprovvuqhmyvveewmbqayniwkv
 	padding 32px
 	max-width 500px
 	margin 0 auto
 	text-align center
-	color isDark ? #9baec8 : #868c8c
+	color var(--text)
 
 	$bg = var(--face)
 
@@ -124,7 +122,6 @@ root(isDark)
 	> .signed-in-as
 		margin-bottom 16px
 		font-size 14px
-		color isDark ? #9baec8 : #9daab3
 
 	> main
 		margin-bottom 16px
@@ -204,10 +201,4 @@ root(isDark)
 		*
 			pointer-events none
 
-.syxhndwprovvuqhmyvveewmbqayniwkv[data-darkmode]
-	root(true)
-
-.syxhndwprovvuqhmyvveewmbqayniwkv:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/widgets/analog-clock.vue b/src/client/app/common/views/widgets/analog-clock.vue
index 1725c2f1af..cfcdd5a1b6 100644
--- a/src/client/app/common/views/widgets/analog-clock.vue
+++ b/src/client/app/common/views/widgets/analog-clock.vue
@@ -26,16 +26,8 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mkw-analog-clock
 	.mkw-analog-clock--body
 		padding 8px
 
-.mkw-analog-clock[data-darkmode]
-	root(true)
-
-.mkw-analog-clock:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/widgets/calendar.vue b/src/client/app/common/views/widgets/calendar.vue
index 238b493a61..308d73bad8 100644
--- a/src/client/app/common/views/widgets/calendar.vue
+++ b/src/client/app/common/views/widgets/calendar.vue
@@ -116,9 +116,7 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mkw-calendar
 	&[data-special='on-new-years-day']
 		border-color #ef95a0
 
@@ -169,7 +167,8 @@ root(isDark)
 					margin 0 0 2px 0
 					font-size 12px
 					line-height 18px
-					color isDark ? #7a8692 : #888
+					color var(--text)
+					opacity 0.8
 
 					> b
 						margin-left 2px
@@ -177,7 +176,7 @@ root(isDark)
 				> .meter
 					width 100%
 					overflow hidden
-					background isDark ? #1c1f25 : #eee
+					background var(--materBg)
 					border-radius 8px
 
 					> .val
@@ -197,10 +196,4 @@ root(isDark)
 					> .meter > .val
 						background #41ddde
 
-.mkw-calendar[data-darkmode]
-	root(true)
-
-.mkw-calendar:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/widgets/donation.vue b/src/client/app/common/views/widgets/donation.vue
index a91aa8e749..b025b41e7d 100644
--- a/src/client/app/common/views/widgets/donation.vue
+++ b/src/client/app/common/views/widgets/donation.vue
@@ -1,13 +1,15 @@
 <template>
-<div class="mkw-donation" :data-mobile="platform == 'mobile'">
-	<article>
-		<h1>%fa:heart%%i18n:@title%</h1>
-		<p v-if="meta">
-			{{ '%i18n:@text%'.substr(0, '%i18n:@text%'.indexOf('{')) }}
-			<a :href="meta.maintainer.url">{{ meta.maintainer.name }}</a>
-			{{ '%i18n:@text%'.substr('%i18n:@text%'.indexOf('}') + 1) }}
-		</p>
-	</article>
+<div>
+	<mk-widget-container :show-header="false">
+		<article class="dolfvtibguprpxxhfndqaosjitixjohx">
+			<h1>%fa:heart%%i18n:@title%</h1>
+			<p v-if="meta">
+				{{ '%i18n:@text%'.substr(0, '%i18n:@text%'.indexOf('{')) }}
+				<a :href="meta.maintainer.url">{{ meta.maintainer.name }}</a>
+				{{ '%i18n:@text%'.substr('%i18n:@text%'.indexOf('}') + 1) }}
+			</p>
+		</article>
+	</mk-widget-container>
 </div>
 </template>
 
@@ -30,46 +32,22 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
-	background var(--face)
-	border solid 1px isDark ? #c3831c : #ead8bb
-	border-radius 6px
+.dolfvtibguprpxxhfndqaosjitixjohx
+	padding 20px
+	background var(--donationBg)
+	color var(--donationFg)
 
-	> article
-		padding 20px
+	> h1
+		margin 0 0 5px 0
+		font-size 1em
 
-		> h1
-			margin 0 0 5px 0
-			font-size 1em
-			color isDark ? #b2bac1 : #888
+		> [data-fa]
+			margin-right 0.25em
 
-			> [data-fa]
-				margin-right 0.25em
-
-		> p
-			display block
-			z-index 1
-			margin 0
-			font-size 0.8em
-			color isDark ? #a1a6ab : #999
-
-	&[data-mobile]
-		border none
-		background #ead8bb
-		border-radius 8px
-		box-shadow 0 0 0 1px rgba(#000, 0.2)
-
-		> article
-			> h1
-				color #7b8871
-
-			> p
-				color #777d71
-
-.mkw-donation[data-darkmode]
-	root(true)
-
-.mkw-donation:not([data-darkmode])
-	root(false)
+	> p
+		display block
+		z-index 1
+		margin 0
+		font-size 0.8em
 
 </style>
diff --git a/src/client/app/common/views/widgets/memo.vue b/src/client/app/common/views/widgets/memo.vue
index 42df683883..be8b18a4e9 100644
--- a/src/client/app/common/views/widgets/memo.vue
+++ b/src/client/app/common/views/widgets/memo.vue
@@ -57,9 +57,7 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mkw-memo
 	.mkw-memo--body
 		padding-bottom 28px + 16px
 
@@ -69,10 +67,10 @@ root(isDark)
 			max-width 100%
 			min-width 100%
 			padding 16px
-			color isDark ? #fff : #222
+			color var(--inputText)
 			background var(--face)
 			border none
-			border-bottom solid 1px isDark ? #1c2023 : #eee
+			border-bottom solid 1px var(--faceDivider)
 			border-radius 0
 
 		> button
@@ -102,10 +100,4 @@ root(isDark)
 				opacity 0.7
 				cursor default
 
-.mkw-memo[data-darkmode]
-	root(true)
-
-.mkw-memo:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/widgets/server.cpu.vue b/src/client/app/common/views/widgets/server.cpu.vue
index b9748bdf7c..2034aee0eb 100644
--- a/src/client/app/common/views/widgets/server.cpu.vue
+++ b/src/client/app/common/views/widgets/server.cpu.vue
@@ -38,7 +38,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.cpu
 	> .pie
 		padding 10px
 		height 100px
@@ -52,7 +52,7 @@ root(isDark)
 		> p
 			margin 0
 			font-size 12px
-			color isDark ? #a8b4bd : #505050
+			color var(--chartCaption)
 
 			&:first-child
 				font-weight bold
@@ -65,10 +65,4 @@ root(isDark)
 		display block
 		clear both
 
-.cpu[data-darkmode]
-	root(true)
-
-.cpu:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/widgets/server.disk.vue b/src/client/app/common/views/widgets/server.disk.vue
index 99ce624051..667576ab76 100644
--- a/src/client/app/common/views/widgets/server.disk.vue
+++ b/src/client/app/common/views/widgets/server.disk.vue
@@ -46,7 +46,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.disk
 	> .pie
 		padding 10px
 		height 100px
@@ -60,7 +60,7 @@ root(isDark)
 		> p
 			margin 0
 			font-size 12px
-			color isDark ? #a8b4bd : #505050
+			color var(--chartCaption)
 
 			&:first-child
 				font-weight bold
@@ -73,10 +73,4 @@ root(isDark)
 		display block
 		clear both
 
-.disk[data-darkmode]
-	root(true)
-
-.disk:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/widgets/server.memory.vue b/src/client/app/common/views/widgets/server.memory.vue
index 8a60621343..9e12884cf9 100644
--- a/src/client/app/common/views/widgets/server.memory.vue
+++ b/src/client/app/common/views/widgets/server.memory.vue
@@ -46,7 +46,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.memory
 	> .pie
 		padding 10px
 		height 100px
@@ -60,7 +60,7 @@ root(isDark)
 		> p
 			margin 0
 			font-size 12px
-			color isDark ? #a8b4bd : #505050
+			color var(--chartCaption)
 
 			&:first-child
 				font-weight bold
@@ -73,10 +73,4 @@ root(isDark)
 		display block
 		clear both
 
-.memory[data-darkmode]
-	root(true)
-
-.memory:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/widgets/server.pie.vue b/src/client/app/common/views/widgets/server.pie.vue
index d557c52ea5..ce342fd41b 100644
--- a/src/client/app/common/views/widgets/server.pie.vue
+++ b/src/client/app/common/views/widgets/server.pie.vue
@@ -45,7 +45,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+svg
 	display block
 	height 100%
 
@@ -56,12 +56,6 @@ root(isDark)
 
 	> text
 		font-size 0.15px
-		fill isDark ? rgba(#fff, 0.6) : rgba(#000, 0.6)
-
-svg[data-darkmode]
-	root(true)
-
-svg:not([data-darkmode])
-	root(false)
+		fill var(--chartCaption)
 
 </style>
diff --git a/src/client/app/desktop/views/components/context-menu.menu.vue b/src/client/app/desktop/views/components/context-menu.menu.vue
index b65a8e1dea..9e4541a752 100644
--- a/src/client/app/desktop/views/components/context-menu.menu.vue
+++ b/src/client/app/desktop/views/components/context-menu.menu.vue
@@ -31,9 +31,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.menu
 	$width = 240px
 	$item-height = 38px
 	$padding = 10px
@@ -48,7 +46,7 @@ root(isDark)
 		&.divider
 			margin-top $padding
 			padding-top $padding
-			border-top solid 1px isDark ? #1c2023 : #eee
+			border-top solid 1px var(--faceDivider)
 
 		&.nest
 			> p
@@ -77,7 +75,7 @@ root(isDark)
 			margin 0
 			padding 0 32px 0 38px
 			line-height $item-height
-			color isDark ? #c8cece : #868C8C
+			color var(--text)
 			text-decoration none
 			cursor pointer
 
@@ -106,17 +104,11 @@ root(isDark)
 		left $width
 		margin-top -($padding)
 		width $width
-		background isDark ? #282c37 :#fff
+		background var(--popupBg)
 		border-radius 0 4px 4px 4px
 		box-shadow 2px 2px 8px rgba(#000, 0.2)
 		transition visibility 0s linear 0.2s
 
-.menu[data-darkmode]
-	root(true)
-
-.menu:not([data-darkmode])
-	root(false)
-
 </style>
 
 <style lang="stylus" module>
diff --git a/src/client/app/desktop/views/components/context-menu.vue b/src/client/app/desktop/views/components/context-menu.vue
index 170dcf55a1..b0a34866cd 100644
--- a/src/client/app/desktop/views/components/context-menu.vue
+++ b/src/client/app/desktop/views/components/context-menu.vue
@@ -71,7 +71,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.context-menu
 	$width = 240px
 	$item-height = 38px
 	$padding = 10px
@@ -82,15 +82,9 @@ root(isDark)
 	z-index 4096
 	width $width
 	font-size 0.8em
-	background var(--face)
+	background var(--popupBg)
 	border-radius 0 4px 4px 4px
 	box-shadow 2px 2px 8px rgba(#000, 0.2)
 	opacity 0
 
-.context-menu[data-darkmode]
-	root(true)
-
-.context-menu:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/drive.file.vue b/src/client/app/desktop/views/components/drive.file.vue
index 225130baf7..d7e24cfe71 100644
--- a/src/client/app/desktop/views/components/drive.file.vue
+++ b/src/client/app/desktop/views/components/drive.file.vue
@@ -200,9 +200,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.gvfdktuvdgwhmztnuekzkswkjygptfcv
 	padding 8px 0 0 0
 	height 180px
 	border-radius 4px
@@ -337,16 +335,10 @@ root(isDark)
 		font-size 0.8em
 		text-align center
 		word-break break-all
-		color isDark ? #fff : #444
+		color var(--text)
 		overflow hidden
 
 		> .ext
 			opacity 0.5
 
-.gvfdktuvdgwhmztnuekzkswkjygptfcv[data-darkmode]
-	root(true)
-
-.gvfdktuvdgwhmztnuekzkswkjygptfcv:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/note-preview.vue b/src/client/app/desktop/views/components/note-preview.vue
index 7e5a1db8d4..4c1c7e7b2d 100644
--- a/src/client/app/desktop/views/components/note-preview.vue
+++ b/src/client/app/desktop/views/components/note-preview.vue
@@ -47,7 +47,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.qiziqtywpuaucsgarwajitwaakggnisj
 	display flex
 	font-size 0.9em
 
@@ -83,10 +83,4 @@ root(isDark)
 					padding 0
 					color var(--subNoteText)
 
-.qiziqtywpuaucsgarwajitwaakggnisj[data-darkmode]
-	root(true)
-
-.qiziqtywpuaucsgarwajitwaakggnisj:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/notes.note.sub.vue b/src/client/app/desktop/views/components/notes.note.sub.vue
index a0c4cc2fad..ee52670f8f 100644
--- a/src/client/app/desktop/views/components/notes.note.sub.vue
+++ b/src/client/app/desktop/views/components/notes.note.sub.vue
@@ -42,7 +42,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.tkfdzaxtkdeianobciwadajxzbddorql
 	display flex
 	margin 0
 	padding 16px 32px
@@ -88,10 +88,4 @@ root(isDark)
 						max-height 120px
 						font-size 80%
 
-.tkfdzaxtkdeianobciwadajxzbddorql[data-darkmode]
-	root(true)
-
-.tkfdzaxtkdeianobciwadajxzbddorql:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/post-form-window.vue b/src/client/app/desktop/views/components/post-form-window.vue
index 466d5e1fd8..a5d191f2f3 100644
--- a/src/client/app/desktop/views/components/post-form-window.vue
+++ b/src/client/app/desktop/views/components/post-form-window.vue
@@ -77,7 +77,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-post-form-window
 	.mk-post-form-window--header
 		.icon
 			margin-right 8px
@@ -94,15 +94,6 @@ root(isDark)
 
 	.mk-post-form-window--body
 		.notePreview
-			if isDark
-				margin 16px 22px 0 22px
-			else
 				margin 16px 22px
 
-.mk-post-form-window[data-darkmode]
-	root(true)
-
-.mk-post-form-window:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/settings.tags.vue b/src/client/app/desktop/views/components/settings.tags.vue
index a7234f7d87..dfc69a387e 100644
--- a/src/client/app/desktop/views/components/settings.tags.vue
+++ b/src/client/app/desktop/views/components/settings.tags.vue
@@ -47,8 +47,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-root(isDark)
+.vfcitkilproprqtbnpoertpsziierwzi
 	> .timeline
 		padding-bottom 16px
 		border-bottom solid 1px rgba(#000, 0.1)
@@ -56,10 +55,4 @@ root(isDark)
 	> .add
 		margin-top 16px
 
-.vfcitkilproprqtbnpoertpsziierwzi[data-darkmode]
-	root(true)
-
-.vfcitkilproprqtbnpoertpsziierwzi:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
index 5089232b06..1b96e06486 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -77,7 +77,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.header
 	position fixed
 	top 0
 	z-index 1000
@@ -151,10 +151,4 @@ root(isDark)
 						> .mk-ui-header-search
 							display none
 
-.header[data-darkmode]
-	root(true)
-
-.header:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/widget-container.vue b/src/client/app/desktop/views/components/widget-container.vue
index cfcb2785c5..a506357039 100644
--- a/src/client/app/desktop/views/components/widget-container.vue
+++ b/src/client/app/desktop/views/components/widget-container.vue
@@ -25,7 +25,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-widget-container
 	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
@@ -71,10 +71,4 @@ root(isDark)
 			&:active
 				color var(--faceTextButtonActive)
 
-.mk-widget-container[data-darkmode]
-	root(true)
-
-.mk-widget-container:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/window.vue b/src/client/app/desktop/views/components/window.vue
index 5547445537..a1893ffd6b 100644
--- a/src/client/app/desktop/views/components/window.vue
+++ b/src/client/app/desktop/views/components/window.vue
@@ -462,7 +462,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-window
 	display block
 
 	> .bg
@@ -490,10 +490,7 @@ root(isDark)
 		&:focus
 			&:not([data-is-modal])
 				> .body
-					if isDark
-						box-shadow 0 0 0px 1px var(--primaryAlpha05), 0 2px 12px 0 rgba(#000, 0.5)
-					else
-						box-shadow 0 0 0px 1px var(--primaryAlpha05), 0 2px 6px 0 rgba(#000, 0.2)
+						box-shadow 0 0 0px 1px var(--primaryAlpha05), 0 2px 12px 0 var(--desktopWindowShadow)
 
 		> .handle
 			$size = 8px
@@ -561,11 +558,7 @@ root(isDark)
 			overflow hidden
 			background var(--face)
 			border-radius 6px
-
-			if isDark
-				box-shadow 0 2px 12px 0 rgba(#000, 0.5)
-			else
-				box-shadow 0 2px 6px 0 rgba(#000, 0.2)
+			box-shadow 0 2px 12px 0 rgba(#000, 0.5)
 
 			> header
 				$header-height = 40px
@@ -632,10 +625,4 @@ root(isDark)
 		> .main > .body > .content
 			height calc(100% - 40px)
 
-.mk-window[data-darkmode]
-	root(true)
-
-.mk-window:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue b/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue
index ebaa11478d..63b24cea47 100644
--- a/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue
@@ -111,7 +111,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.zyknedwtlthezamcjlolyusmipqmjgxz
 	> svg
 		display block
 		width 50%
@@ -135,10 +135,4 @@ root(isDark)
 		display block
 		clear both
 
-.zyknedwtlthezamcjlolyusmipqmjgxz[data-darkmode]
-	root(true)
-
-.zyknedwtlthezamcjlolyusmipqmjgxz:not([data-darkmode])
-	root(false)
-
 </style>
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 1b939f2f58..c372ef490e 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -305,9 +305,8 @@ export default Vue.extend({
 			background transparent
 			box-shadow none
 
-			if !isDark
-				> button
-					color #bbb
+			> button
+				color var(--text)
 
 	> header
 		display flex
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.sub.vue b/src/client/app/desktop/views/pages/deck/deck.note.sub.vue
index 0b6a13beaf..445bf7e365 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.sub.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.sub.vue
@@ -29,7 +29,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.fnlfosztlhtptnongximhlbykxblytcq
 	display flex
 	padding 16px
 	font-size 10px
@@ -68,10 +68,4 @@ root(isDark)
 					max-height 120px
 					font-size 80%
 
-.fnlfosztlhtptnongximhlbykxblytcq[data-darkmode]
-	root(true)
-
-.fnlfosztlhtptnongximhlbykxblytcq:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.notification.vue b/src/client/app/desktop/views/pages/deck/deck.notification.vue
index b318579b3e..149bd10293 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notification.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notification.vue
@@ -109,7 +109,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.dsfykdcjpuwfvpefwufddclpjhzktmpw
 	> .notification
 		padding 16px
 		font-size 13px
@@ -170,10 +170,4 @@ root(isDark)
 			> div > header i
 				color #888
 
-.dsfykdcjpuwfvpefwufddclpjhzktmpw[data-darkmode]
-	root(true)
-
-.dsfykdcjpuwfvpefwufddclpjhzktmpw:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.notifications.vue b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
index aa48571a5b..1417cc3ee8 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notifications.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
@@ -155,8 +155,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
-
+.oxynyeqmfvracxnglgulyqfgqxnxmehl
 	.transition
 		.mk-notifications-enter
 		.mk-notifications-leave-to
@@ -221,10 +220,4 @@ root(isDark)
 		> [data-fa]
 			margin-right 4px
 
-.oxynyeqmfvracxnglgulyqfgqxnxmehl[data-darkmode]
-	root(true)
-
-.oxynyeqmfvracxnglgulyqfgqxnxmehl:not([data-darkmode])
-	root(false)
-
 </style>
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 b90d0a831e..cf05006c00 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
@@ -36,7 +36,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.vahgrswmbzfdlmomxnqftuueyvwaafth
 	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
@@ -77,10 +77,4 @@ root(isDark)
 		> i
 			margin-right 4px
 
-.vahgrswmbzfdlmomxnqftuueyvwaafth[data-darkmode]
-	root(true)
-
-.vahgrswmbzfdlmomxnqftuueyvwaafth:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/widgets/trends.vue b/src/client/app/desktop/views/widgets/trends.vue
index aeaab63ac4..a886796132 100644
--- a/src/client/app/desktop/views/widgets/trends.vue
+++ b/src/client/app/desktop/views/widgets/trends.vue
@@ -67,7 +67,7 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mkw-trends
 	.mkw-trends--body
 		> .note
 			padding 16px
@@ -98,10 +98,4 @@ root(isDark)
 			> [data-fa]
 				margin-right 4px
 
-.mkw-trends[data-darkmode]
-	root(true)
-
-.mkw-trends:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/note-preview.vue b/src/client/app/mobile/views/components/note-preview.vue
index 1c73779251..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
@@ -100,10 +100,4 @@ root(isDark)
 					padding 0
 					color var(--subNoteText)
 
-.yohlumlkhizgfkvvscwfcrcggkotpvry[data-darkmode]
-	root(true)
-
-.yohlumlkhizgfkvvscwfcrcggkotpvry:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index 9153b1d551..8f0a1ef196 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -217,9 +217,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-notes
 	overflow hidden
 	background var(--face)
 	border-radius 8px
@@ -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/pages/welcome.vue b/src/client/app/mobile/views/pages/welcome.vue
index 4e24f70ffc..32f74bfe3a 100644
--- a/src/client/app/mobile/views/pages/welcome.vue
+++ b/src/client/app/mobile/views/pages/welcome.vue
@@ -122,9 +122,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.wgwfgvvimdjvhjfwxropcwksnzftjqes
 	text-align center
-	//background #fff
 
 	> .banner
 		position absolute
@@ -317,10 +316,4 @@ root(isDark)
 				margin 16px 0 0 0
 				opacity 0.7
 
-.wgwfgvvimdjvhjfwxropcwksnzftjqes[data-darkmode]
-	root(true)
-
-.wgwfgvvimdjvhjfwxropcwksnzftjqes:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 29d4fc2e5d..72aedbce99 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -62,6 +62,7 @@
 	"dateDividerFg": ":alpha<0.7<$text",
 
 	"switchTrack": "rgba(255, 255, 255, 0.15)",
+	"radioBorder": "rgba(255, 255, 255, 0.6)",
 	"inputBorder": "rgba(255, 255, 255, 0.7)",
 	"inputLabel": "rgba(255, 255, 255, 0.7)",
 	"inputText": "#fff",
@@ -80,6 +81,9 @@
 
 	"pollEditorInputBg": "rgba(0, 0, 0, 0.25)",
 
+	"pollChoiceText": "#fff",
+	"pollChoiceBorder": "rgba(255, 255, 255, 0.1)",
+
 	"urlPreviewBorder": "rgba(0, 0, 0, 0.4)",
 	"urlPreviewBorderHover": "rgba(255, 255, 255, 0.2)",
 	"urlPreviewTitle": "$text",
@@ -90,12 +94,17 @@
 	"calendarSaturdayOrSunday": "#ff6679",
 	"calendarDay": "#c5ced6",
 
+	"materBg": "rgba(0, 0, 0, 0.3)",
+
 	"chartCaption": ":alpha<0.6<$text",
 
 	"announcementsBg": "#253a50",
 	"announcementsTitle": "#539eff",
 	"announcementsText": "#fff",
 
+	"donationBg": "#5d5242",
+	"donationFg": "#e4dbce",
+
 	"googleSearchBg": "rgba(0, 0, 0, 0.2)",
 	"googleSearchFg": "#dee4e8",
 	"googleSearchBorder": "rgba(255, 255, 255, 0.2)",
@@ -119,6 +128,11 @@
 	"messagingRoomMessageBg": "$secondary",
 	"messagingRoomMessageFg": "#fff",
 
+	"formButtonBorder": "rgba(255, 255, 255, 0.1)",
+	"formButtonHoverBg": ":alpha<0.2<$primary",
+	"formButtonHoverBorder": ":alpha<0.5<$primary",
+	"formButtonActiveBg": ":alpha<0.12<$primary",
+
 	"desktopHeaderBg": ":lighten<5<$secondary",
 	"desktopHeaderFg": "$text",
 	"desktopHeaderHoverFg": "#fff",
@@ -140,6 +154,7 @@
 	"desktopTimelineSrc": "@faceTextButton",
 	"desktopTimelineSrcHover": "@faceTextButtonHover",
 	"desktopWindowTitle": "@faceHeaderText",
+	"desktopWindowShadow": "rgba(0, 0, 0, 0.5)",
 	"desktopDriveBg": "@bg",
 	"desktopDriveFolderBg": ":alpha<0.2<$primary",
 	"desktopDriveFolderHoverBg": ":alpha<0.3<$primary",
@@ -169,5 +184,18 @@
 	"mobileSignedInAsBg": "#273c34",
 	"mobileSignedInAsFg": "#49ab63",
 	"mobileSignoutBg": "#652222",
-	"mobileSignoutFg": "#ff5f56"
+	"mobileSignoutFg": "#ff5f56",
+
+	"reversiBannerGradientStart": "#45730e",
+	"reversiBannerGradientEnd": "#464300",
+	"reversiDescBg": "rgba(255, 255, 255, 0.1)",
+	"reversiListItemShadow": "rgba(0, 0, 0, 0.7)",
+	"reversiMapSelectBorder": "rgba(255, 255, 255, 0.1)",
+	"reversiMapSelectHoverBorder": "rgba(255, 255, 255, 0.2)",
+	"reversiRoomFormShadow": "rgba(0, 0, 0, 0.7)",
+	"reversiRoomFooterBg": ":alpha<0.9<$secondary",
+	"reversiGameHeaderLine": ":alpha<0.5<$secondary",
+	"reversiGameEmptyCell": ":lighten<2<$secondary",
+	"reversiGameEmptyCellMyTurn": ":lighten<5<$secondary",
+	"reversiGameEmptyCellCanPut": ":lighten<4<$secondary"
 }
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index e4116480e2..4690054cbf 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -62,6 +62,7 @@
 	"dateDividerFg": ":alpha<0.7<$text",
 
 	"switchTrack": "rgba(0, 0, 0, 0.25)",
+	"radioBorder": "rgba(0, 0, 0, 0.4)",
 	"inputBorder": "rgba(0, 0, 0, 0.42)",
 	"inputLabel": "rgba(0, 0, 0, 0.54)",
 	"inputText": "#000",
@@ -80,6 +81,9 @@
 
 	"pollEditorInputBg": "#fff",
 
+	"pollChoiceText": "#000",
+	"pollChoiceBorder": "rgba(0, 0, 0, 0.1)",
+
 	"urlPreviewBorder": "rgba(0, 0, 0, 0.1)",
 	"urlPreviewBorderHover": "rgba(0, 0, 0, 0.2)",
 	"urlPreviewTitle": "$text",
@@ -90,12 +94,17 @@
 	"calendarSaturdayOrSunday": "#ef95a0",
 	"calendarDay": "#777",
 
+	"materBg": "rgba(0, 0, 0, 0.1)",
+
 	"chartCaption": ":alpha<0.6<$text",
 
 	"announcementsBg": "#f3f9ff",
 	"announcementsTitle": "#4078c0",
 	"announcementsText": "#57616f",
 
+	"donationBg": "#fbead4",
+	"donationFg": "#777d71",
+
 	"googleSearchBg": "#fff",
 	"googleSearchFg": "#55595c",
 	"googleSearchBorder": "rgba(0, 0, 0, 0.2)",
@@ -119,6 +128,11 @@
 	"messagingRoomMessageBg": "#eee",
 	"messagingRoomMessageFg": "#333",
 
+	"formButtonBorder": "rgba(0, 0, 0, 0.1)",
+	"formButtonHoverBg": ":alpha<0.12<$primary",
+	"formButtonHoverBorder": ":alpha<0.3<$primary",
+	"formButtonActiveBg": ":alpha<0.12<$primary",
+
 	"desktopHeaderBg": ":lighten<5<$secondary",
 	"desktopHeaderFg": "$text",
 	"desktopHeaderHoverFg": "#7b8c88",
@@ -140,6 +154,7 @@
 	"desktopTimelineSrc": "#6f7477",
 	"desktopTimelineSrcHover": "#525a5f",
 	"desktopWindowTitle": "#666",
+	"desktopWindowShadow": "rgba(0, 0, 0, 0.2)",
 	"desktopDriveBg": "#fff",
 	"desktopDriveFolderBg": ":lighten<31<$primary",
 	"desktopDriveFolderHoverBg": ":lighten<27<$primary",
@@ -169,5 +184,18 @@
 	"mobileSignedInAsBg": "#fcfff5",
 	"mobileSignedInAsFg": "#2c662d",
 	"mobileSignoutBg": "#fff6f5",
-	"mobileSignoutFg": "#cc2727"
+	"mobileSignoutFg": "#cc2727",
+
+	"reversiBannerGradientStart": "#8bca3e",
+	"reversiBannerGradientEnd": "#d6cf31",
+	"reversiDescBg": "rgba(0, 0, 0, 0.1)",
+	"reversiListItemShadow": "rgba(0, 0, 0, 0.15)",
+	"reversiMapSelectBorder": "rgba(0, 0, 0, 0.1)",
+	"reversiMapSelectHoverBorder": "rgba(0, 0, 0, 0.2)",
+	"reversiRoomFormShadow": "rgba(0, 0, 0, 0.1)",
+	"reversiRoomFooterBg": ":alpha<0.9<$secondary",
+	"reversiGameHeaderLine": "#c4cdd4",
+	"reversiGameEmptyCell": "rgba(0, 0, 0, 0.06)",
+	"reversiGameEmptyCellMyTurn": "rgba(0, 0, 0, 0.12)",
+	"reversiGameEmptyCellCanPut": "rgba(0, 0, 0, 0.9)"
 }