ColorSchemeProvider

ColorSchemeProvider is an optional React context provider to enable dark mode.

also known as Dark Mode, Dark Theme

Props

Component props
Name	Type	Default
`children` Required	`React.Node`	-
`colorScheme`	`"light" \| "dark" \| "userPreference"`	-
	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).

Accessibility

Accessibility not available

Variants

Color scheme

Specify a light or dark color scheme for components

function Example(props) {
  const [scheme, setScheme] = React.useState('light')
  return (
    <ColorSchemeProvider colorScheme={scheme} id="docsExample">
      <Box color="white" padding={2}>
        <SelectList
          id="scheme"
          name="scheme"
          onChange={({ value }) => setScheme(value)}
          placeholder="Select color scheme"
          label="Color scheme"
          value={scheme}
        >
          {[
            { value: 'light', label: 'Light' },
            { value: 'dark', label: 'Dark' },
            { value: 'userPreference', label: 'User Preference' }
          ].map(({ label, value }) =>
            <SelectList.Option key={label} label={label} value={value} />
          )}
        </SelectList>
        <Box padding={2}>
          <Text>Some content</Text>
        </Box>
        <Button text="Example button"/>
        <Button color="red" text="Red Button" />
      </Box>
    </ColorSchemeProvider>
  );
}

function Example(props) {
  const [scheme, setScheme] = React.useState('light')
  return (
    <ColorSchemeProvider colorScheme={scheme} id="docsExample">
      <Box color="white" padding={2}>
        <SelectList
          id="scheme"
          name="scheme"
          onChange={({ value }) => setScheme(value)}
          placeholder="Select color scheme"
          label="Color scheme"
          value={scheme}
        >
          {[
            { value: 'light', label: 'Light' },
            { value: 'dark', label: 'Dark' },
            { value: 'userPreference', label: 'User Preference' }
          ].map(({ label, value }) =>
            <SelectList.Option key={label} label={label} value={value} />
          )}
        </SelectList>
        <Box padding={2}>
          <Text>Some content</Text>
        </Box>
        <Button text="Example button"/>
        <Button color="red" text="Red Button" />
      </Box>
    </ColorSchemeProvider>
  );
}

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library		Component is not currently available in Figma.
Responsive Web	Ready	Component is available in code for web and mobile web.
iOS		Component is not currently available in code for iOS.
Android		Component is not currently available in code for Android.

Edit page on GitHub

; Opens a new tab