Components
ThemeToggle
A switch between the light and dark themes.
A switch between the light and dark themes. The same one that sits in this site's header.
Example
Тема сайта:
import { ThemeToggle } from "@toimetdev/pathlogs-core";
<ThemeToggle
labels={{ toDark: "Dark theme", toLight: "Light theme", action: "Toggle theme" }}
/>The icons lie on top of one another and swap by rotating — the switch reads as a single movement rather than a picture being replaced.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
storageKey | string | "theme" | The key in localStorage. Must match the key passed to themeScript(). |
labels | { toDark?, toLight?, action? } | — | The hover tooltip in each state, and the button's accessible name. |
className | string | — | Extra classes. |
storageKeystringdefaults to: "theme"
The key in localStorage. Must match the key passed to themeScript().
labels{ toDark?, toLight?, action? }The hover tooltip in each state, and the button's accessible name.
classNamestringExtra classes.
A switch of your own — with three states, or a dropdown — is built on the useTheme hook: it gives you both the user's choice and what is actually on screen.