https://github.com/prantlf/storybook-docs-themes

Set up theme colours of documentation previews in Storybook stories.
https://github.com/prantlf/storybook-docs-themes

addon storybook storybook-addon storybook-addons storybookjs styles stylesheet theme

Last synced: 13 days ago
JSON representation

Set up theme colours of documentation previews in Storybook stories.

• Host: GitHub
• URL: https://github.com/prantlf/storybook-docs-themes
• Owner: prantlf
• License: mit
• Created: 2023-05-01T20:44:25.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2024-12-13T10:08:16.000Z (2 months ago)
• Last Synced: 2025-01-13T20:53:34.921Z (about 1 month ago)
• Topics: addon, storybook, storybook-addon, storybook-addons, storybookjs, styles, stylesheet, theme
• Language: CSS
• Homepage:
• Size: 95.7 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# storybook-docs-themes

[![Latest version](https://img.shields.io/npm/v/storybook-docs-themes)

 ![Dependency status](https://img.shields.io/librariesio/release/npm/storybook-docs-themes)

](https://www.npmjs.com/package/storybook-docs-themes)

Set up theme colours of documentation previews in [Storybook] stories.

Original colours and colours according to the VS Code Dark+ theme:

![Original colours](assets/original.png) ![Original colours](assets/vscode-dark-plus.png)

## Usage via NPM

Install the stylesheets using `npm`:

    npm i -D storybook-docs-themes

Copy the stylesheets to the output directory in `.storybook/main.js`:

```js

export default {

  staticDirs: [

    { from: '../node_modules/storybook-docs-themes/stylesheets', to: 'themes' }

  ]

}

```

Load the selected stylesheet to [Storybook] stories in `.storybook/preview-head.html`:

```html

```

See also an [example of a Storybook project using this stylesheet].

## Usage via CDN

Load the selected stylesheet to the stories in `.storybook/preview-head.html`:

```html

```

## Themes

Stylesheets are located in the `stylesheets` directory of the distributed package.

### VS Code Dark+

Colours according to the VS Code theme "Dark+", enhanced to the WCAG AAA contrast.

    vscode-dark-plus.css

    vscode-dark-plus.min.css

    vscode-dark-plus.min.css.map

## Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style.

## License

Copyright (C) 2023-2024 Ferdinand Prantl

Licensed under the [MIT License].

[MIT License]: http://en.wikipedia.org/wiki/MIT_License

[Storybook]: https://storybook.js.org/

[example of a Storybook project using this stylesheet]: ./examples/sb8