故事书忽略了CSS暗模式变量答案

【问题标题】：css darkmode variables being ignored by storybook故事书忽略了CSS暗模式变量
【发布时间】：2021-11-01 00:40:56
【问题描述】：

我有以下 css 已加载到我的项目中：

// Default theme (light mode)
:root {
  /* Typography */
  --col-body-text: #0b0c0c;
  --col-body-text-light: #505a5f;
}

// Dark mode theme
:root.dark {
  /* Typography */
  --col-body-text: #c5c5c5;
  --col-body-text-light: #f8f8f8;
}

在我的实际应用中，这按预期工作，但是，在故事书中，它忽略了暗模式变量。

我已经更新了我的 preview.js 文件，以便在选择暗模式时将“.dark”添加到 `HTML 元素中 - 这可以按预期工作 - 实际上组件中的所有其他暗模式特定代码都可以正常工作。只有那些变量被忽略了。

在我不知道的故事书中使用:root 是否存在问题？

如果有帮助，这里是将类添加到 HTML 元素的代码：


// get an instance to the communication channel for the manager and preview
const channel = addons.getChannel()

// switch body class for story along with interface theme
channel.on('DARK_MODE', isDark => {
  if (isDark) {
    document.documentElement.classList.add('dark')
  } else {
    document.documentElement.classList.remove('dark')
  }
})

【问题讨论】：

标签： javascript css storybook darkmode

【解决方案1】：

尝试
CSS -> body.dark {
而不是:root.dark {

和

channel.on('DARK_MODE', isDark => document.body.classList.toggle('dark', isDark))

【讨论】：

不，很遗憾，这并没有什么不同。感谢您提供更简洁的 channel.on 代码，但不知道 toggle 存在 :)
考虑一下。无论如何，我必须在 HTML 元素上有变量，因为这是应用程序所依赖的。

【解决方案2】：

如果您将此类样式表放在 HTML 页面中（例如，在 <head> 中），:root 选择器将引用 <html> (https://developer.mozilla.org/en-US/docs/Web/CSS/:root)。如果要将:root 选择器与类一起使用，则需要在<html> 元素上设置类（而不是在另一个答案中建议的<body>），所以document.documentElement.classList.add('dark') 是正确的。

有一个使用 Storybook 语法和功能的游乐场，我为您创建了一个工作示例：https://webcomponents.dev/edit/p8TI3583HotsFNWjBMd8/src/index.stories.js

不确定您的 Storybook 是否以其他方式配置，可能您的样式表并未真正添加或稍后在某处被覆盖。还请验证您是否正确使用了 CSS 自定义属性（又名 CSS vars），我希望工作演示也能对此有所帮助。

【讨论】：

我试图点击您的示例的链接，但收到一条消息说它不存在。