text: import React from 'react';
  
  const ThemeProvider = props => {
    // Apply theme later because storybook adds its own `<body theme="...">` attribute too.
    // TODO: Eventually change ours to `insomnia-theme` or something more specific.
    setTimeout(() => document.body.setAttribute('theme', props.theme), 500);
  
    return props.children;
  };
  
  export const contexts = [
    {
      icon: 'box', // a icon displayed in the Storybook toolbar to control contextual props
      title: 'Themes', // an unique name of a contextual environment
      components: [
        ThemeProvider,
      ],
      params: [
        { name: 'Designer Light', props: { theme: 'studio-light' }, default: true },
        { name: 'Designer Dark', props: { theme: 'studio-colorful' } },
      ],
      options: {
        deep: true, // pass the `props` deeply into all wrapping components
        disable: false, // disable this contextual environment completely
        cancelable: false, // allow this contextual environment to be opt-out optionally in toolbar
      },
    },
  ];
  