Beta

ThemeSwitcher

ThemeSwitcher er en kontrollert radiogruppe for å velge mellom de fire fargetemaene i designsystemet: Ild, Luft, Vann og Jord. Ved valg settes data-theme-attributtet på <html>-elementet automatisk.

Importering

import { ThemeSwitcher } 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" />;

Når colorMode er satt, vil data-theme settes som "ild-dark" i stedet for "ild".

Bruksanbefalinger

Bruk som kontrollert komponent

ThemeSwitcher er alltid kontrollert — hold tema-tilstanden i en overordnet komponent og synkroniser den med f.eks. en cookie eller localStorage.

Ikke vis flere ThemeSwitchere samtidig

Ha kun én ThemeSwitcher i grensesnittet, ellers kan bruker ende opp med motstridende tema-valg.

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

Prop	Type	Default	Beskrivelse
`theme`	`"ild" \| "luft" \| "vann" \| "jord"`	—	Gjeldende valgt tema (påkrevd)
`onThemeChange`	`(theme: Theme) => void`	—	Kalles når brukeren velger et nytt tema (påkrevd)
`size`	`"default" \| "sm"`	`"default"`	Størrelse
`colorMode`	`"light" \| "dark" \| "system"`	`"system"`	Fargemodus som kombineres med temanavnet