Description
- A dark/light mode toggle in the Storybook toolbar allows previewing all components in both light and dark mode. Clicking the sun/moon icon in the top nav switches themes instantly.
- The toggle applies the same
body.dark-mode class used in the production app, so Storybook rendering matches what users see.
- Previously there was no way to preview components in dark mode without running the full app.
Ideal workflow
A designer or engineer opens Storybook, clicks the theme toggle once, and sees every component rendered in dark mode — no need to navigate to the running app or toggle settings there.
To view
- Run
yarn storybook
- Go to
http://localhost:6006
- View the toggle on the top allows dark mode to be viewed for every component
Description
body.dark-modeclass used in the production app, so Storybook rendering matches what users see.Ideal workflow
A designer or engineer opens Storybook, clicks the theme toggle once, and sees every component rendered in dark mode — no need to navigate to the running app or toggle settings there.
To view
yarn storybookhttp://localhost:6006