ThemeSwitcher

Ready-made theme switching UI: 4 color families + light/dark/system. Uses useTheme internally; no props.

Usage

Try the one below — the whole docs site re-themes (the one in the navbar is the same component):

Behavior contract

Writes the choice to data-theme / data-mode on <html>
Persists to localStorage key lx-theme (JSON: { family, mode })
auto follows the system prefers-color-scheme
First-frame state depends on localStorage: wrap in <ClientOnly> (or equivalent mounted guard) when placed in server-rendered layout

API

No props / events / slots. Pair with themeBootScript to avoid a first-paint flash.