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 ▬▬▬▬▬▬▬▬▬▬

How to add a theme switcher to Storybook by Yann Braga: https://storybook.js.org/blog/how-to-...
Toolbars and globals documentation: https://storybook.js.org/docs/react/e...
Decorators documentation: https://storybook.js.org/docs/react/w...

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

Discord:   / discord  

Twitter:   / storybookjs  

Instagram:   / storybookjs  

GitHub: https://github.com/storybookjs/storybook

Follow ‪@chantastic‬ on:
twitter:   / chantastic  
youtube: ‪@chantastic‬

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

Storybook at https://learnstorybook.com/
Storybook addons at https://storybook.js.org/addons
Component driven UI development at https://www.componentdriven.org/

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

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

Claim free Storybook hosting at https://www.chromatic.com