How to use the @storybook/components.themes.dark function in @storybook/components

To help you get started, we’ve selected a few @storybook/components examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github uber / baseweb / .storybook-dark / config.js View on Github external
import {withKnobs} from '@storybook/addon-knobs';
import {Provider as StyletronProvider} from 'styletron-react';
import {Client as Styletron} from 'styletron-engine-atomic';

import loadStories from '../.storybook-base/loadStories.js';
import {ThemeProvider} from '../src/styles';
import {DarkTheme} from '../src/themes';

withOptions({
  name: 'baseui',
  url: 'https://github.com/uber-web/baseui',
});

setOptions({
  theme: {
    ...themes.dark,
    mainFill: DarkTheme.colors.mono800,
    mainBackground: DarkTheme.colors.mono700,
    mainTextColor: DarkTheme.colors.mono100,
    dimmedTextColor: DarkTheme.colors.mono100,
    highlightColor: DarkTheme.colors.primary,
    successColor: DarkTheme.colors.positive,
    warningColor: DarkTheme.colors.warning,
    failColor: DarkTheme.colors.negative,
  },
});

const engine = new Styletron();

// this should be first decorator to avoid extra code to be parsed here
addDecorator(withInfo);
github gilbarbara / styled-minimal / .storybook / config.js View on Github external
import TableComponent from './TableComponent';

// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /.stories.js$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

addDecorator(
  withOptions({
    name: 'styled-minimal',
    url: 'https://github.com/gilbarbara/styled-minimal',
    theme: {
      ...themes.dark,
      mainBackground: '#27292a linear-gradient(to right, #27292a, #333)',
      brand: { background: '#f04' },
    },
  }),
);

addDecorator(
  withBackgrounds([
    { name: 'light', value: '#f7f7f7', default: true },
    { name: 'gray', value: '#999' },
    { name: 'dark', value: '#333' },
  ]),
);

addDecorator(
  withInfo({