diff --git a/website/resources/styles/_layouts.scss b/website/resources/styles/_layouts.scss index 24dd0f0..17adc39 100644 --- a/website/resources/styles/_layouts.scss +++ b/website/resources/styles/_layouts.scss @@ -134,17 +134,17 @@ } } -// Top navbar +// Top navbar — theme-aware .app-navbar { position: fixed; top: 0; right: 0; left: $sidebar-width; height: $navbar-height; - background: rgba($dark-bg, 0.8); + background: rgba(var(--v-theme-surface), 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); - border-bottom: 1px solid rgba(255, 255, 255, 0.06); + border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.06); z-index: $z-navbar; display: flex; align-items: center; @@ -181,11 +181,11 @@ margin-inline: auto; } -// Footer +// Footer — theme-aware .app-footer { padding: 16px 24px; font-size: 0.8125rem; - color: rgba(255, 255, 255, 0.4); + color: rgba(var(--v-theme-on-surface), 0.4); flex-shrink: 0; } diff --git a/website/resources/styles/_marketing.scss b/website/resources/styles/_marketing.scss index a67d796..f063f02 100644 --- a/website/resources/styles/_marketing.scss +++ b/website/resources/styles/_marketing.scss @@ -40,9 +40,12 @@ } } -// Glass morphism cards +// Glass morphism cards — theme-aware .glass-card { - @include glass-morphism(0.08, 20px); + background: rgba(var(--v-theme-surface), 0.6); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid rgba(var(--v-theme-on-surface), 0.08); border-radius: $radius-lg; transition: transform $transition-base, box-shadow $transition-base; @@ -52,9 +55,9 @@ } } -// Animated gradient text +// Animated gradient text — theme-aware .hero-gradient-text { - background: linear-gradient(135deg, $primary-light 0%, $info 50%, $primary-light 100%); + background: linear-gradient(135deg, rgb(var(--v-theme-primary)) 0%, $info 50%, rgb(var(--v-theme-primary)) 100%); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; diff --git a/website/resources/ts/Components/ThemeSwitcher.vue b/website/resources/ts/Components/ThemeSwitcher.vue index 622cb82..3ff8d89 100644 --- a/website/resources/ts/Components/ThemeSwitcher.vue +++ b/website/resources/ts/Components/ThemeSwitcher.vue @@ -1,10 +1,21 @@ diff --git a/website/resources/ts/plugins/vuetify/index.ts b/website/resources/ts/plugins/vuetify/index.ts index 8488036..dbc5ed6 100644 --- a/website/resources/ts/plugins/vuetify/index.ts +++ b/website/resources/ts/plugins/vuetify/index.ts @@ -7,10 +7,16 @@ import { themes } from './theme' import 'vuetify/styles' export default function installVuetify(app: App): void { - // Determine default theme based on subdomain - const hostname = typeof window !== 'undefined' ? window.location.hostname : '' - const isMarketing = !hostname.startsWith('account.') && !hostname.startsWith('admin.') - const defaultTheme = isMarketing ? 'light' : 'dark' + const saved = typeof window !== 'undefined' ? localStorage.getItem('ezscale-theme') : null + let defaultTheme: string + + if (saved === 'light' || saved === 'dark') { + defaultTheme = saved + } else { + const hostname = typeof window !== 'undefined' ? window.location.hostname : '' + const isMarketing = !hostname.startsWith('account.') && !hostname.startsWith('admin.') + defaultTheme = isMarketing ? 'light' : 'dark' + } const vuetify = createVuetify({ defaults,