Storybook 主题 CSS 自定义属性
此插件可用于在 Storybook 的 iframe HTML 元素中设置一个 data 属性,触发暗色和亮色主题之间的切换。
样式示例
:root {
--white: #fff;
--black: #000;
}
:root [data-theme="dark"] {
--white: #000;
--black: #fff;
}
安装
npm i -D storybook-theme-css-vars
将插件添加到 .storybook/main.js
module.exports = {
addons: ["storybook-theme-css-vars"],
};
将参数选项添加到 .storybook/preview.js
export const parameters = {
theme: {
selector: "body (or your selector with data attribute)",
dataAttr: "data-theme (or your data attribute)",
nameLightTheme: "light (or your name of light theme)",
nameDarkTheme: "dark (or your name of dark theme)",
},
};
- nameLightTheme(可选,默认值 — "light")
- nameDarkTheme:(可选,默认值 — "dark")
用法
单击工具栏中的新主题切换按钮,在暗色模式和亮色模式之间切换。