# ThemeSwitcher > Radiogruppe for å bytte mellom designsystemets fargetemaer. [Kildekode på GitHub](https://github.com/bekk/designsystem/blob/main/packages/designsystem/src/ui/theme-switcher.tsx) 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å ``-elementet automatisk. ## Importering ```tsx ``` ## Grunnleggende bruk ); } render()`} /> ## Størrelser ### Standard ```tsx ``` ### Kompakt ); } render()`} /> ## Fargemodus `colorMode`-prop styrer om temaet settes med lys, mørk eller systemets fargemodus. Standard er `"system"`. ```tsx { /* Tving lys modus */ } ; { /* Tving mørk modus */ } ; ``` Når `colorMode` er satt, vil `data-theme` settes som `"ild-dark"` i stedet for `"ild"`. ## Bruksanbefalinger - **Gjør: 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. - **Unngå: 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 |