diff --git a/src/client/app/common/views/components/cw-button.vue b/src/client/app/common/views/components/cw-button.vue
index 06087edc93..79917f82ab 100644
--- a/src/client/app/common/views/components/cw-button.vue
+++ b/src/client/app/common/views/components/cw-button.vue
@@ -22,23 +22,17 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.nrvgflfuaxwgkxoynpnumyookecqrrvh
 	display inline-block
 	padding 4px 8px
 	font-size 0.7em
-	color isDark ? #393f4f : #fff
-	background isDark ? #687390 : #b1b9c1
+	color var(--cwButtonFg)
+	background var(--cwButtonBg)
 	border-radius 2px
 	cursor pointer
 	user-select none
 
 	&:hover
-		background isDark ? #707b97 : #bbc4ce
-
-.nrvgflfuaxwgkxoynpnumyookecqrrvh[data-darkmode]
-	root(true)
-
-.nrvgflfuaxwgkxoynpnumyookecqrrvh:not([data-darkmode])
-	root(false)
+		background var(--cwButtonHoverBg)
 
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 5a8e1ce8f6..14caf19224 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -19,6 +19,9 @@
 	"autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)",
 	"autocompleteItemText": "rgba(255, 255, 255, 0.8)",
 	"autocompleteItemTextSub": "rgba(255, 255, 255, 0.3)",
+	"cwButtonBg": "#687390",
+	"cwButtonFg": "#393f4f",
+	"cwButtonHoverBg": "#707b97",
 	"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
 	"desktopHeaderBg": "#313543",
 	"mobileSignedInAsBg": "#273c34",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 4ae10b5cad..7a039ef294 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -19,6 +19,9 @@
 	"autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)",
 	"autocompleteItemText": "rgba(0, 0, 0, 0.8)",
 	"autocompleteItemTextSub": "rgba(0, 0, 0, 0.3)",
+	"cwButtonBg": "#b1b9c1",
+	"cwButtonFg": "#fff",
+	"cwButtonHoverBg": "#bbc4ce",
 	"reactionPickerButtonHoverBg": "#eee",
 	"desktopHeaderBg": "#f7f7f7",
 	"mobileSignedInAsBg": "#fcfff5",