Storybook: How to get storybook dark styles as shown in React example?

[actraiser]

Sorry if this is obvious but I could not find any resource on how to switch my Storybook project to the dark theme as used in the official Example. I use Storybook 4.0.0-alpha.22.

Pointer on how to configure the theme would be appreciated.

Greets
-act

[Keraito]

Hey @actraiser, the repo and configuration for the official Storybook example can be found here: https://github.com/storybooks/storybook/blob/master/examples/official-storybook/config.js. It also includes the code necessary to get the dark theme. But having it somewhere in the docs would be better yeah, would you like to open a PR for it?

[actraiser]

Much appreciated, thanks for the link! I will have a look and eventually open a PR for the docs.

Greets
-act

[actraiser]

I just noticed there are docs on theming Storybook already in place in the documentation source: https://github.com/storybooks/storybook/blob/master/docs/src/pages/configurations/theming/index.md

It's just not reflected on the actual public storybook website yet over at https://storybook.js.org/configurations/theming

Greets
-act

[smks]

I tried adding in the config and the theme is not working.

import { addDecorator, configure } from "@storybook/react";
import { themes } from "@storybook/components";
import { withOptions } from "@storybook/addon-options";

addDecorator(
  withOptions({
    theme: themes.dark
  })
);

function loadStories() {
  require("../src/stories");
}

configure(loadStories, module);

[Keraito]

@smks Could you make a new issue and describe your context (like package versions) in slightly more detail? That way we can help you better

[spencersmb]

I had the same issue as @smks - however once I added:
import '@storybook/addon-options/register'
to addons.js -- everything worked.

[Ziv-Barber]

Not working also here. I added the same code to the config.js file as on the docs.
I do have import '@storybook/addon-options/register' on my addon.js file.

In package.json I have:

    "@storybook/addon-actions": "^4.1.13",
    "@storybook/addon-links": "^4.1.13",
    "@storybook/addon-options": "^4.1.13",
    "@storybook/addons": "^4.1.13",
    "@storybook/react": "^4.1.13",

It looks like the documentation is not updated with the last theme interface.

[supasole9]

ran npm update and it ended up working; Works with v.5

[LazaroOnline]

Also remember, in the \storybook\config.js it is needed to call addParameters() before calling configure()

//import { configure, addParameters } from '@storybook/vue'
import { configure, addParameters } from '@storybook/react'
import { themes } from '@storybook/theming'

addParameters({
options: {
    theme: themes.dark,
    // ...
    }
})

configure(...)