Theme

Dark, light or the system's: ThemeProvider, ThemeScript against the flash, and ThemeToggle.

Web + MobileStableUtilitaires et marque

Web et mobile — le même composant pour React et React Native. Stable : son API ne change qu’à une version majeure.

Pourquoi il est là. Used by Orochia, Orazaka, Yasakia, krizaka.com.

Quand l’utiliser

Once per app, in the root layout: ThemeScript in <head>, ThemeProvider around the app.
ThemeToggle in the header or the settings, to cycle dark → light → system.
useTheme() to read or set the mode from your own control.

Quand ne pas l’utiliser

To theme one area differently: put .theme-light or .theme-dark on the subtree instead.
To change a product's colours: override the --kz-* tokens in its design system.

Installation

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { ThemeProvider, ThemeScript, ThemeToggle, useTheme } from "@krizaka/ui/theme";

Exemples

Toggle

A ghost icon button in its provider.

Another look

Any button variant and shape.

Props

ThemeProvider

Prop	Type	Défaut	Description
`defaultMode`	`Mode`	`system`	The mode before the visitor chooses one (nothing persisted as `kz-theme`) — pass the same value to `ThemeScript`.

ThemeScript

In <head>, before anything renders: applies the persisted mode (else defaultMode) and named theme, so the page never flashes. nonce for a strict Content-Security-Policy.

Prop	Type	Défaut	Description
`defaultMode`	`Mode`	`system`	The mode before the visitor chooses one — pass the same value as `ThemeProvider`'s `defaultMode`. A persisted choice (`kz-theme`) always wins.
`nonce`	`string`	—	The nonce of a strict Content-Security-Policy (`script-src 'nonce-…'`).

ThemeToggle

An icon button (styled as IconButton, without its Slot) that cycles dark → light → system. Needs a <ThemeProvider> above it. State: data-mode.

Prop	Type	Défaut	Description
`label`requis	`string \| ((mode: Mode) => string)`	—	The accessible name — a string, or one per current mode (e.g. `(mode) => t("theme." + mode)`).
`shape`	`"rounded" \| "pill" \| "cut"`	`rounded`	rounded · pill.
`variant`	`"danger" \| "primary" \| "gradient" \| "secondary" \| "outline" \| "ghost"`	`ghost`	Any `Button` variant.

Accessibilité

ThemeToggle is a button named by label (translated); its icon shows the current mode.
color-scheme follows the theme, so native controls and scrollbars match.

Clavier

Touches	Action
`Enter / Space`	The toggle cycles to the next mode.

Bonnes pratiques

Put <ThemeScript /> in <head> and suppressHydrationWarning on <html>: the right theme is applied before the first paint.
A product that is dark (or light) first passes the same defaultMode to ThemeScript and ThemeProvider; the visitor's choice still wins.
The choice is persisted as kz-theme and applied as html.light: every Krizaka app reads the same switch.
Check every screen in both themes.

Générée depuis le code de @krizaka/ui 3.10.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub