The marketing pages and auth screens had been wearing the wrong clothes. The dashboard had evolved into the Nebula Dark aesthetic — navy-slate surfaces, blue-violet accents, custom glow tokens. But the pages visitors see first — Home, Pricing, Login, Register — were still using the default theme. Two visual identities in one application, separated by a login screen.
The Nebula theme lives in a single CSS file: tokens-nebula.css. Full custom property overrides scoped under html.nebula. Navy-slate surfaces instead of pure black — #0b0d14 deep, #111320 dark, #181b2a solid. A blue-violet primary palette built in oklch color space with hue 270. Softer white text with blue undertones. Custom glow tokens for the background effects that give marketing pages their atmospheric depth.
A useNebulaTheme composable handles the class toggling — adds nebula and prime-dark to the HTML element on mount, restores the previous state on unmount. This replaced manual dark-mode toggle code that was duplicated across three auth pages. The composable got wired into every public-facing page: PublicLayout, Home, Pricing, TryDemo, Login, Register, ForgotPassword.
The CSS custom property override pattern is the reason this works without touching individual components. Every component that already uses var(--color-prime-*) tokens automatically picks up the Nebula palette. Add a class to the root element and the entire page transforms. No per-component overrides, no conditional stylesheets, no build-time theme compilation.
One gotcha worth remembering: PrimeVue's dark mode depends on the .prime-dark class. The composable initially only added .nebula, leaving PrimeVue Card and Panel components rendering in light mode on an otherwise dark page. Since the app defaults to light preference, the Nebula composable has to explicitly add both classes.