storybook-docs-themes
v1.0.1
Published
Set up theme colours of documentation previews in Storybook stories.
Downloads
78
Maintainers
Readme
storybook-docs-themes
Set up theme colours of documentation previews in Storybook stories.
Original colours and colours according to the VS Code Dark+ theme:
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
:
export default {
staticDirs: [
{ from: '../node_modules/storybook-docs-themes/stylesheets', to: 'themes' }
]
}
Load the selected stylesheet to Storybook stories in .storybook/preview-head.html
:
<link rel="stylesheet" href="themes/vscode-dark-plus.min.css">
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
:
<link rel="stylesheet"
href="https://unpkg.com/[email protected]/stylesheets/vscode-dark-plus.min.css">
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.