ColorSchemeProvider

ColorSchemeProvider is an optional React context provider to enable dark mode

Props

Component props
Name
Type
Default
colorScheme
"light" | "dark" | "userPreference"
"light"

The color scheme for components inside the ColorSchemeProvider. Use 'userPreference' to allow the end user to specify the color scheme via their browser settings, using the 'prefers-color-scheme' media query. See color scheme variant for examples.

id
string
-

An optional id for your color scheme provider. If not passed in, settings will be applied as globally as possible (ex. setting color scheme variables at :root).

Variants

Color scheme

Specify a light or dark color scheme for components

Some content

Link / Button / IconButton / TapArea / DropDown / Callout / Upsell / ActivationCard
If these components are under a ColorSchemeProvider, their link behavior defaults to the logic defined in ColorSchemeProvider. In order to disable the onNavigation logic, we can return "dangerouslyDisableOnNavigation" in the onClick callback. See each component page for more information.