diff --git a/src/client/app/common/views/components/note-header.vue b/src/client/app/common/views/components/note-header.vue
index 48dfae5f84..8192d88412 100644
--- a/src/client/app/common/views/components/note-header.vue
+++ b/src/client/app/common/views/components/note-header.vue
@@ -42,9 +42,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.bvonvjxbwzaiskogyhbwgyxvcgserpmu
 	display flex
 	align-items baseline
 	white-space nowrap
@@ -61,7 +59,7 @@ root(isDark)
 		margin 0 .5em 0 0
 		padding 0
 		overflow hidden
-		color isDark ? #fff : #627079
+		color var(--noteHeaderName)
 		font-size 1em
 		font-weight bold
 		text-decoration none
@@ -82,19 +80,19 @@ root(isDark)
 		margin 0 .5em 0 0
 		padding 1px 6px
 		font-size 80%
-		color isDark ? #758188 : #aaa
-		border solid 1px isDark ? #57616f : #ddd
+		color var(--noteHeaderBadgeFg)
+		background var(--noteHeaderBadgeBg)
 		border-radius 3px
 
 		&.is-admin
-			border-color isDark ? #d42c41 : #f56a7b
-			color isDark ? #d42c41 : #f56a7b
+			background var(--noteHeaderAdminBg)
+			color var(--noteHeaderAdminFg)
 
 	> .username
 		margin 0 .5em 0 0
 		overflow hidden
 		text-overflow ellipsis
-		color isDark ? #606984 : #ccc
+		color var(--noteHeaderAcct)
 		flex-shrink 2147483647
 
 	> .info
@@ -102,7 +100,7 @@ root(isDark)
 		font-size 0.9em
 
 		> *
-			color isDark ? #606984 : #c0c0c0
+			color var(--noteHeaderInfo)
 
 		> .mobile
 			margin-right 8px
@@ -115,10 +113,4 @@ root(isDark)
 		> .visibility
 			margin-left 8px
 
-.bvonvjxbwzaiskogyhbwgyxvcgserpmu[data-darkmode]
-	root(true)
-
-.bvonvjxbwzaiskogyhbwgyxvcgserpmu:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 14caf19224..aeaf547b72 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -16,6 +16,13 @@
 	"popupFg": "#d6dce2",
 	"modalBackdrop": "rgba(0, 0, 0, 0.5)",
 
+	"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)",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 7a039ef294..d4803389da 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -16,6 +16,13 @@
 	"popupFg": "#586069",
 	"modalBackdrop": "rgba(0, 0, 0, 0.1)",
 
+	"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)",