Closed colebemis closed 3 years ago
Isn't this done for docs with cmd
+ ctrl
+ t
? Do we want something more obvious like a visible switch in every example?
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
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?
@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']
}
Background
Primer React components can be rendered in many different themes. See the Theming for more details.
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