npmpackage.info

storybook-dark-mode

A storybook addon that lets your users toggle between dark and light mode.

4.0.2

444

MIT

TypeScript

35,229,671 2.7

Installations

npm install storybook-dark-mode

Pull Requests

Open

18

Total

208

Closed

82

Merged

108

Issues

Open

31

Total

77

Closed

46

Releases

v4.0.2

Published on 19 Jun 2024

v4.0.1

Published on 18 Mar 2024

v4.0.0

Published on 15 Mar 2024

v3.0.3

Published on 26 Nov 2023

v3.0.2

Published on 26 Nov 2023

v3.0.1

Published on 28 Jul 2023

View all 49 releases

Developer

hipstersmoothie

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

18.20.3

NPM Version

10.7.0 Statistics

444 Stars

434 Commits

56 Forks

7 Watching

19 Branches

35 Contributors

Updated on 27 Nov 2024

Languages

TypeScript (87.03%)

JavaScript (12.97%)

Total Downloads

Cumulative downloads

Total Downloads

35,229,671

Last day

0.4%

59,225

Compared to previous day

Last week

3.2%

305,291

Compared to previous week

Last month

11.7%

1,360,824

Compared to previous month

Last year

10%

13,224,989

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

storybook-dark-mode

A storybook addons that lets your users toggle between dark and light mode.

Example

Installation

Install the following npm module:

1npm i --save-dev storybook-dark-mode

or with yarn:

1yarn add -D storybook-dark-mode

Then, add following content to .storybook/main.js

1module.exports = {
2  addons: ['storybook-dark-mode']
3};

Upgrade from earlier version

Change in .storybook/main.js

1module.exports = {
2-  addons: ['storybook-dark-mode/register']
3+  addons: ['storybook-dark-mode']
4};

Configuration

Configure the dark and light mode by adding the following to your .storybook/preview.js file:

1import { themes } from '@storybook/theming';
2
3export const parameters = {
4  darkMode: {
5    // Override the default dark theme
6    dark: { ...themes.dark, appBg: 'black' },
7    // Override the default light theme
8    light: { ...themes.normal, appBg: 'red' }
9  }
10};

Default Theme

Order of precedence for the initial color scheme:

If the user has previously set a color theme it's used
The value you have configured for current parameter in your storybook
The OS color scheme preference

Once the initial color scheme has been set, subsequent reloads will use this value. To clear the cached color scheme you have to localStorage.clear() in the chrome console.

1export const parameters = {
2  darkMode: {
3    // Set the initial theme
4    current: 'light'
5  }
6};

Dark/Light Class

This plugin will apply a dark and light class name to the manager. This allows you to easily write dark mode aware theme overrides for the storybook UI.

You can override the classNames applied when switching between light and dark mode using the darkClass and lightClass parameters.

1export const parameters = {
2  darkMode: {
3    darkClass: 'lights-out',
4    lightClass: 'lights-on'
5  }
6};

You can also pass an array to apply multiple classes.

1export const parameters = {
2  darkMode: {
3    darkClass: ['lights-out', 'foo'],
4    lightClass: ['lights-on', 'bar']
5  }
6};

Preview class target

This plugin will apply the dark/light class to the <body> element of the preview iframe. This can be configured with the classTarget parameter. The value will be passed to a querySelector() inside the iframe.

This is useful if the <body> is styled according to a parent's class, in that case it can be set to html.

1export const parameters = {
2  darkMode: {
3    classTarget: 'html'
4  }
5};

Story integration

Preview ClassName

This plugin will apply the darkClass and lightClass classes to the preview iframe if you turn on the stylePreview option.

1export const parameters = {
2  darkMode: {
3    stylePreview: true
4  }
5};

React

If your components use a custom Theme provider, you can integrate it by using the provided hook.

1import { useDarkMode } from 'storybook-dark-mode';
2import { addDecorator } from '@storybook/react';
3
4// your theme provider
5import ThemeContext from './theme';
6
7// create a component that uses the dark mode hook
8function ThemeWrapper(props) {
9  // render your custom theme provider
10  return (
11    <ThemeContext.Provider value={useDarkMode() ? darkTheme : defaultTheme}>
12      {props.children}
13    </ThemeContext.Provider>
14  );
15}
16
17export const decorators = [renderStory => <ThemeWrapper>{renderStory()}</ThemeWrapper>)];

Theme Knobs

If you want to have you UI's dark mode separate from you components' dark mode, implement this global decorator:

1import { themes } from '@storybook/theming';
2
3// Add a global decorator that will render a dark background when the
4// "Color Scheme" knob is set to dark
5const knobDecorator = storyFn => {
6  // A knob for color scheme added to every story
7  const colorScheme = select('Color Scheme', ['light', 'dark'], 'light');
8
9  // Hook your theme provider with some knobs
10  return React.createElement(ThemeProvider, {
11    // A knob for theme added to every story
12    theme: select('Theme', Object.keys(themes), 'default'),
13    colorScheme,
14    children: [
15      React.createElement('style', {
16        dangerouslySetInnerHTML: {
17          __html: `html { ${
18            colorScheme === 'dark' ? 'background-color: rgb(35,35,35);' : ''
19          } }`
20        }
21      }),
22      storyFn()
23    ]
24  });
25};
26
27export const decorators = [knobDecorator];

Events

You can also listen for the DARK_MODE event via the addons channel.

1import { addons } from '@storybook/preview-api';
2import { addDecorator } from '@storybook/react';
3import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
4
5// your theme provider
6import ThemeContext from './theme';
7
8// get channel to listen to event emitter
9const channel = addons.getChannel();
10
11// create a component that listens for the DARK_MODE event
12function ThemeWrapper(props) {
13  // this example uses hook but you can also use class component as well
14  const [isDark, setDark] = useState(false);
15
16  useEffect(() => {
17    // listen to DARK_MODE event
18    channel.on(DARK_MODE_EVENT_NAME, setDark);
19    return () => channel.off(DARK_MODE_EVENT_NAME, setDark);
20  }, [channel, setDark]);
21
22  // render your custom theme provider
23  return (
24    <ThemeContext.Provider value={isDark ? darkTheme : defaultTheme}>
25      {props.children}
26    </ThemeContext.Provider>
27  );
28}
29
30export const decorators = [renderStory => <ThemeWrapper>{renderStory()}</ThemeWrapper>)];

Since in docs mode, Storybook will not display its toolbar, You can also trigger the UPDATE_DARK_MODE event via the addons channel if you want to control that option in docs mode, By editing your .storybook/preview.js.

1import React from 'react';
2import { addons } from '@storybook/preview-api';
3import { DocsContainer } from '@storybook/addon-docs';
4import { themes } from '@storybook/theming';
5
6import {
7  DARK_MODE_EVENT_NAME,
8  UPDATE_DARK_MODE_EVENT_NAME
9} from 'storybook-dark-mode';
10
11const channel = addons.getChannel();
12
13export const parameters = {
14  darkMode: {
15    current: 'light',
16    dark: { ...themes.dark },
17    light: { ...themes.light }
18  },
19  docs: {
20    container: props => {
21      const [isDark, setDark] = React.useState();
22
23      const onChangeHandler = () => {
24        channel.emit(UPDATE_DARK_MODE_EVENT_NAME);
25      };
26
27      React.useEffect(() => {
28        channel.on(DARK_MODE_EVENT_NAME, setDark);
29        return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark);
30      }, [channel, setDark]);
31
32      return (
33        <div>
34          <input type="checkbox" onChange={onChangeHandler} />
35          <DocsContainer {...props} />
36        </div>
37      );
38    }
39  }
40};

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Andrew Lisowski} 💬 💻 🎨 📖 🤔 🚇 🚧 💡	_{Erik Hughes} 💻	_{Adam Jahnke} 💻	_{Carles Núñez} 💻	_{Adam Dierkens} 💻	_{Tobias Skarhed} 💻 📖	_{Fatih Kalifa} 💻
_{Jacob Coughenour} 💻	_{Jeroen Zwartepoorte} 📖 💻	_{Alex Khomenko} 💻	_{Paul Fasola} 📖	_{Pavel Keyzik} 📖	_{David Richolm} 📖 💻	_{Klaus Nygård} 💻
_{Arturo Silva} 📖 💻	_{Nikki Pantony} 📖 💻	_{Ian VanSchooten} 💻	_Fabien 📖 💻	_nilscox 💻	_{Jack Westbrook} 💻	_{Ryan McHenry} 📖 💻
_{Clay Risser} 📖 💻	_{Beltrán Rengifo} 💻	_erik-d 📖	_{Christopher Dura} 📖 💻	_{An Dang} 💻	_{Zeno Jiricek} 💻	_{Steven Sacks} 📖 🚇 💻
_{Rohan Poojary} 📖 🚇 💻	_{Lauri Luotola} 💡 💻	_{Adam Gołąb} 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.7

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to storybook-dark-mode

@styled/storybook-dark-mode

1.1.5

Fork of storybook-dark-mode that fixes applying the appropriate classes when viewing a story in a new window iframe.

storybook-tailwind-dark-mode

1.0.22

Toggle stories between light and dark mode using tailwind

@csstools/postcss-light-dark-function

2.0.7

Use the light-dark() color function in CSS

@primer/primitives

9.1.2

Typography, spacing, and color primitives for Primer design system

storybook-dark-mode

Installations

Pull Requests

18

208

82

108

Issues

31

77

46

Releases

Developer

hipstersmoothie

Developer Guide

CommonJS

Yes

18.20.3

10.7.0

Statistics

Languages

Total Downloads

35,229,671

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

storybook-dark-mode

Installation

Upgrade from earlier version

Configuration

Default Theme

Dark/Light Class

Preview class target

Story integration

Preview ClassName

React

Theme Knobs

Events

Contributors ✨

10

10

10

2

0

0

0

0

0

0

0

0

0

2.7

/10

Other packages similar to storybook-dark-mode