ColorSchemeSwitch

Färgschemaväxlare

Storybook

ColorSchemeSwitch låter användaren välja mellan ljust läge, mörkt läge eller att följa systemets inställning.

import { ColorSchemeSwitch } from '@midas-ds/components'

<ColorSchemeSwitch />

Selector

Som standard påverkas :root, men du kan rikta mot ett annat element med selector-propen. Det är användbart om du bara vill byta färgschema för en avgränsad del av sidan.

<ColorSchemeSwitch selector='#min-widget' />

Bakgrunden och texten ändras beroende på valt läge.

Standardvärde

defaultScheme styr vilket läge som är förvalt. Standardvärdet är 'light dark', vilket innebär att systemets inställning används.

<ColorSchemeSwitch defaultScheme='dark' />

Spara val i localStorage

Använd onSchemeChange för att reagera på användarens val — till exempel för att spara det i localStorage och återställa det vid nästa sidladdning.

const savedScheme = localStorage.getItem('color-scheme') as ColorScheme | null

<ColorSchemeSwitch
  defaultScheme={savedScheme ?? 'light dark'}
  onSchemeChange={scheme => localStorage.setItem('color-scheme', scheme)}
/>

För ett fullt kontrollerat flöde, kombinera scheme med onSchemeChange:

const [scheme, setScheme] = useState<ColorScheme>(
  () => (localStorage.getItem('color-scheme') as ColorScheme) ?? 'light dark'
)

<ColorSchemeSwitch
  scheme={scheme}
  onSchemeChange={s => {
    setScheme(s)
    localStorage.setItem('color-scheme', s)
  }}
/>

API

Name	Type	Default	Description
selector	string	:root	The CSS selector for the element to apply the color scheme to.
defaultScheme	ColorScheme	light dark	The default color scheme. Use 'light dark' to follow the system setting.
scheme	ColorScheme	-	The controlled color scheme. When provided, the component becomes controlled — pair with onSchemeChange to update it.
defaultValue	Set<ColorScheme>	-	@deprecated since v17.9.0 Use defaultScheme instead.
className	string	-