{"id":14977444,"url":"https://github.com/styled-components/storybook-dark-mode","last_synced_at":"2025-10-02T11:31:22.919Z","repository":{"id":57163315,"uuid":"448120014","full_name":"styled-components/storybook-dark-mode","owner":"styled-components","description":"A storybook addon that lets your users toggle between dark and light mode.","archived":false,"fork":true,"pushed_at":"2022-01-14T23:30:24.000Z","size":2256,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-09-29T00:01:45.671Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"hipstersmoothie/storybook-dark-mode","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/styled-components.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-14T22:07:05.000Z","updated_at":"2023-05-13T10:38:07.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/styled-components/storybook-dark-mode","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styled-components%2Fstorybook-dark-mode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styled-components%2Fstorybook-dark-mode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styled-components%2Fstorybook-dark-mode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styled-components%2Fstorybook-dark-mode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/styled-components","download_url":"https://codeload.github.com/styled-components/storybook-dark-mode/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234983180,"owners_count":18917433,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-24T13:55:40.825Z","updated_at":"2025-10-02T11:31:22.555Z","avatar_url":"https://github.com/styled-components.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# storybook-dark-mode\n\nA storybook addons that lets your users toggle between dark and light mode.\n\n![Example](./example.gif)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i --save-dev storybook-dark-mode\n```\n\nor with yarn:\n\n```sh\nyarn add -D storybook-dark-mode\n```\n\nThen, add following content to `.storybook/main.js`\n\n```js\nmodule.exports = {\n  addons: ['storybook-dark-mode']\n};\n```\n\n## Configuration\n\nConfigure the dark and light mode by adding the following to your `.storybook/preview.js` file:\n\n```js\nimport { themes } from '@storybook/theming';\n\nexport parameters = {\n  darkMode: {\n    // Override the default dark theme\n    dark: { ...themes.dark, appBg: 'black' },\n    // Override the default light theme\n    light: { ...themes.normal, appBg: 'red' }\n  }\n};\n```\n\n### Default Theme\n\nOrder of precedence for the initial color scheme:\n\n1. If the user has previously set a color theme it's used\n2. The value you have configured for `current` parameter in your storybook\n3. The OS color scheme preference\n\nOnce the initial color scheme has been set, subsequent reloads will use this value.\nTo clear the cached color scheme you have to `localStorage.clear()` in the chrome console.\n\n```js\nexport parameters = {\n  darkMode: {\n    // Set the initial theme\n    current: 'light'\n  }\n};\n```\n\n### Dark/Light Class\n\nThis plugin will apply a dark and light class name to the manager.\nThis allows you to easily write dark mode aware theme overrides for the storybook UI.\n\nYou can override the classNames applied when switching between light and dark mode using the `darkClass` and `lightClass` parameters.\n\n```js\nexport parameters = {\n  darkMode: {\n    darkClass: 'lights-out',\n    lightClass: 'lights-on'\n  }\n};\n```\n\n### Preview class target\n\nThis plugin will apply the dark/light class to the `\u003cbody\u003e` element of the preview iframe. This can be configured with the `classTarget` parameter.\nThe value will be passed to a `querySelector()` inside the iframe.\n\nThis is useful if the `\u003cbody\u003e` is styled according to a parent's class, in that case it can be set to `html`.\n\n```js\nexport parameters = {\n  darkMode: {\n    classTarget: 'html'\n  }\n}\n```\n\n## Story integration\n\n### Preview ClassName\n\nThis plugin will apply the `darkClass` and `lightClass` classes to the preview iframe if you turn on the `stylePreview` option.\n\n```js\nexport parameters = {\n  darkMode: {\n    stylePreview: true\n  }\n};\n```\n\n### React\n\nIf your components use a custom Theme provider, you can integrate it by using the provided hook.\n\n```js\nimport { useDarkMode } from 'storybook-dark-mode';\nimport { addDecorator } from '@storybook/react';\n\n// your theme provider\nimport ThemeContext from './theme';\n\n// create a component that uses the dark mode hook\nfunction ThemeWrapper(props) {\n  // render your custom theme provider\n  return (\n    \u003cThemeContext.Provider value={useDarkMode() ? darkTheme : defaultTheme}\u003e\n      {props.children}\n    \u003c/ThemeContext.Provider\u003e\n  );\n}\n\nexport const decorators = [renderStory =\u003e \u003cThemeWrapper\u003e{renderStory()}\u003c/ThemeWrapper\u003e)];\n```\n\n#### Theme Knobs\n\nIf you want to have you UI's dark mode separate from you components' dark mode, implement this global decorator:\n\n```js\nimport { themes } from '@storybook/theming';\n\n// Add a global decorator that will render a dark background when the\n// \"Color Scheme\" knob is set to dark\nconst knobDecorator = (storyFn) =\u003e {\n  // A knob for color scheme added to every story\n  const colorScheme = select('Color Scheme', ['light', 'dark'], 'light');\n\n  // Hook your theme provider with some knobs\n  return React.createElement(ThemeProvider, {\n    // A knob for theme added to every story\n    theme: select('Theme', Object.keys(themes), 'default'),\n    colorScheme,\n    children: [\n      React.createElement('style', {\n        dangerouslySetInnerHTML: {\n          __html: `html { ${\n            colorScheme === 'dark' ? 'background-color: rgb(35,35,35);' : ''\n          } }`\n        }\n      }),\n      storyFn()\n    ]\n  });\n}\n\nexport const decorators = [knobDecorator];\n```\n\n### Events\n\nYou can also listen for the `DARK_MODE` event via the addons channel.\n\n```js\nimport addons from '@storybook/addons';\nimport { addDecorator } from '@storybook/react';\n\n// your theme provider\nimport ThemeContext from './theme';\n\n// get channel to listen to event emitter\nconst channel = addons.getChannel();\n\n// create a component that listens for the DARK_MODE event\nfunction ThemeWrapper(props) {\n  // this example uses hook but you can also use class component as well\n  const [isDark, setDark] = useState(false);\n\n  useEffect(() =\u003e {\n    // listen to DARK_MODE event\n    channel.on('DARK_MODE', setDark);\n    return () =\u003e channel.off('DARK_MODE', setDark);\n  }, [channel, setDark]);\n\n  // render your custom theme provider\n  return (\n    \u003cThemeContext.Provider value={isDark ? darkTheme : defaultTheme}\u003e\n      {props.children}\n    \u003c/ThemeContext.Provider\u003e\n  );\n}\n\nexport const decorators = [renderStory =\u003e \u003cThemeWrapper\u003e{renderStory()}\u003c/ThemeWrapper\u003e)];\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://hipstersmoothie.com\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAndrew Lisowski\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#question-hipstersmoothie\" title=\"Answering Questions\"\u003e💬\u003c/a\u003e \u003ca href=\"https://github.com/hipstersmoothie/storybook-dark-mode/commits?author=hipstersmoothie\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#design-hipstersmoothie\" title=\"Design\"\u003e🎨\u003c/a\u003e \u003ca href=\"https://github.com/hipstersmoothie/storybook-dark-mode/commits?author=hipstersmoothie\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#ideas-hipstersmoothie\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://trutoo.com/people/erik-hughes\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/455178?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eErik Hughes\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/hipstersmoothie/storybook-dark-mode/commits?author=Swiftwork\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://adamyonk.com\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/33258?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAdam Jahnke\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/hipstersmoothie/storybook-dark-mode/commits?author=adamyonk\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/carlesnunez\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/5639972?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eCarles Núñez\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/hipstersmoothie/storybook-dark-mode/commits?author=carlesnunez\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://adamdierkens.com\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/13004162?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAdam Dierkens\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/hipstersmoothie/storybook-dark-mode/commits?author=adierkens\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://skarhed.com\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/1438972?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTobias Skarhed\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/hipstersmoothie/storybook-dark-mode/commits?author=tskarhed\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/hipstersmoothie/storybook-dark-mode/commits?author=tskarhed\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://fatihkalifa.com\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/1614415?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eFatih Kalifa\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/hipstersmoothie/storybook-dark-mode/commits?author=pveyes\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.jacobcoughenour.com\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/5546400?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJacob Coughenour\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/hipstersmoothie/storybook-dark-mode/commits?author=jacobcoughenour\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://twitter.com/jpzwarte\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/3968?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJeroen Zwartepoorte\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/hipstersmoothie/storybook-dark-mode/commits?author=jpzwarte\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/hipstersmoothie/storybook-dark-mode/commits?author=jpzwarte\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://claritydev.net\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/8878045?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlex Khomenko\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/hipstersmoothie/storybook-dark-mode/commits?author=Clarity-89\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.linkedin.com/in/paulfasola/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1634645?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePaul Fasola\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/hipstersmoothie/storybook-dark-mode/commits?author=PaulFasola\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://pavelkeyzik.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/17102399?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePavel Keyzik\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/hipstersmoothie/storybook-dark-mode/commits?author=pavelkeyzik\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://dricholm.github.io/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/32329112?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDavid Richolm\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/hipstersmoothie/storybook-dark-mode/commits?author=dricholm\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/hipstersmoothie/storybook-dark-mode/commits?author=dricholm\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://klausnygard.fi\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/2855908?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKlaus Nygård\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/hipstersmoothie/storybook-dark-mode/commits?author=nygardk\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyled-components%2Fstorybook-dark-mode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstyled-components%2Fstorybook-dark-mode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyled-components%2Fstorybook-dark-mode/lists"}