Hooks useTheme

useTheme

Light, dark or the system’s — as a class on <html>, or on one element — remembered in localStorage.

Preview

theme

light

resolvedTheme

light

Usage

tsx

import { useTheme } from "zostel-ui";

const { theme, resolvedTheme, setTheme, toggleTheme } = useTheme();
setTheme("dark");

// theme one part of the page only, and don't remember it
const panel = useRef<HTMLDivElement>(null);
const { toggleTheme } = useTheme("light", { target: panel, storageKey: false });

Arguments

Prop	Type	Default	Description
`defaultTheme`	`"light" \| "dark" \| "system"`	`"light"`	Before a choice is made. Also the first render, on the server and in the browser.
`options.target`	`RefObject<HTMLElement>`	`<html>`	The element that gets the light / dark class.
`options.storageKey`	`string \| false`	`"zostel-ui-theme"`	Where the choice is remembered; false to not remember.

defaultTheme

Type: "light" | "dark" | "system"

Default: "light"

Before a choice is made. Also the first render, on the server and in the browser.

options.target

Type: RefObject<HTMLElement>

Default: <html>

The element that gets the light / dark class.

options.storageKey

Type: string | false

Default: "zostel-ui-theme"

Where the choice is remembered; false to not remember.

Returns

Prop	Type	Default	Description
`theme`	`"light" \| "dark" \| "system"`	—	The choice.
`resolvedTheme`	`"light" \| "dark"`	—	What shows (system resolved).
`setTheme`	`(theme) => void`	—	Choose, and remember.
`toggleTheme`	`() => void`	—	Light ↔ dark.

theme

Type: "light" | "dark" | "system"

Default: —

The choice.

resolvedTheme

Type: "light" | "dark"

Default: —

What shows (system resolved).

setTheme

Type: (theme) => void

Default: —

Choose, and remember.

toggleTheme

Type: () => void

Default: —

Light ↔ dark.

How it works

The class switches the semantic colour variables (--color-background, --color-foreground…) defined for .dark in the stylesheet. Only components drawn with the semantic colours follow; brand colours stay as they are.