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' />

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.
defaultValue	Set<ColorScheme>	-	@deprecated since v17.9.0 Use defaultScheme instead.
className	string	-