Skip to content

Commit

Permalink
Improve docs
Browse files Browse the repository at this point in the history
  • Loading branch information
ai authored Dec 6, 2023
1 parent 902d511 commit 69d414f
Showing 1 changed file with 30 additions and 32 deletions.
62 changes: 30 additions & 32 deletions code/addons/themes/docs/getting-started/postcss.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@

## 📦 Install addon

<!-- **NOTE:** As of Storybook 7.2, `@storybook/addon-themes` ships in `@storybook/addon-essentials`. If you're using Storybook >= 7.2, skip to ["Import your css"](#🥾-import-your-css). -->

To get started, **install the package** as a dev dependency

yarn:
Expand Down Expand Up @@ -41,6 +39,36 @@ module.exports = {
};
```

## 🏷️ Add class to `prefers-color-scheme` media

CSS has special media at-rule for dark theme: `@media (prefers-color-scheme: dark)`. [`postcss-dark-theme-class`](https://github.com/postcss/postcss-dark-theme-class) can copy content of those at-rules to `.is-dark` selector.

Check your project for existing PostCSS config: `postcss.config.js` in the project root, `"postcss"` section in `package.json` or postcss in bundle config.

Add plugin to the list.

```diff
module.exports = {
plugins: [
+ require('postcss-dark-theme-class'),
require('autoprefixer')
]
}
```

Use `prefers-color-scheme` media in your CSS:

```css
:root {
--text-color: black;
}
@media (prefers-color-scheme: dark) {
html {
--text-color: white
}
}
```

## 🥾 Import your CSS

To give your stories access to styles, import them into your `.storybook/preview.js` file.
Expand All @@ -59,8 +87,6 @@ export default preview;

## 🎨 Provide your theme(s)

Tailwind supports light and dark color modes out of the box. These modes can be activated by setting a `.dark` class on a parent element.

To enable switching between these modes in a click for your stories, use our `withThemeByClassName` decorator by adding the following code to your `.storybook/preview.js` file.

```diff
Expand All @@ -86,31 +112,3 @@ const preview: Preview = {

export default preview;
```

## 🏷️ Add class to `prefers-color-scheme` media

Check your project for existing PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

Add plugin to the list.

```diff
module.exports = {
plugins: [
+ require('postcss-dark-theme-class'),
require('autoprefixer')
]
}
```

Use `prefers-color-scheme` media in your CSS:

```css
:root {
--text-color: black;
}
@media (prefers-color-scheme: dark) {
html {
--text-color: white
}
}
```

0 comments on commit 69d414f

Please sign in to comment.