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",