Theme Switching for Storybook Dark Mode and Tailwind

Submitted on May 18, 2023, 8:59 a.m.

[Update 2023-06-15] Updated to show how this can all be done with the @storybook/addon-styling plugin, and withThemeByClassName as opposed to withThemeByDataAttribute .

Here's a short PSA on how to quickly add a dark mode theme switcher to Storybook - without the use of a plugin.

Before we begin - there _is_ what appears to be an excellent plugin here https://storybook.js.org/addons/storybook-tailwind-dark-mode, which will use the default darkMode: 'class' setting in tailwind.config.js - and so this might just be the better option. ;-)

1) Configure Storybook for Tailwind support - here - https://storybook.js.org/recipes/tailwindcss 

2) Next - configure Preview.{jsx,tsx} as follows...

1import React from 'react'
2import type { Preview } from '@storybook/react'
3import '../src/styles/tailwind.css'
4import { withThemeByClassName } from '@storybook/addon-styling'
5
6const globalDecorator = (StoryFn, context) => {
7 const theme = context.parameters.theme || context.globals.theme
8 console.log(theme)
9 return (
10 <div
11 style={{
12 position: 'absolute',
13 top: 0,
14 left: 0,
15 width: '100vw',
16 height: '100vh',
17 padding: '12px',
18 overflow: 'auto',
19 backgroundColor:
20 theme == null || theme.length === 0 || theme === 'light' ? '#ffffff' : '#222233',
21 }}
22 >
23 <StoryFn />
24 </div>
25 )
26}
27
28export const decorators = [
29 globalDecorator,
30 withThemeByClassName({
31 themes: {
32 light: 'light',
33 dark: 'dark',
34 },
35 defaultTheme: 'light',
36 }),
37]
38
39const preview: Preview = {
40 parameters: {
41 actions: { argTypesRegex: '^on[A-Z].*' },
42 controls: {
43 matchers: {
44 color: /(background|color)$/i,
45 date: /Date$/,
46 },
47 },
48 },
49}
50
51export default preview

3). Change the darkMode detection method of Tailwind to...

darkMode: "class",

... and you should be good to go. Again, the Tailwind plugin above is likely the better solution, but this works as well and you'll have a nice theme switcher in the toolbar as follows...

Storybook screen shot