Table of Contents

Color scheme provider

The Color scheme provider provides current color scheme data and persistence to all of the components it contains.

Table of Contents

How to use it
- Default
Configuration
API
- ColorSchemeProvider

Used for this

To determine a user’s current color scheme
To update and store a user’s color scheme preference (light, dark, or system)

Not for this

To apply dark or light mode styling to components, set colors.base on the Theme object instead

How to use it

Default

The typical usage of a color scheme provided to and updated by a wrapped application.

Configuration

Name9.5.3•View source•View on npm
Installnpm install @zendeskgarden/react-theming
Depsnpm install react react-dom styled-components
Importimport { ColorSchemeProvider } from '@zendeskgarden/react-theming'

API

ColorSchemeProvider

Provides context for the current color scheme. The useColorScheme hook can be used within this context to access and update the current color scheme.

Prop name	Type	Default	Description
colorSchemeKey	string	'color-scheme'	Specifies the key used to store the user's preferred color scheme in `localStorage`
initialColorScheme	ColorScheme	system	Sets the initial color scheme and provides `localStorage` persistence (see the `useColorScheme` hook). A user's stored preference overrides this value.