Switch between emotion themes in Storybook

.storybook-config.js

import React, {Fragment} from 'react'
import {ThemeProvider} from 'emotion-theming'

import {configure, addDecorator} from '@storybook/react'

import DarkTheme from '../src/styles/themes/Dark'
import LightTheme from '../src/styles/themes/Light'

import {withKnobs} from '@storybook/addon-knobs'
import {select} from '@storybook/addon-knobs'


addDecorator(story => {
  const themeObjects = {
    dark: DarkTheme,
    light: LightTheme,
  }

  const chooseTheme = choice => {
    const _theme = themeObjects[choice.toLowerCase()]
    if (_theme) {
      return _theme
    }
    return _theme
  }

  return (
    <div>
      <ThemeProvider
        theme={chooseTheme(
          select(
            'Choose Theme',
            ['Dark', 'Light'],
            'Light',
          ),
        )}
      >
        {story()}
      </ThemeProvider>
    </div>
  )
})

// the order of this statement is important
// we need to add this after the usage of the knobs in the above wrapper decorator
// otherwise the knobs would disappear on switching between stories
// https://github.com/storybooks/storybook/issues/2706
addDecorator(withKnobs)

function loadStories() {
  require('../src/stories')
}

configure(loadStories, module)