Your app needs dark mode. Storybook can help 🌙

Add a color scheme switcher to Storybook

chantastic
Storybook

Newsletter

2 min readNov 16, 2022

--

Thumbnail of new video Dark Mode Done Right on the @storybookjs YouTube channel.

When WhatsApp added dark mode in 2020, they said it was “the most requested feature from users everywhere.” Whether it’s just stylistic preference or an effort to reduce eye strain, dark mode is on your users’ minds.

Storybook is the ideal environment to develop, document, and — with Chromatic — test every component in light and dark mode variants.

In this week’s YouTube tutorial, chantastic shows how to implement a theme switcher toolbar dropdown and integrate it with existing components.

This is dark mode, done right!

Check out the whole tutorial on Storybook’s YouTube Channel »

Automate interaction tests in CI with Chromatic
Automation is the secret sauce that helps reduce bugs by running checks on each commit. So, what’s the best way to integrate Storybook interaction tests into your CI workflow? Get started with this guide »

Animated graphic, demonstrating the storybook test-runner stepping thru UI state changes.

We’re hiring at Storybook!
Join the team behind Storybook + Chromatic. Build tools used by 100s of thousands of frontend developers. Remote-first. View all openings »

--

--