加入直播会话:周四,美国东部时间上午 11 点,Storybook 9 发布 & AMA

Theme-CSS-Vars

一个使用 CSS 自定义属性更改主题的主题切换工具插件

在 Github 上查看

Storybook 主题 CSS 自定义属性

Storybook theme css vars

此插件可用于在 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")

用法

单击工具栏中的新主题切换按钮,在暗色模式和亮色模式之间切换。