How to use the @storybook/theming.create function in @storybook/theming

import { addParameters, configure, addDecorator } from '@storybook/react';
import { create } from '@storybook/theming';
import IntlDecorator from './decorators/intl';

addParameters({
  options: {
    theme: create({
      base: 'light',
      brandTitle: 'Application Kit',
      // To control appearance:
      brandImage:
        'https://unpkg.com/@commercetools-frontend/assets/logos/commercetools_primary-logo_horizontal_RGB.png',
    }),
    isFullScreen: false,
    panelPosition: 'right',
    showNav: true,
    showPanel: true,
    sortStoriesByKind: false,
    hierarchySeparator: /\//,
    hierarchyRootSeparator: /\|/,
  },
});

import { addDecorator, addParameters, configure } from '@storybook/react'
import { create } from '@storybook/theming'
import { CanvasDecorator } from '../src/utils/tests/decorators/CanvasDecorator'
import { ThemeDecorator } from '../src/utils/tests/decorators/ThemeDecorator'
import requireContext from 'require-context.macro'

// Our own decorators
addDecorator(CanvasDecorator)
addDecorator(ThemeDecorator)

// Add options
addParameters({
  options: {
    theme: create({
      base: 'light',
      brandTitle: '@exivity/ui',
      brandUrl: 'https://exivity.github.io/ui/',
      brandImage: 'logo.svg',
    }),
    panelPosition: 'right',
    isFullscreen: false,
  },
});

// Automatically import all files ending in *.stories.js
const docs = requireContext('../docs', true, /.stories.(js|tsx)$/)
const src = requireContext('../src', true, /.stories.(js|tsx)$/)

function loadStories () {
  docs.keys().forEach(filename => docs(filename))

const css = require.context(
    '../../../../built_assets/css',
    true,
    /plugins\/(?=canvas).*light\.css/
  );
  css.keys().forEach(filename => css(filename));

  // Find all files ending in *.examples.ts
  const req = require.context('./..', true, /.examples.tsx$/);
  req.keys().forEach(filename => req(filename));
}

// Set up the Storybook environment with custom settings.
addParameters({
  options: {
    theme: create({
      base: 'light',
      brandTitle: 'Canvas Storybook',
      brandUrl: 'https://github.com/elastic/kibana/tree/master/x-pack/plugins/canvas',
    }),
    showPanel: true,
    isFullscreen: false,
    panelPosition: 'bottom',
    isToolshown: true,
  },
});

configure(loadStories, module);

import Vue from 'vue';
import { configure, addDecorator, addParameters } from '@storybook/vue';
import { addReadme } from 'storybook-readme/vue';
import { themes, create } from '@storybook/theming';

const basicTheme = create({
  base: 'light',
  brandTitle: 'README addon',
  brandUrl: 'https://github.com/tuchk4/storybook-readme',
  brandImage: null,
});

addParameters({
  options: {
    showPanel: true,
    panelPosition: 'right',
    theme: basicTheme,
    // theme: themes.dark,
  },
  readme: {
    // You can set the global code theme here.
    codeTheme: 'github',

import { addParameters, configure, addDecorator } from '@storybook/react';
import { withContexts } from '@storybook/addon-contexts/react';
import { addReadme } from 'storybook-readme';
import { withA11y } from '@storybook/addon-a11y';
import { create } from '@storybook/theming';
import { contexts } from './configs/contexts';

addParameters({
  readme: {
    // You can set a code theme globally.
    codeTheme: 'github',
  },
  options: {
    theme: create({
      base: 'light',
      brandTitle: 'UI Kit',
      brandUrl: 'https://uikit.commercetools.com',
      // To control appearance:
      brandImage:
        'https://unpkg.com/@commercetools-frontend/assets/logos/commercetools_primary-logo_horizontal_RGB.png',
    }),
    isFullScreen: false,
    panelPosition: 'right',
    showNav: true,
    showPanel: true,
    sortStoriesByKind: false,
    hierarchySeparator: /\//,
    hierarchyRootSeparator: /\|/,
  },
});

import path from 'path';
import { create } from '@storybook/theming';

// @ts-ignore
export const entries = [];
export const preview = {};
export const manager = {};
export const theme = create({ base: 'light', brandTitle: 'test' });

export const unused = (z: string) => path.join('base', z);

export type Foo = string | number;

import '../src/styles/blue.scss'
import './storybook.css'

const withStats = storyFn => (
  <div>
    
    {storyFn()}
  </div>
)

addDecorator(withStats)
addDecorator(withKnobs)

addParameters({
  options: {
    theme: create({
      base: 'light',
      brandTitle: 'HSDS: React',
      brandUrl:
        'https://github.com/helpscout/hsds-react/tree/master/src/components',
    }),
    isFullscreen: false,
    panelPosition: 'right',
    isToolshown: true,
  },
})

addParameters({
  viewport: {
    viewports: {
      ...INITIAL_VIEWPORTS,
    },

import React, { Fragment } from 'react';
import { configure, addDecorator, addParameters } from '@storybook/react';
import { create } from '@storybook/theming';
import { withA11y } from '@storybook/addon-a11y';
import {
  AMP_SCRIPT,
  AMP_NO_SCRIPT,
} from '@bbc/psammead-assets/amp-boilerplate';
import * as fontFaces from '@bbc/psammead-styles/fonts';
import GlobalStyles from '@bbc/psammead-styles/global-styles';

import Helmet from 'react-helmet';

const theme = create({
  base: 'light',
  brandTitle: 'BBC Psammead',
  brandUrl: 'https://github.com/bbc/psammead',
  brandImage:
    'https://user-images.githubusercontent.com/11341355/54079666-af202780-42d8-11e9-9108-e47ea27fddc5.png',
});

addParameters({
  options: {
    panelPosition: 'right',
    sidebarAnimations: true,
    theme,
  },
  a11y: {
    options: {
      runOnly: {