Overview:

The Storybook SC ThemeProvider is an addon that allows users to display a Styled-Components ThemeProvider or a custom one in their Storybook. It works on both Storybook 5.x.x and 6.x.x versions and offers features such as switching background colors, compatibility with iframes or visual regression testing, and the ability to pass a custom implementation of a theme provider. The addon also includes a popup displaying all the current keys of the theme, which can be disabled if desired.

Features:

• Works on Storybook 5.x.x and 6.x.x: Compatible with both versions of Storybook.
• Switches background color: Ability to toggle between different background colors.
• Works on iframes or visual regression testing: Ensures compatibility when displaying within iframes or during visual regression testing.
• Allows passing a custom implementation of your own theme provider: Users can customize the theme provider to their specific needs.
• Displays a popup with all the current keys of the theme: Provides a convenient way to view all the keys of the theme.
• Ability to disable the popup: Users can choose to disable the popup if they prefer.
• Ability to copy a value from the theme: Makes it easy to copy individual values from the theme.

Installation:

To install the Storybook SC ThemeProvider addon, follow these steps:

1. Add the following line to your addons array inside the main.js file (create this file inside your Storybook config directory if needed):

addons: [
  // other addons...
  'storybook-sc-theme-provider',
],

2. Set options globally by importing and using the withThemesProvider function in your preview.js file.

import { withThemesProvider } from 'storybook-sc-theme-provider';

export const decorators = [
  withThemesProvider(),
  // other decorators...
];

Summary:

The Storybook SC ThemeProvider is a helpful addon for displaying Styled-Components ThemeProviders or custom ones in Storybook. It offers various features such as switching background colors, compatibility with iframes and visual regression testing, and the ability to pass a custom implementation of a theme provider. The addon also includes a popup displaying all the current keys of the theme, with the option to disable it if desired. Installation is straightforward and can be done by adding a line to the addons array in the main.js file and setting options globally in the preview.js file.