Theme your Web Apps like a PRO | Dark Mode in Storybook

How confident are you in your dark mode implementation? @chantastic shows how to implement a dark mode switcher using globalTypes — and all visually testable in Chromatic.

▬ Chapters ▬▬▬▬▬▬▬▬▬▬

00:00:00 Intro: implement dark mode components
00:00:30 Overview: use globals and decorators
00:00:51 Review theme-able Avatar component
00:01:41 Add a decorator to show both themes
00:02:13 Add a toolbar item to set color scheme
00:02:53 Respond to globals in decorators
00:03:23 Visually test all themes in Chromatic
00:03:55 Learn more about globals and visual testing…

▬ Links and resources ▬▬▬▬▬▬▬▬▬▬

▬ Follow us! ▬▬▬▬▬▬▬▬▬▬

Follow @chantastic on:
- youtube: @chantastic

▬ Learn more ▬▬▬▬▬▬▬▬▬▬

▬ Free Storybook hosting ▬▬▬▬▬▬▬▬▬▬

Chromatic is made by Storybook maintainers and sets up in just 2 minutes.

[dominicnguyen]

Seeing all themes at the same time is a huge time-saver. Automatically testing all themes at once is super handy too.

[AndrewOrtwein]

Thanks for laying this out so easily! Appa approves.

[spanwit]

Wow, that's really what I need. Thanks!

[IgorTsvetkoFF]

It is a high-quality useful video. thanks!

[rujor]

Very useful 👌. Is there a way to make this apply to all my stories in one go?

[mattburgess]

This doesn’t seem to quite do what I would need it to. It puts it on a dark background, but it doesn’t actually trigger the dark mode via prefers-color-scheme media query. So things like Tailwind “dark:” couldn’t be tested.

[SampurnBanerji-sn]

How can I use the library in my application and switch themes from there ?