From 902d511ed75cec433fee8d790e248a9a1a175158 Mon Sep 17 00:00:00 2001 From: Andrey Sitnik Date: Sun, 3 Dec 2023 09:45:14 +0100 Subject: [PATCH 1/2] Add guide postcss plugin for prefers-color-scheme media --- code/addons/themes/README.md | 1 + .../themes/docs/getting-started/postcss.md | 116 ++++++++++++++++++ 2 files changed, 117 insertions(+) create mode 100644 code/addons/themes/docs/getting-started/postcss.md diff --git a/code/addons/themes/README.md b/code/addons/themes/README.md index 55bc748fd48f..c529f8a60258 100644 --- a/code/addons/themes/README.md +++ b/code/addons/themes/README.md @@ -27,6 +27,7 @@ For tool-specific setup, check out the recipes below - [`@emotion/styled`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/emotion.md) - [`@mui/material`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/material-ui.md) - [`bootstrap`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/bootstrap.md) +- [`postcss`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/postcss.md) - [`styled-components`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/styled-components.md) - [`tailwind`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/tailwind.md) - [`vuetify@3.x`](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#writing-a-custom-decorator) diff --git a/code/addons/themes/docs/getting-started/postcss.md b/code/addons/themes/docs/getting-started/postcss.md new file mode 100644 index 000000000000..a90ae8a786ea --- /dev/null +++ b/code/addons/themes/docs/getting-started/postcss.md @@ -0,0 +1,116 @@ +# 🏁 Getting started with `postcss` + +## 📦 Install addon + + + +To get started, **install the package** as a dev dependency + +yarn: + +```zsh +yarn add -D @storybook/addon-themes postcss-dark-theme-class +``` + +npm: + +```zsh +npm install -D @storybook/addon-themes postcss-dark-theme-class +``` + +pnpm: + +```zsh +pnpm add -D @storybook/addon-themes postcss-dark-theme-class +``` + +## 🧩 Register Addon + +Now, **include the addon** in your `.storybook/main.js` file. + +```diff +module.exports = { + stories: [ + "../stories/**/*.stories.mdx", + "../stories/**/*.stories.@(js|jsx|ts|tsx)", + ], + addons: [ + "@storybook/addon-essentials", ++ "@storybook/addon-themes" + ], +}; +``` + +## 🥾 Import your CSS + +To give your stories access to styles, import them into your `.storybook/preview.js` file. + +```diff +import { Preview } from "@storybook/your-renderer"; + ++import "../src/index.css"; + +const preview: Preview = { + parameters: { /* ... */ }, +}; + +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 +-import { Preview } from "@storybook/your-renderer"; ++import { Preview, Renderer } from "@storybook/your-renderer"; ++import { withThemeByClassName } from "@storybook/addon-themes"; + +import "../src/index.css"; + + +const preview: Preview = { + parameters: { /* ... */ }, ++ decorators: [ ++ withThemeByClassName({ ++ themes: { ++ light: "is-light", ++ dark: "is-dark", ++ }, ++ defaultTheme: "light", ++ }), ++ ] +}; + +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 + } +} +``` \ No newline at end of file From 69d414f758f991d731f84c30412e9628b79d90f0 Mon Sep 17 00:00:00 2001 From: Andrey Sitnik Date: Wed, 6 Dec 2023 15:07:42 +0100 Subject: [PATCH 2/2] Improve docs --- .../themes/docs/getting-started/postcss.md | 62 +++++++++---------- 1 file changed, 30 insertions(+), 32 deletions(-) diff --git a/code/addons/themes/docs/getting-started/postcss.md b/code/addons/themes/docs/getting-started/postcss.md index a90ae8a786ea..3748dd272a10 100644 --- a/code/addons/themes/docs/getting-started/postcss.md +++ b/code/addons/themes/docs/getting-started/postcss.md @@ -2,8 +2,6 @@ ## 📦 Install addon - - To get started, **install the package** as a dev dependency yarn: @@ -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. @@ -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 @@ -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 - } -} -``` \ No newline at end of file