Components

Theme Toggle

Switches between the dark and light themes, remembering the choice itself or leaving it to your app.

Switch the theme

Import

import { ThemeToggle, ThemeScript } from '@rinzai/zen';

Examples

Your state

The theme kept by your app (state here; an account setting, a cookie or a database in yours): the toggle shows value, and onValueChange applies the new one. This one themes just its panel, so target keeps the water inside it.

Preview

This panel is light; the page around it stays as it is.

API reference

<ThemeToggle>

Switches between the dark and light themes; the new theme spreads from the button like a drop of water (themeWave).

On its own, it switches <html>'s class and remembers the choice (localStorage): add ThemeScript to <head> to apply it on the next visit. Give it value and onValueChange and the theme is yours: it shows value and leaves applying and storing the choice to onValueChange (in your state, a database, a cookie…). With target too, it switches the theme of one element (a panel, a preview), and the water stays inside it.

Prop	Type	Default
`className`	`string`	`—`
`onValueChange` Called with the theme switched to.	`((theme: Appearance) => void)`	`—`
`storageKey` localStorage key for the choice, when the toggle keeps it. Use the same one in ThemeScript.	`string`	`theme`
`target` The element whose theme `onValueChange` switches, when it's not the page (a panel with its own .dark or .light): the wave plays inside it. Needs `value`.	`RefObject<HTMLElement \| null>`	`—`
`value` The theme, when you keep it: the toggle shows it, and `onValueChange` must apply the new one (by the end of a synchronous render and its effects). Without it, the toggle switches <html>'s class itself.	`Appearance`	`—`

<ThemeScript>

Put in <head>: applies the remembered theme before the first paint, so a light-theme visitor never sees a dark flash on page load.

Prop	Type	Default
`storageKey`	`string`	`theme`