Is it possible to take a snapshot in dark mode?
Closed this issue · 7 comments
You have a cool feature to capture snapshots for different viewports - https://www.chromatic.com/docs/viewports but I didn't manage to find an option to capture a snapshot for dark mode.
The only thing that I've found is #341 -> which is closed ~1 year ago :(
Our components must support dark mode and it would be great to be able to see how they look in Chromatic.
Hi Andrii,
We don't currently have support for "variants" other than viewports. It did recently come up in internal discussions so it's still under consideration and will likely be supported eventually. No timeline on that though.
For the time being, you can setup a decorator which renders your components twice (e.g. stacked or side-by-side), one light and one dark. This is what Storybook does.
@ghengeveld This however is not going to work with play functions, right?
Unless you setup your play function to take into account there's two identical UIs on the same canvas, then no. It can be done though. You could totally extract the play function's statements to a separate function that takes a canvas argument, and from your play function you invoke it twice, once with the light container as the "canvas" and again for the dark container.
This would require adjusting all play functions throughout the codebase. The approach does not seem to work in certain cases as well, like stories on modal windows. We decided to create another storybook and deploy it to a separate chromatic project, essentially repurposing the monorepo feature: https://www.chromatic.com/docs/monorepos.
The other issue with duplicating the story is that things like htmlFor and focussing on components does not work correctly.