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

Web + MobileStableFondations

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

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@beta @krizaka/tailwind@beta @krizaka/tokens@beta 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.

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

export default function ThemeToggleExample() {
  return (
    <ThemeProvider>
      <ThemeToggle label="Change the theme" />
    </ThemeProvider>
  );
}

Another look

Any button variant and shape.

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

// The toggle takes any button variant and shape.
export default function ThemeToggleSecondary() {
  return (
    <ThemeProvider>
      <ThemeToggle label="Change the theme" variant="secondary" shape="pill" />
    </ThemeProvider>
  );
}

Props

ThemeProvider

Prop	Type	Défaut	Description
`defaultMode`	`Mode`	`system`	The mode before anything is persisted.

ThemeScript

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

Prop	Type	Défaut	Description
`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"`	`rounded`	rounded · pill.
`variant`	`"danger" \| "primary" \| "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.
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 2.0.0-beta.6 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Theme