@bumped-inc/storybook-addon-emotion-theme v0.1.0

@bumped-inc/storybook-addon-emotion-theme

This allows you to customize emotion themes within storybook

Usage

In .storybook/main.js, add '@bumped-inc/storybook-addon-emotion-theme/register' to addons.

Example story

import styled, { CreateStyled } from '@emotion/styled';
import * as React from 'react';
import { withEmotionTheme } from './withEmotionTheme';

interface MyTheme {
  background: string;
  text: string;
}

export default {
  title: 'Demo',
  decorators: [
    // this could also be configured in .storybook/preview.js
    withEmotionTheme<MyTheme>({
      Light: {
        background: 'white',
        text: 'black',
      },
      Dark: {
        background: 'black',
        text: 'white',
      },
    }),
  ],
};

const Container = (styled as CreateStyled<MyTheme>).p`
  color: ${({ theme }) => theme.text};
  background-color: ${({ theme }) => theme.background};
`;

export const alpha = () => <Container>Alpha</Container>;
export const bravo = () => <Container>Bravo</Container>;

iFrames

When using the "Open canvas in new tab" feature, the URL that you are directed to looks something like http://localhost:6006/iframe.html?id=demo--alpha. If you wish to customize which theme is used, that can be done by adding &theme=MyThemeName as part of the query string. If the theme cannot be found or is not specified, then the first possible theme is used.