diff --git a/src/client/app/common/views/components/reactions-viewer.vue b/src/client/app/common/views/components/reactions-viewer.vue
index c30fa2a1d..9212a84b3 100644
--- a/src/client/app/common/views/components/reactions-viewer.vue
+++ b/src/client/app/common/views/components/reactions-viewer.vue
@@ -39,10 +39,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
-	$borderColor = isDark ? #5e6673 : #eee
-	border-top dashed 1px $borderColor
-	border-bottom dashed 1px $borderColor
+.mk-reactions-viewer
+	border-top dashed 1px var(--reactionViewerBorder)
+	border-bottom dashed 1px var(--reactionViewerBorder)
 	margin 4px 0
 
 	&:empty
@@ -60,12 +59,6 @@ root(isDark)
 		> span
 			margin-left 4px
 			font-size 1.2em
-			color isDark ? #d1d5dc : #444
-
-.mk-reactions-viewer[data-darkmode]
-	root(true)
-
-.mk-reactions-viewer:not([data-darkmode])
-	root(false)
+			color var(--text)
 
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 44a8e0e56..39828e364 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -69,6 +69,8 @@
 
 	"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
 
+	"reactionViewerBorder": "rgba(255, 255, 255, 0.1)",
+
 	"urlPreviewBorder": "rgba(0, 0, 0, 0.4)",
 	"urlPreviewBorderHover": "rgba(255, 255, 255, 0.2)",
 	"urlPreviewTitle": "$text",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 8dd4b1fe7..2c45a5770 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -69,6 +69,8 @@
 
 	"reactionPickerButtonHoverBg": "#eee",
 
+	"reactionViewerBorder": "rgba(0, 0, 0, 0.1)",
+
 	"urlPreviewBorder": "rgba(0, 0, 0, 0.1)",
 	"urlPreviewBorderHover": "rgba(0, 0, 0, 0.2)",
 	"urlPreviewTitle": "$text",