ThemeToggle
A button that switches the site between light and dark mode, persisting the choice to localStorage and a cookie.
Installation
npx dafink-ui add theme-toggleDemo
Props
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | '' | Additional classes on the root button. |
Accessibility
ThemeToggle is a native <button type="button"> with no custom focus handling, so it's reachable via Tab and activatable with Enter or Space with no extra wiring. It has no aria-pressed: instead its aria-label always describes the action the next click performs ("Switch to light mode" / "Switch to dark mode") rather than the current state, so the resulting theme is announced by what the control will do next; the sun/moon icon is aria-hidden and carries no accessible information of its own.