ColorMode
A molecule to set light / dark color mode on a website.
We provide both ColorModeToggle and ColorModeScript to make sure the color mode setting is persisted in local storage, this value is retrieved by the ColorModeScript, and changeable with the ColorModeToggle.
Basic usage
Begin by adding the ColorModeScript to the head of your site. This will make sure there isn’t a flash of the incorrect color mode as the page is loaded. If you’d like to dig into what this script looks like, please do .
This component should sit inside the user settings page when logged in. This component should not be used in the Footer of your site, this is design decision.
import { ColorModeToggle } from '@krakentech/coral-molecules';
<ColorModeToggle />Properties
label
<ColorModeToggle label="Custom label" />darkLabel
<ColorModeToggle darkLabel="Custom dark label" />lightLabel
<ColorModeToggle lightLabel="Custom light label" />toggleDefaultValue
<ColorModeToggle toggleDefaultValue="light" />Last updated on