diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index d0148eef58..31b3a3ab18 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -216,9 +216,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-notes
 	.transition
 		.mk-notes-enter
 		.mk-notes-leave-to
@@ -235,8 +233,8 @@ root(isDark)
 			line-height 32px
 			font-size 14px
 			text-align center
-			color isDark ? #666b79 : #aaa
-			background isDark ? #242731 : #fdfdfd
+			color var(--dateDividerFg)
+			background var(--dateDividerBg)
 			border-bottom solid 1px var(--faceDivider)
 
 			span
@@ -266,15 +264,9 @@ root(isDark)
 			border-bottom-right-radius 6px
 
 			&:hover
-				background isDark ? #2e3440 : #f5f5f5
+				background var(--footerButtonHover)
 
 			&:active
-				background isDark ? #21242b : #eee
-
-.mk-notes[data-darkmode]
-	root(true)
-
-.mk-notes:not([data-darkmode])
-	root(false)
+				background var(--footerButtonActive)
 
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index aeaf547b72..b3d233d45f 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -15,6 +15,10 @@
 	"popupBg": "#2c303c",
 	"popupFg": "#d6dce2",
 	"modalBackdrop": "rgba(0, 0, 0, 0.5)",
+	"dateDividerBg": "#242731",
+	"dateDividerFg": "#666b79",
+	"footerButtonHover": "#2e3440",
+	"footerButtonActive": "#21242b",
 
 	"noteHeaderName": "#fff",
 	"noteHeaderBadgeFg": "#758188",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index d4803389da..87f384a200 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -15,6 +15,10 @@
 	"popupBg": "#fff",
 	"popupFg": "#586069",
 	"modalBackdrop": "rgba(0, 0, 0, 0.1)",
+	"dateDividerBg": "#fdfdfd",
+	"dateDividerFg": "#aaa",
+	"footerButtonHover": "#f5f5f5",
+	"footerButtonActive": "#eee",
 
 	"noteHeaderName": "#627079",
 	"noteHeaderBadgeFg": "#aaa",