Manual v0.1 // Component Library
The Theme
Toggle
"One click, one class on <html>, one localStorage key. Light/dark for sites that don't run Nuxt's color-mode module."
Toggles a .light class on <html> and remembers it in localStorage. Built for plain Vue/Vite projects like echov2 that don't have @nuxtjs/color-mode, this docs site uses that instead, so the live demo below only controls its own button, not the rest of the page.
Each button below is a real, separate <ThemeToggle> instance. Click one and it flips the page's actual theme class, but the other two won't visually catch up until you refresh, since each keeps its own local state. That's genuine component behaviour (you'd only ever mount one per page in practice), not a demo bug.
01 / LABEL
default
echov2 header
<ThemeToggle />
02 / ICON
sun-moon
echov2 header
<ThemeToggle variant="icon" />
03 / ICON
lamp
echov2 header
<ThemeToggle variant="icon" icon="lamp" />
Icon reference
Every state, side by side, since the live buttons above only ever show one at a time.
Sun
variant="icon", light state
Moon
variant="icon", dark state
Lamp (lit)
icon="lamp", light state
Lamp (unlit)
icon="lamp", dark state
How to use
import { ThemeToggle } from "echo-ui";<ThemeToggle variant="icon" icon="sun-moon" />variant accepts label (default, emoji + text via darkLabel/lightLabel props) or icon. icon accepts sun-moon (default) or lamp, only matters when variant="icon". Default slot still exposes :is-dark if you want to render something else entirely.
Base rule
defaults to dark, toggles a .light class, persists via localStorage
Source
echo-ui/components/ThemeToggle.vue