Skip to content

chore: Add dark mode toggle to storybook

Simon Knox requested to merge psi-dark-switch into main

What does this MR do?

Add storybook dark mode toggle, to allow easily viewing components in light or dark mode.

Moon icon to toggle dark mode, slightly misaligned

Screen_Recording_2022-05-20_at_4.23.06_pm

Many components will not display correctly in dark mode, because we are using the light mode stylesheet. So components that set background/text color need values updated to use CSS custom properties. So this is a good chance to start using some more meaningful component-specific variable names rather than just color literals.

Adds minimal overrides to set body bg/text color, then we can start updating components to use CSS custom properties instead of SCSS variables (or update the SCSS variables to be CSS custom properties).

Why does my component work on gitlab but not storybook?

On gitlab were are loading a different stylesheet with values inverted. That worked for a time but comes with some downsides, and we want to get rid of that. This way we can make gitlab-ui support dark mode with less historical baggage.

How to update my component to support dark mode

Coming in a future MR

Edited by Simon Knox

Merge request reports