@storybook/addon-themes

`@storybook/addon-themes

Storybook Addon Themes can be used which between multiple themes for components inside the preview in Storybook.

Usage

Requires Storybook 7.0 or later. If you need to add it to your Storybook, you can run:

npm i -D @storybook/addon-themes

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

export default {
  addons: ['@storybook/addon-themes'],
};

👇 Tool specific configuration

For tool-specific setup, check out the recipes below

• @emotion/styled
• @mui/material
• bootstrap
• styled-components
• tailwind
• vuetify@3.x

Don't see your favorite tool listed? Don't worry! That doesn't mean this addon isn't for you. Check out the "Writing a custom decorator" section of the api reference.

❗️ Overriding theme

If you want to override your theme for a particular component or story, you can use the themes.themeOverride parameter.

import React from 'react';
import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  parameters: {
    themes: {
      themeOverride: 'light', // component level override
    },
  },
};

export const Primary = {
  args: {
    primary: true,
    label: 'Button',
  },
};

export const PrimaryDark = {
  args: {
    primary: true,
    label: 'Button',
  },
  parameters: {
    themes: {
      themeOverride: 'dark', // Story level override
    },
  },
};

Changelog

7.2.0

This month, we're going to experiment with our launch cycle by making smaller but more frequent releases. Our goal is to bring you new features more quickly, while also smoothing the upgrade process.

Storybook 7.2 is the first of these new, faster releases:

• Automigration: Fix wrap-require automigration for common js main.js files - #23644, thanks @valentinpalkovic!
• CSF Tools: Use recast for printing in csf-tools - #23427, thanks @kasperpeulen!
• CSF-tools: Parse stories using typescript keywords 'satisfies' and 'as' - #23638, thanks @joaonunomota!
• Core: Fix channelOptions for serverChannel - #23615, thanks @ndelangen!
• NextJS: Add @babel/core as a dependency - #22450, thanks @valentinpalkovic!
• Vite: Fix config loading - project directory - #22240, thanks @nVitius!
• Angular: Fix initialization of Storybook in Angular 16.1 - #23598, thanks @valentinpalkovic!
• Dependencies: Downgrade jest-mock - #23597, thanks @ndelangen!
• Dependencies: Upgrade simple-update-notifier - #23396, thanks @dartess!
• Storyshots: fix broken storyshots with angular - #23555, thanks @mattlewis92!
• TypeScript: Added expanded to CoreCommon_StorybookRefs to fix typescript errors - #23488, thanks @DotwoodMedia!
• TypeScript: Downgrade to the last version of type-fest that doesn't need typescript 5.0 - #23574, thanks @ndelangen!
• Vue2: Source Decorator reactivity - #23149, thanks @chakAs3!
• Router: Support RegExp in Route component - #23292, thanks @ndelangen!
• UI: Improve tabs component, more type correct, allow for FC as title - #23288, thanks @ndelangen!
• Addons: Improve code quality by using title as FC & sharing state via useAddonState - #23298, thanks @ndelangen!
• InteractionsAddon: Improve code quality by using title as FC & sharing state via useAddonState - #23291, thanks @ndelangen!
• UI: Add storyStatus to sidebar UI - #23342, thanks @ndelangen!
• Addon API: Add experimental page addon type - #23307, thanks @ndelangen!
• UI: refactor Canvas component so we can improve types for PREVIEW addons and TAB addons - #23311, thanks @ndelangen!
• UI: Improve Button layout and props - #23356, thanks @cdedreuille!
• Dependencies: Remove references to api and the 2 deprecated channel packages - #23384, thanks @ndelangen!
• UI: Show the story status in the search results - #23441, thanks @ndelangen!
• UI: Create new form elements in the new Core UI (Input, TextArea, Select) - #23469, thanks @cdedreuille!