diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
index d3e258f05298596ab7552ae123b2327c1a3a4d90..7fd68002e78977dc16fcdabb891d95eb1b47faf0 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 f5294f27cd7112e33a3425e603594265b2a220c7..65e12d52479831fe53dbda8fdecc04dda64c1983 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 4776b2f3b331605defca06cd744fc00d5e4cddc3..4817663529c840bff002dbed2e4d0996ddcffa3b 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",