Preview components in different themes

[colebemis]

Background

Primer React components can be rendered in many different themes. See the Theming for more details.

Light	Dark

In fact, one of the criteria for a component to be alpha is that "the component is compatible with color modes and can adapt to different themes."

Problem

We don't have an easy way to preview components in different themes in documentation examples and Storybook.

Tasks

• Implement a way to preview components in different themes in documentation examples Simple select button for colorschemes and themeswitcher component #1466
• Implement a way to preview components in different themes in Storybook add colormode and colorscheme toggles to storybook toolbar #1436

[jfuchs]

Isn't this done for docs with cmd + ctrl + t? Do we want something more obvious like a visible switch in every example?

[SferaDev]

Isn't this done for docs with cmd + ctrl + t? Do we want something more obvious like a visible switch in every example?

I believe something like what ViewComponents documentation has

[pksjce]

Implement a way to preview components in different themes in documentation examples

@colebemis - You mentioned other colormodes? I couldn't find a reference to them. Could you link them for me?

[colebemis]

@pksjce All of the color schemes are listed here: https://github.com/primer/react/blob/main/src/theme-preval.js#L113-L132

You can access the list of color schemes in code with the useTheme hook:

import {useTheme} from '@primer/components'

function Component() {
  const {theme} = useTheme()
  // Object.keys(theme.colorSchemes) -> ['light', 'dark', 'dark_dimmed', 'dark_high_contrast']
}