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