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
-

Context lets a parent component provide data to the entire tree below it. Only components within the ColorSchemeProvider tree will be able to subscribe to it.

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.

fullDimensions
boolean
false

Sets the dimensions of the outputted <div> to 100% width and height.

id
?string
-

Use with caution! Set an id in your provider to limit the scope of the provider to just the children. This should only be used for cases where you want to enable dark mode in delimited sections to examplify dark mode itself.
If not passed in, settings will be applied as globally as possible (ex. setting color scheme variables at :root). A global implementation is critical for displaying dark mode correctly: when dark mode is not set globally, React Portal-based components, mostly Popovers and Tooltips, will not render in dark mode. The main ColorSchemeProvider in your app should NOT have an id set.

Accessibility

Variants

Color scheme

Specify a light or dark color scheme for components

import { useState } from 'react';
import {
  Box,
  Button,
  ButtonGroup,
  ColorSchemeProvider,
  Flex,
  SelectList,
  Text,
} from 'gestalt';

export default function Example() {
  const [scheme, setScheme] = useState('light');

  return (
    <Flex
      alignItems="center"
      gap={4}
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <ColorSchemeProvider colorScheme={scheme} id="docsExample">
        <Box color="default" padding={2}>
          <Flex direction="column" gap={8}>
            <SelectList
              id="scheme"
              label="Color scheme"
              name="scheme"
              onChange={({ value }) => setScheme(value)}
              placeholder="Select 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>

            <Flex direction="column" gap={2}>
              <Text>Some content</Text>
              <ButtonGroup>
                <Button text="Example button" />
                <Button color="red" text="Red Button" />
              </ButtonGroup>
            </Flex>
          </Flex>
        </Box>
      </ColorSchemeProvider>
    </Flex>
  );
}

Component quality checklist

Component quality checklist
Quality item
Status
Status description
Figma Library
Component is not currently available in Figma.
Responsive Web
Ready
Component responds to changing viewport sizes in web and mobile web.

Internal documentation