<commit_before>---
id: 'theming'
title: 'Theming Storybook'
---

Storybook is theme-able! You can change theme variables using the [options parameter](../options-parameter).

## Set a theme

You can do this in a decorator, an addon or in `.storybook/config.js`. Changing theme at runtime is also supported!

Just modify `.storybook/config.js` to include your new options:

```js
import { addParameters, configure } from '@storybook/react';

addParameters({
  options: {
    theme: {},
  },
});
```

When setting a theme, set a full theme object. The theme is replaced not combined.

View more [addon options in the master branch](https://github.com/storybooks/storybook/tree/master/addons/options).

## Get a theme

We have created two themes for you: "normal" (a light theme) and "dark" (a dark theme).

Here's an example of using the "dark" theme:

```js
import { addParameters, configure } from '@storybook/react';
import { themes } from '@storybook/theming';

// Option defaults.
addParameters({
  options: {
    name: 'Foo',
    theme: themes.dark,
  },
});
```

## Create a theme quickstart

The `storybook/theming` is built using TypeScript, so this should help create a valid theme for typescript users. The types are part of the package itself.

The easiest way to customize Storybook is to generate a new theme using the `create()` function from `storybook/theming`. This function includes shorthands for the most common theme variables. Here's how to use it:

First create a new file in `.storybook` called `yourTheme.js`.

Next paste the code below and tweak the variables.

```ts
import { create } from '@storybook/theming';

export default create({
  base: 'light',

  colorPrimary: 'hotpink',
  colorSecondary: 'deepskyblue',
<commit_msg>Remove deprecated info on Theme's doc<commit_after>---
id: 'theming'
title: 'Theming Storybook'
---

Storybook is theme-able! You can change theme variables using the [options parameter](../options-parameter).

## Set a theme

You can do this in a decorator, an addon or in `.storybook/config.js`. Changing theme at runtime is also supported!

Just modify `.storybook/config.js` to include your new options:

```js
import { addParameters, configure } from '@storybook/react';

addParameters({
  options: {
    theme: {},
  },
});
```

When setting a theme, set a full theme object. The theme is replaced not combined.

View more [addon options in the master branch](https://github.com/storybooks/storybook/tree/master/addons/options).

## Get a theme

We have created two themes for you: "normal" (a light theme) and "dark" (a dark theme).

Here's an example of using the "dark" theme:

```js
import { addParameters, configure } from '@storybook/react';
import { themes } from '@storybook/theming';

// Option defaults.
addParameters({
  options: {
    theme: themes.dark,
  },
});
```

## Create a theme quickstart

The `storybook/theming` is built using TypeScript, so this should help create a valid theme for typescript users. The types are part of the package itself.

The easiest way to customize Storybook is to generate a new theme using the `create()` function from `storybook/theming`. This function includes shorthands for the most common theme variables. Here's how to use it:

First create a new file in `.storybook` called `yourTheme.js`.

Next paste the code below and tweak the variables.

```ts
import { create } from '@storybook/theming';

export default create({
  base: 'light',

  colorPrimary: 'hotpink',
  colorSecondary: 'deepskyblue',

{'fraction_non_alphanumeric': 0.10959294050668944, 'fraction_numerical': 0.0, 'mean_word_length': 4.1982248520710055, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3217374', 'n_tokens_mistral': 1029, 'n_tokens_neox': 995, 'n_words': 441}