diff --git a/src/client/app/desktop/views/components/calendar.vue b/src/client/app/desktop/views/components/calendar.vue
index cd73ab350b..6b753068fa 100644
--- a/src/client/app/desktop/views/components/calendar.vue
+++ b/src/client/app/desktop/views/components/calendar.vue
@@ -166,10 +166,10 @@ root(isDark)
 		width 42px
 		font-size 0.9em
 		line-height 42px
-		color isDark ? #9baec8 : #ccc
+		color var(--faceTextButton)
 
 		&:hover
-			color isDark ? #b2c1d5 : #aaa
+			color var(--faceTextButtonHover)
 
 		&:active
 			color isDark ? #b2c1d5 : #999
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index 9222d8fab9..50ad793f0b 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -225,7 +225,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-note-detail
 	overflow hidden
 	text-align left
 	background var(--face)
@@ -327,14 +327,14 @@ root(isDark)
 				display block
 				text-align left
 				margin 0
-				color isDark ? #606984 : #ccc
+				color var(--noteHeaderAcct)
 
 			> .time
 				position absolute
 				top 0
 				right 32px
 				font-size 1em
-				color isDark ? #606984 : #c0c0c0
+				color var(--noteHeaderInfo)
 
 		> .body
 			padding 8px 0
@@ -345,7 +345,7 @@ root(isDark)
 				margin 0
 				padding 0
 				overflow-wrap break-word
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 				> .text
 					margin-right 8px
@@ -358,14 +358,14 @@ root(isDark)
 					padding 0
 					overflow-wrap break-word
 					font-size 1.5em
-					color isDark ? #fff : #717171
+					color var(--noteText)
 
 				> .renote
 					margin 8px 0
 
 					> *
 						padding 16px
-						border dashed 1px #c0dac6
+						border dashed 1px vat(--quoteBorder)
 						border-radius 8px
 
 				> .location
@@ -419,10 +419,4 @@ root(isDark)
 		> *
 			border-top 1px solid var(--faceDivider)
 
-.mk-note-detail[data-darkmode]
-	root(true)
-
-.mk-note-detail: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 6c84165356..f64657fb47 100644
--- a/src/client/app/desktop/views/components/note-preview.vue
+++ b/src/client/app/desktop/views/components/note-preview.vue
@@ -71,7 +71,7 @@ root(isDark)
 				margin 0
 				padding 0
 				overflow-wrap break-word
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 				> .text
 					margin-right 8px
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 13e2991683..70709f8738 100644
--- a/src/client/app/desktop/views/components/notes.note.sub.vue
+++ b/src/client/app/desktop/views/components/notes.note.sub.vue
@@ -72,7 +72,7 @@ root(isDark)
 				margin 0
 				padding 0
 				overflow-wrap break-word
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 				> .text
 					margin-right 8px
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 160de5199d..5daaadb971 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -426,7 +426,7 @@ root(isDark)
 					margin 0
 					padding 0
 					overflow-wrap break-word
-					color isDark ? #fff : #717171
+					color var(--noteText)
 
 					> .text
 						margin-right 8px
@@ -439,7 +439,7 @@ root(isDark)
 						margin 0
 						padding 0
 						overflow-wrap break-word
-						color isDark ? #fff : #717171
+						color var(--noteText)
 
 						>>> .title
 							display block
@@ -491,7 +491,7 @@ root(isDark)
 
 						> *
 							padding 16px
-							border dashed 1px isDark ? #4e945e : #c0dac6
+							border dashed 1px vat(--quoteBorder)
 							border-radius 8px
 
 			> footer
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index fdd6e75318..5a5f9d63db 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -434,12 +434,10 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
 root(isDark)
 	display block
 	padding 16px
-	background isDark ? #282C37 : var(--primaryLighten95)
+	background var(--desktopPostFormBg)
 
 	&:after
 		content ""
@@ -453,8 +451,8 @@ root(isDark)
 			width 100%
 			padding 12px
 			font-size 16px
-			color isDark ? #fff : #333
-			background isDark ? #191d23 : #fff
+			color var(--desktopPostFormTextareaFg)
+			background var(--desktopPostFormTextareaBg)
 			outline none
 			border solid 1px var(--primaryAlpha01)
 			border-radius 4px
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index 7800eae52d..3e4c45d228 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -175,9 +175,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-timeline
 	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
@@ -187,7 +185,7 @@ root(isDark)
 		padding 0 8px
 		z-index 10
 		background var(--faceHeader)
-		box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
+		box-shadow 0 1px var(--desktopTimelineHeaderShadow)
 
 		> .buttons
 			position absolute
@@ -200,7 +198,7 @@ root(isDark)
 				padding 0 8px
 				font-size 0.9em
 				line-height 42px
-				color isDark ? #9baec8 : #ccc
+				color var(--faceTextButton)
 
 				> .badge
 					position absolute
@@ -210,10 +208,7 @@ root(isDark)
 					color var(--primary)
 
 				&:hover
-					color isDark ? #b2c1d5 : #aaa
-
-				&:active
-					color isDark ? #b2c1d5 : #999
+					color var(--faceTextButtonHover)
 
 				&[data-active]
 					color var(--primary)
@@ -252,16 +247,10 @@ root(isDark)
 					background var(--primary)
 
 			&:not([data-active])
-				color isDark ? #9aa2a7 : #6f7477
+				color var(--desktopTimelineSrc)
 				cursor pointer
 
 				&:hover
-					color isDark ? #d9dcde : #525a5f
-
-.mk-timeline[data-darkmode]
-	root(true)
-
-.mk-timeline:not([data-darkmode])
-	root(false)
+					color var(--desktopTimelineSrcHover)
 
 </style>
diff --git a/src/client/app/desktop/views/components/widget-container.vue b/src/client/app/desktop/views/components/widget-container.vue
index d17b9c91d8..156823799f 100644
--- a/src/client/app/desktop/views/components/widget-container.vue
+++ b/src/client/app/desktop/views/components/widget-container.vue
@@ -72,10 +72,10 @@ root(isDark)
 			width 42px
 			font-size 0.9em
 			line-height 42px
-			color isDark ? #9baec8 : #ccc
+			color var(--faceTextButton)
 
 			&:hover
-				color isDark ? #b2c1d5 : #aaa
+				color var(--faceTextButtonHover)
 
 			&:active
 				color isDark ? #b2c1d5 : #999
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 1cf8900ee5..fb521db25b 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -344,10 +344,10 @@ root(isDark)
 			width $header-height
 			line-height $header-height
 			font-size 16px
-			color isDark ? #9baec8 : #ccc
+			color var(--faceTextButton)
 
 			&:hover
-				color isDark ? #b2c1d5 : #aaa
+				color var(--faceTextButtonHover)
 
 			&:active
 				color isDark ? #b2c1d5 : #999
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index ffb284fb42..bdc4368e7b 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -309,7 +309,7 @@ root(isDark)
 					margin 0
 					padding 0
 					overflow-wrap break-word
-					color isDark ? #fff : #717171
+					color var(--noteText)
 
 					> .text
 						margin-right 8px
@@ -321,7 +321,7 @@ root(isDark)
 						margin 0
 						padding 0
 						overflow-wrap break-word
-						color isDark ? #fff : #717171
+						color var(--noteText)
 
 						>>> .title
 							display block
@@ -387,7 +387,7 @@ root(isDark)
 
 						> *
 							padding 16px
-							border dashed 1px isDark ? #4e945e : #c0dac6
+							border dashed 1px vat(--quoteBorder)
 							border-radius 8px
 
 				> .app
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 d0093ff282..ff10ac2aa6 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notification.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notification.vue
@@ -146,10 +146,10 @@ root(isDark)
 					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
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 472c18088d..ade518b1fc 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -223,7 +223,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-note-detail
 	overflow hidden
 	width 100%
 	text-align left
@@ -334,7 +334,7 @@ root(isDark)
 					display block
 					text-align left
 					margin 0
-					color isDark ? #606984 : #ccc
+					color var(--noteHeaderAcct)
 
 		> .body
 			padding 8px 0
@@ -345,7 +345,7 @@ root(isDark)
 				margin 0
 				padding 0
 				overflow-wrap break-word
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 				> .text
 					margin-right 8px
@@ -358,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
@@ -368,7 +368,7 @@ root(isDark)
 
 					> *
 						padding 16px
-						border dashed 1px #c0dac6
+						border dashed 1px vat(--quoteBorder)
 						border-radius 8px
 
 				> .location
@@ -393,7 +393,7 @@ root(isDark)
 
 		> .time
 			font-size 16px
-			color isDark ? #606984 : #c0c0c0
+			color var(--noteHeaderInfo)
 
 		> footer
 			font-size 1.2em
@@ -412,7 +412,7 @@ root(isDark)
 					margin-right 28px
 
 				&:hover
-					color isDark ? #9198af : #666
+					color var(--noteActionsHover)
 
 				> .count
 					display inline
@@ -426,10 +426,4 @@ root(isDark)
 		> *
 			border-top 1px solid var(--faceDivider)
 
-.mk-note-detail[data-darkmode]
-	root(true)
-
-.mk-note-detail: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 4c03593a9e..0b3278ff41 100644
--- a/src/client/app/mobile/views/components/note-preview.vue
+++ b/src/client/app/mobile/views/components/note-preview.vue
@@ -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
diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue
index 2f38c9e97d..8c2e3b496d 100644
--- a/src/client/app/mobile/views/components/note.sub.vue
+++ b/src/client/app/mobile/views/components/note.sub.vue
@@ -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
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 859fc88043..ed175b4f6f 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -349,7 +349,7 @@ root(isDark)
 					margin 0
 					padding 0
 					overflow-wrap break-word
-					color isDark ? #fff : #717171
+					color var(--noteText)
 
 					> .text
 						margin-right 8px
@@ -361,7 +361,7 @@ root(isDark)
 						margin 0
 						padding 0
 						overflow-wrap break-word
-						color isDark ? #fff : #717171
+						color var(--noteText)
 
 						>>> .title
 							display block
@@ -427,7 +427,7 @@ root(isDark)
 
 						> *
 							padding 16px
-							border dashed 1px isDark ? #4e945e : #c0dac6
+							border dashed 1px vat(--quoteBorder)
 							border-radius 8px
 
 				> .app
diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index ee90c6b46b..7b73012e06 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -158,10 +158,10 @@ root(isDark)
 					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
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index c9e9835136..88bde9d684 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -13,11 +13,22 @@
 	"face": "#282c37",
 	"faceHeader": "#313543",
 	"faceDivider": "rgba(0, 0, 0, 0.3)",
+	"faceTextButton": "#9baec8",
+	"faceTextButtonHover": "#b2c1d5",
 	"popupBg": "#2c303c",
 	"popupFg": "#d6dce2",
 	"subNoteBg": "rgba(0, 0, 0, 0.18)",
 	"renoteGradient": "#314027",
 	"renoteText": "#9dbb00",
+	"quoteBorder": "#4e945e",
+	"noteText": "#fff",
+	"noteHeaderName": "#fff",
+	"noteHeaderBadgeFg": "#758188",
+	"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.25)",
+	"noteHeaderAdminFg": "#f15f71",
+	"noteHeaderAdminBg": "#5d282e",
+	"noteHeaderAcct": "#606984",
+	"noteHeaderInfo": "#606984",
 	"noteActions": "#606984",
 	"noteActionsHover": "#a1a8bf",
 	"noteActionsReplyHover": "#0af",
@@ -28,13 +39,6 @@
 	"dateDividerBg": "#242731",
 	"dateDividerFg": "#666b79",
 	"switchTrack": "rgba(255, 255, 255, 0.15)",
-	"noteHeaderName": "#fff",
-	"noteHeaderBadgeFg": "#758188",
-	"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.25)",
-	"noteHeaderAdminFg": "#f15f71",
-	"noteHeaderAdminBg": "#5d282e",
-	"noteHeaderAcct": "#606984",
-	"noteHeaderInfo": "#606984",
 	"autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)",
 	"autocompleteItemText": "rgba(255, 255, 255, 0.8)",
 	"autocompleteItemTextSub": "rgba(255, 255, 255, 0.3)",
@@ -43,6 +47,12 @@
 	"cwButtonHoverBg": "#707b97",
 	"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
 	"desktopHeaderBg": "#313543",
+	"desktopPostFormBg": "@face",
+	"desktopPostFormTextareaBg": "rgba(0, 0, 0, 0.25)",
+	"desktopPostFormTextareaFg": "#fff",
+	"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.15)",
+	"desktopTimelineSrc": "@faceTextButton",
+	"desktopTimelineSrcHover": "@faceTextButtonHover",
 	"mobileSignedInAsBg": "#273c34",
 	"mobileSignedInAsFg": "#49ab63",
 	"mobileSignoutBg": "#652222",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index b156eb1aa8..474fc7ea8f 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -8,7 +8,7 @@
 	"primary": "#fb8d4e",
 	"primaryForeground": "#fff",
 	"bg": "#1b1a35",
-	"face": "#2e2a3e",
+	"face": "#322e44",
 	"faceHeader": "#36314e",
 	"dateDividerBg": "#26253c",
 	"popupBg": "#2c303c",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 6aef10d9a6..3374a62e36 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -13,11 +13,22 @@
 	"face": "#fff",
 	"faceHeader": "#fff",
 	"faceDivider": "rgba(0, 0, 0, 0.082)",
+	"faceTextButton": "#ccc",
+	"faceTextButtonHover": "#aaa",
 	"popupBg": "#fff",
 	"popupFg": "#586069",
 	"subNoteBg": "rgba(0, 0, 0, 0.01)",
 	"renoteGradient": "#edfde2",
 	"renoteText": "#9dbb00",
+	"quoteBorder": "#c0dac6",
+	"noteText": "#717171",
+	"noteHeaderName": "#627079",
+	"noteHeaderBadgeFg": "#aaa",
+	"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.05)",
+	"noteHeaderAdminFg": "#f15f71",
+	"noteHeaderAdminBg": "#5d282e",
+	"noteHeaderAcct": "#ccc",
+	"noteHeaderInfo": "#c0c0c0",
 	"noteActions": "#ddd",
 	"noteActionsHover": "#444",
 	"noteActionsReplyHover": "#0af",
@@ -28,13 +39,6 @@
 	"dateDividerBg": "#fdfdfd",
 	"dateDividerFg": "#aaa",
 	"switchTrack": "rgba(0, 0, 0, 0.25)",
-	"noteHeaderName": "#627079",
-	"noteHeaderBadgeFg": "#aaa",
-	"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.05)",
-	"noteHeaderAdminFg": "#f15f71",
-	"noteHeaderAdminBg": "#5d282e",
-	"noteHeaderAcct": "#ccc",
-	"noteHeaderInfo": "#c0c0c0",
 	"autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)",
 	"autocompleteItemText": "rgba(0, 0, 0, 0.8)",
 	"autocompleteItemTextSub": "rgba(0, 0, 0, 0.3)",
@@ -43,6 +47,12 @@
 	"cwButtonHoverBg": "#bbc4ce",
 	"reactionPickerButtonHoverBg": "#eee",
 	"desktopHeaderBg": "#f7f7f7",
+	"desktopPostFormBg": "#fff6f6",
+	"desktopPostFormTextareaBg": "#fff",
+	"desktopPostFormTextareaFg": "#333",
+	"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.08)",
+	"desktopTimelineSrc": "#6f7477",
+	"desktopTimelineSrcHover": "#525a5f",
 	"mobileSignedInAsBg": "#fcfff5",
 	"mobileSignedInAsFg": "#2c662d",
 	"mobileSignoutBg": "#fff6f5",