Dark Mode#

When you click the dark mode toggle at the top right of a vitro app all the stories on the page gets re-rendered with an additional prop isDark set to true

When the dark mode is enabled all your stories components and wrappers will receive a prop isDark set to true

This way you can handle the color mode state yourself, adding a react context in the wrapper for example

tsx
1
import { ColorModeProvider } from '@chakra-ui/system'
2
3
export default {
4
    title: 'Example',
5
    wrapper: ({ isDark, isFullScreen, children }) => (
6
        <ColorModeProvider value={isDark ? 'dark' : 'light'}>
7
            <ThemeProvider>{children}</ThemeProvider>
8
        </ColorModeProvider>
9
    ),
10
}
11
12
export const MyExperiment = ({ isDark }) => (
13
    <div>dark mode is {isDark ? 'enabled' : 'disabled'}</div>
14
)

You can use a global wrapper to add dark mode state to all your stories

tsx
1
import { ColorModeProvider } from '@chakra-ui/system/src'
2
3
import React from 'react'
4
5
export const Wrapper = ({ isDark, children }) => (
6
    <ColorModeProvider value={isDark ? 'dark' : 'light'}>
7
        <ThemeProvider>{children}</ThemeProvider>
8
    </ColorModeProvider>
9
)
10
11
export default Wrapper