ColorSchemeSwitch

Färgschemaväxlare

ColorSchemeSwitch låter användaren välja att visa applikationen i ljust läge, mörkt läge eller enligt inställningarna i webbläsaren/operativsystemet.

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

<ColorSchemeSwitch />

Varianter

ColorSchemeSwitch finns i två varianter: en version som visar alla tre alternativen och en kompakt version som bara visar det aktiva läget.

Fullstor

Den fullstora ColorSchemeSwitch visar alla tre alternativen (ljust, mörkt, system) i en rad. Den är lämplig att använda i situationer där det finns gott om plats, t.ex. i en inställningspanel.

Kompakt

ColorSchemeSwitchMenu är en kompakt variant som bara visar det aktiva läget. Valet görs via en meny. Den är lämplig att använda i situationer när det är ont om plats, t.ex. i Header.

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

<ColorSchemeSwitchMenu />

Min applikation

Användning

API:t är identiskt i båda varianter. selector, defaultScheme, scheme och onSchemeChange fungerar på samma sätt.

Standardvärde

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

<ColorSchemeSwitch defaultScheme='dark' />

Selector

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

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

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

Spara val i localStorage

Använd onSchemeChange för att reagera på användarens val. Det kan till exempel användas för att spara valet 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