ThemeSwitcher

Kildekode på GitHub · Les som Markdown

ThemeSwitcher er en kontrollert radiogruppe for å velge mellom de fire fargetemaene i designsystemet: Ild, Luft, Vann og Jord. Ved valg settes tema-attributtene (data-brand, data-theme og data-color-scheme) på <html>-elementet automatisk. Sett applyToDocument={false} hvis appen styrer temaet selv (f.eks. via cookie og server-rendering).

Importering

import { ThemeSwitcher, applyThemeToDocument } from "@kilden/designsystem";

Grunnleggende bruk

function Demo() {
const [theme, setTheme] = React.useState("ild");
return (
  <ThemeSwitcher
    theme={theme}
    onThemeChange={setTheme}
  />
);
}
render(<Demo />)

Størrelser

Standard

<ThemeSwitcher theme={theme} onThemeChange={setTheme} />

Kompakt

function Demo() {
const [theme, setTheme] = React.useState("vann");
return (
  <ThemeSwitcher
    theme={theme}
    onThemeChange={setTheme}
    size="sm"
  />
);
}
render(<Demo />)

Fargemodus

colorMode-prop styrer om temaet settes med lys, mørk eller systemets fargemodus. Standard er "system".

{
  /* Tving lys modus */
}
<ThemeSwitcher theme={theme} onThemeChange={setTheme} colorMode="light" />;
 
{
  /* Tving mørk modus */
}
<ThemeSwitcher theme={theme} onThemeChange={setTheme} colorMode="dark" />;

ThemeSwitcher setter data-brand="bekk" og data-theme (f.eks. "bekk-ild") på <html>. Når colorMode er "light" eller "dark", settes også data-color-scheme. Med "system" fjernes det, og operativsystemet bestemmer.

Styr temaet selv

Med applyToDocument={false} endrer ikke ThemeSwitcher <html>. Bruk hjelperen applyThemeToDocument(theme, colorMode) når du selv vil sette temaet, f.eks. etter å ha lagret valget:

<ThemeSwitcher
  theme={theme}
  applyToDocument={false}
  onThemeChange={(next) => {
    setTheme(next);
    saveThemeCookie(next);
    applyThemeToDocument(next, colorMode); // setter f.eks. data-theme="bekk-ild" og data-color-scheme="dark"
  }}
/>

Bruksanbefalinger

Tilgjengelighet

• Rendres som en role="radiogroup" med aria-label="Velg tema"
• Hvert tema er en role="radio"-knapp med aria-checked
• Fullt tastaturtilgjengelig — Tab for fokus, Enter/Space for valg

Props