wip

src/client/app/mobile/views/components/ui.nav.vue

@@ -121,10 +121,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
+.nav
-
+	$color = var(--text)
-root(isDark)
-	$color = isDark ? #c9d2e0 : #777
 
 	.backdrop
 		position fixed
@@ -133,7 +131,7 @@ root(isDark)
 		z-index 1025
 		width 100%
 		height 100%
-		background isDark ? rgba(#000, 0.7) : rgba(#000, 0.2)
+		background var(--mobileNavBackdrop)
 
 	.body
 		position fixed
@@ -144,7 +142,7 @@ root(isDark)
 		height 100%
 		overflow auto
 		-webkit-overflow-scrolling touch
-		background isDark ? #16191f : #fff
+		background var(--secondary)
 
 	.me
 		display block
@@ -265,10 +263,4 @@ root(isDark)
 	opacity: 0;
 }
 
-.nav[data-darkmode]
-	root(true)
-
-.nav:not([data-darkmode])
-	root(false)
-
 </style>

src/client/theme/dark.json

@@ -12,6 +12,7 @@
 
 	"primary": "$primary",
 	"primaryForeground": "#fff",
+	"secondary": "$secondary",
 	"bg": ":darken<8<$secondary",
 	"text": "$text",
 
@@ -127,6 +128,7 @@
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":lighten<10<$text",
 
+	"mobileNavBackdrop": "rgba(0, 0, 0, 0.7)",
 	"mobileUserPageName": "#fff",
 	"mobileUserPageAcct": "$text",
 	"mobileUserPageDescription": "$text",

src/client/theme/light.json

@@ -12,6 +12,7 @@
 
 	"primary": "$primary",
 	"primaryForeground": "#fff",
+	"secondary": "$secondary",
 	"bg": ":darken<8<$secondary",
 	"text": "$text",
 
@@ -127,6 +128,7 @@
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":darken<10<$text",
 
+	"mobileNavBackdrop": "rgba(0, 0, 0, 0.2)",
 	"mobileUserPageName": "#757c82",
 	"mobileUserPageAcct": "#969ea5",
 	"mobileUserPageDescription": "#757c82",