Sun
Paper / black
The choice stays. The grid does not move.
Theme toggle
Switches between light and dark schemes. The icon changes and the choice persists locally.
Preview
In action
When to use
Use it for
- Letting the reader pick light or dark and remembering it.
- Top-right of the page chrome; rs-theme-toggle-inline for a spot in the flow.
Not for
- Pages that should follow the system only; leave it out and the system preference applies.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { ThemeToggle } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/theme-toggle.
2. Vendor the source
npx @noorddev/vlak-cli add theme-toggle
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/theme-toggle.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { ThemeToggle } from "@noorddev/vlak-react";
<ThemeToggle storageKey="vlak-theme" onThemeChange={(dark) => track(dark)} />Props
ThemeToggle
One filled family mark on a 24px square, about 18–20px of drawn ink. Moon on paper, sun on black. The button sets data-theme="dark" on <html> and persists the choice. Apps pin it top-right; catalog and previews use the inline modifier. The name states the action ("Switch to dark scheme"), so it changes with the state.
| Prop | Type | Default | Description |
|---|---|---|---|
storageKey | string | "vlak-theme" | localStorage key the choice persists under. |
onThemeChange | (dark: boolean) => void |
Also accepts Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange">.
Keyboard
| Keys | Does |
|---|---|
| Tab | Moves focus to the button |
| Enter, Space | Switches the scheme |
Accessibility
- A native <button> whose aria-label states the action ("Switch to dark scheme" or "Switch to light scheme").
- The target mode is shown with the filled Vlak moon or sun, on a 24px icon square inside a 44px target.
- Sets an explicit data-theme="light" or data-theme="dark" on <html> and stores the choice under storageKey; read it early in your document to avoid a flash.
Markup
<button type="button" class="rs-theme-toggle rs-theme-toggle-inline" aria-label="Switch to dark scheme"><svg class="rs-icon rs-theme-moon" aria-hidden="true" viewBox="0 0 16 16" width="24" height="24" fill="currentColor" stroke="none"><path d="M13.5 8.5 A5.5 5.5 0 1 1 7.5 2.5 A4.5 4.5 0 0 0 13.5 8.5 Z"/></svg></button>
Classes
.rs-theme-toggle.rs-theme-toggle-inline.rs-theme-sun.rs-theme-moon