diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
index d3e258f052..7fd68002e7 100644
--- a/src/client/app/mobile/views/components/ui.header.vue
+++ b/src/client/app/mobile/views/components/ui.header.vue
@@ -70,9 +70,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.header
 	$height = 48px
 
 	position fixed
@@ -98,7 +96,7 @@ root(isDark)
 		color #fff
 
 	> .main
-		color rgba(#fff, 0.9)
+		color var(--mobileHeaderFg)
 
 		> .backdrop
 			position absolute
@@ -108,8 +106,7 @@ root(isDark)
 			height $height
 			-webkit-backdrop-filter blur(12px)
 			backdrop-filter blur(12px)
-			//background-color rgba(#1b2023, 0.75)
-			background-color isDark ? #313543 : #595f6f
+			background-color var(--mobileHeaderBg)
 
 		> .content
 			z-index 1001
@@ -171,10 +168,4 @@ root(isDark)
 				line-height $height
 				border-left solid 1px rgba(#000, 0.1)
 
-.header[data-darkmode]
-	root(true)
-
-.header:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index f5294f27cd..65e12d5247 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -128,6 +128,8 @@
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":lighten<10<$text",
 
+	"mobileHeaderBg": ":lighten<5<$secondary",
+	"mobileHeaderFg": "$text",
 	"mobileNavBackdrop": "rgba(0, 0, 0, 0.7)",
 	"mobileUserPageName": "#fff",
 	"mobileUserPageAcct": "$text",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 4776b2f3b3..4817663529 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -128,6 +128,8 @@
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":darken<10<$text",
 
+	"mobileHeaderBg": ":lighten<5<$secondary",
+	"mobileHeaderFg": "$text",
 	"mobileNavBackdrop": "rgba(0, 0, 0, 0.2)",
 	"mobileUserPageName": "#757c82",
 	"mobileUserPageAcct": "#969ea5",