Skip to content
Star

Persisted Dark Mode Toggle

PxThemeSwitch is a controlled boolean input — it doesn't touch the DOM or localStorage on its own (see Theming → Dark mode). This recipe wires it up completely: apply the .dark class the library's CSS variables key off of, remember the choice, and respect the OS preference on first visit.

Dark Mode Toggle

Why the class goes on <html>, not a wrapper <div>

Praxis Vue's .dark overrides live on the .dark class itself (.dark { --ui-primary: ...; } in base.css), so it works no matter where you apply it in the ancestor chain. Putting it on document.documentElement (<html>) rather than a local wrapper means dark mode also affects anything outside your Vue app's mount point — the native <body> background, browser-native form controls, and any static HTML shell around your SPA.

If you only want to theme part of a page, apply .dark to that container instead — the CSS variables cascade normally.

Built with VitePress