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
-

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

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"
              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>

            <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.