configure storybook docs addon to display theme.dark

Question

I'm trying to configure storybook to display a dark theme, and so far i didn't find any solution to this problem.

so i followed the storybook docs, and i'v setup the manager.js file like so:

// .storybook/manager.js

import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';

addons.setConfig({
  theme: themes.dark,
});

i'v also printed the theme to the console so i see it arrives:

it may be worth mentioning that when the browser reload this file is read, but if i change the source code and save the hot-reload don't work..

Here's how i specified the same theme for docs in .storybook/preview.js:

// .storybook/preview.js

import React from "react";
import { appTheme } from "../src/Common/theme";
import { ThemeProvider } from "styled-components";
import { makeDecorator } from "@storybook/addons";
import { addParameters, addDecorator } from "@storybook/react";
import defaultNotes from "./general-docs.md";
import { themes } from "@storybook/theming";

export const parameters = {
  docs: {
    theme: themes.dark
  }
};

addParameters({
  notes: defaultNotes,
  options: {
    showRoots: true
  }
});

const withStyledTheme = storyFn => {
  return <ThemeProvider theme={appTheme}>{storyFn()}</ThemeProvider>;
};

const styledThemed = makeDecorator({
  name: "styled-theme",
  wrapper: withStyledTheme
});

addDecorator(styledThemed);
addParameters(parameters);

this is how the main.js file looks like:

module.exports = {
  stories: ["../src/**/*.stories.(ts|tsx|js|jsx|mdx)"],
  addons: [
    "@storybook/preset-create-react-app",
    "@storybook/addon-actions",
    "@storybook/addon-links",
    "@storybook/addon-actions/register",
    "@storybook/addon-knobs/register",
    "@storybook/addon-notes/register-panel",
    "storybook-addon-designs",
    "@storybook/addon-docs/preset"
  ]
};

i work with typescript in this project, so here is the tsconfig.json:

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "baseUrl": "src"
  },
  "include": ["src"]
}

What am i missing here ?

Answer 1

I've been stuck on the same problem for a while, but the solution was in the doc all along:

//.storybook/preview.js
import { themes } from '@storybook/theming';

export const parameters = {
  docs: {
    theme: themes.dark,
  },
};

So yeah, you have to specify the theme twice, in two different files