#059
Basic
Theme toggle button rendered inside a rail container.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Basic" pattern (@codeatlasdev/ui demo #059, inputs/theme-toggle) in my app.
Call get_demo({ ids: ["#059"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Letting users switch between light and dark appearance from a sidebar or header.
Keep these library parts, with the props and tokens the demo uses:
- ThemeToggle from "@codeatlasdev/ui"
Behaviour to keep:
- `<ThemeToggle />` with no props
- Wrapped in `<div class="rail">`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- ThemeToggle
@codeatlasdev/ui
How it is built
- `<ThemeToggle />` with no props
- Wrapped in `<div class="rail">`
Related
Loading source.