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

To help you get started, we’ve selected a few @storybook/theming 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 codesandbox / codesandbox-client / packages / common / .storybook / config.tsx View on Github external
);

addDecorator(withA11y);
addDecorator(withKnobs);
addDecorator(withGlobal);
addDecorator(ThemeDecorator);
addParameters({
  viewport: {
    viewports,
  },
});

// Option defaults.
addParameters({
  options: {
    theme: themes.dark,
  },
});

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

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

configure(loadStories, module);
github storybookjs / storybook / examples / cra-mdx / .storybook / config.js View on Github external
import React from 'react';
import { load, addDecorator, addParameters } from '@storybook/react';
import { themes, create } from '@storybook/theming';
import { DocsPage } from '@storybook/addon-docs/blocks';
import { getPropDefs } from '@storybook/addon-docs/react';

addParameters({
  options: {
    docs: {
      inlineStories: true,
      getPropDefs,
    },
    theme: themes.dark,
  },
  docs: DocsPage,
  notes: 'global notes',
});

// addDecorator(storyFn =&gt; <div style="{{">{storyFn()}</div>);

load(require.context('../src', true, /\.stories\.js$/), module);
load(require.context('../src', true, /\.stories\.mdx$/), module);
github projectstorm / react-diagrams / packages / diagrams-demo-gallery / index.tsx View on Github external
import * as React from 'react';
import { storiesOf, addParameters, addDecorator } from '@storybook/react';
import { setOptions } from '@storybook/addon-options';
import { themes } from '@storybook/theming';
import './demos/helpers/index.css';
import { Toolkit } from '@projectstorm/react-canvas-core';

Toolkit.TESTING = true;

addParameters({
	options: {
		theme: themes.dark
	}
});

setOptions({
	name: 'STORM React Diagrams',
	url: 'https://github.com/projectstorm/react-diagrams',
	addonPanelInRight: true
});

addDecorator(fn => {
	Toolkit.TESTING_UID = 0;
	return fn();
});

import demo_simple from './demos/demo-simple';
import demo_flow from './demos/demo-simple-flow';
github HamishMW / portfolio-2018 / .storybook / config.js View on Github external
import { configure, addParameters, addDecorator } from '@storybook/react';
import { themes } from '@storybook/theming';
import React from 'react';
import { withKnobs, select } from '@storybook/addon-knobs';
import { withA11y } from '@storybook/addon-a11y';
import { ThemeProvider } from 'styled-components';
import { theme } from '../src/app/theme';
import { Helmet, HelmetProvider } from 'react-helmet-async';
import GothamBook from '../src/assets/fonts/gotham-book.woff2';
import GothamMedium from '../src/assets/fonts/gotham-medium.woff2';
import { fontStyles, GlobalStyles } from '../src/app';

addParameters({
  options: {
    theme: {
      ...themes.dark,
      brandImage: 'https://hamishw.com/icon.svg',
      brandTitle: 'Hamish Williams Components',
      brandUrl: 'https://hamishw.com',
    },
  },
});

const themeKeys = {
  'Dark': 'dark',
  'Light': 'light',
};

addDecorator(story => {
  const content = story();
  const themeKey = select('Theme', themeKeys, 'dark');
  const currentTheme = theme[themeKey];
github viniarruda / react-ecommerce / packages / design-system / .storybook / config.js View on Github external
import { configure, addParameters, addDecorator } from '@storybook/react';
import { themes } from '@storybook/theming';
import { withA11y } from '@storybook/addon-a11y';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks'

const req = require.context('../src', true, /\.story\.(ts|tsx|mdx)$/);


addParameters({
  options: {
    theme: themes.dark,
  },
  docs: {
    container: DocsContainer,
    page: DocsPage,
  },
});

addDecorator(withA11y);

configure(() => {
  req.keys().forEach(filename => req(filename))
}, module);
github cloudkeeper-io / cloudkeeper-ui / .storybook / config.js View on Github external
`

const StyledDecorator = story =&gt; (
  
    
      
      
      
      {story()}
    
  
)

addParameters({
  options: {
    theme: themes.dark,
  },
})

addDecorator(withKnobs)
addDecorator(StyledDecorator)

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

configure(loadStories, module)
github sourcegraph / sourcegraph / .storybook / config.ts View on Github external
configure(() => {
        addDecorator((storyFn, context) => withKnobs(storyFn, context))
        addDecorator((storyFn, context) => withConsole()(storyFn)(context))
        addParameters({ theme: themes.dark })
        addDecorator(withInfo({ header: false, propTables: false }))

        configureActions({
            depth: 100,
            limit: 20,
        })
    }, module)
}
github strapi / buffet / docs / .storybook / config.js View on Github external
},
  table: {
    header: {
      height: '41px',
    },
    deleteRow: {
      height: '37px',
    },
  },
};

export default sizes;

addParameters({
  options: {
    theme: themes.dark,
    showPanel: true,
    panelPosition: 'right',
    sortStoriesByKind: true,
    panelPosition: 'bottom',
  },
});

addDecorator(withKnobs);
addDecorator(story =&gt; (
  &lt;&gt;
    
    
    
    {story()}
  
));
github BanditDev / pepega / .storybook / config.tsx View on Github external
import { withKnobs } from '@storybook/addon-knobs';
import { addDecorator, configure, addParameters } from '@storybook/react';
import { withThemesProvider } from 'storybook-addon-styled-component-theme';
import { themes } from '@storybook/theming';

addParameters({
  options: {
    name: 'PepegaCom',
    theme: themes.dark
  }
});

addDecorator(withKnobs);

addDecorator(
  withThemesProvider([
    {
      name: 'Default',
      dark1Color: '#1E1D22',
      dark2Color: '#25222C',
      accent1Color: '#394158',
      accent2Color: '#968a9d',
      main1Color: '#633FA4',
      main2Color: '#52289F',
      text1Color: '#eee'