故事书黑暗模式玩得不好答案

【问题标题】：storybook darkmode not playing nice故事书黑暗模式玩得不好
【发布时间】：2021-04-16 22:03:30
【问题描述】：

所以我正在为我的 svelte + tailwind 应用程序使用 storybook，我现在正在努力确保我可以切换暗模式。

所以对于我的tailwind.config.js，我添加了这个

module.exports = {
  darkMode: "class",

我把这个插件安装到了故事书中 https://github.com/hipstersmoothie/storybook-dark-mode

使用此配置.storybook/preview.js

export const parameters = {
  darkMode: {
    darkClass: "dark",
    stylePreview: false,
  },

通过查看故事书 iframe 的 DOM，我可以看到“黑暗”应用于正文。但是当我用这个 HTML 创建一个组件时

<div class="inline">
  <div class="w-8 h-8 bg-blue-500 dark:bg-green-500" />
</div>

盒子总是蓝色的。所以我想也许 purgecss 正在删除它，所以我在它的选项中添加了safelist: ["dark"]，但没有任何运气。

为了让事情变得更复杂，我测试了这个组件

<div class="inline">
  <div class="w-8 h-8 bg-blue-500 dark:bg-green-500" />
</div>
<div class="inline dark">
  <div class="w-8 h-8 bg-blue-500 dark:bg-green-500" />
</div>

令我惊讶的是，其中一个盒子变成了绿色。

老实说，我不完全确定这是因为苗条、故事书、顺风还是暗模式故事书插件。

但是如果有人看到类似的东西，我真的很感激帮助

【问题讨论】：

标签： html css svelte tailwind-css storybook

【解决方案1】：

您可以尝试在观看故事书时忽略purgecss。

我不确定您的确切设置，但在我的情况下，我在 postcss.config.js 添加了一个条件，以便故事书正常工作：

const isProduction =
  !process.env.ROLLUP_WATCH &&
  !process.env.LIVERELOAD &&
  process.env.NODE_ENV !== 'development'

module.exports = {
  plugins: [
    require('tailwindcss'),
    ...(isProduction ? [purgecss] : [])
  ]
};

我的.storybook/preview.js 包含以下内容：

export const parameters = {
  darkMode: {
    stylePreview: true,
    darkClass: 'dark',
    lightClass: 'light',
  }
}

在此之后唯一仍然不起作用的是暗模式下的白色文本，所以我不得不在我的 css 中添加.dark { color: white; }。

【讨论】：

【解决方案2】：

我也遇到了这个问题，但这是因为我在 tailwind.config.js 文件中定义了 vc- 前缀。

当我配置插件https://github.com/hipstersmoothie/storybook-dark-mode 时，我在.storybook/preview.js 中使用了dark 而不是vc-dark 类：

export const parameters = {
  darkMode: {
    dark: { ...themes.dark },
    light: { ...themes.light },
    darkClass: 'dark',
    stylePreview: true
  }
}

应该是

export const parameters = {
  darkMode: {
    dark: { ...themes.dark },
    light: { ...themes.light },
    darkClass: 'vc-dark',
    stylePreview: true
  }
}

不确定您 (OP) 是否在您的 tailwind.config.js 文件中定义了前缀，但如果其他人遇到相同问题，请注意这一点。

即使有前缀，你仍然可以正常使用dark变体，只是在变体后面引用类名时不要忘记使用前缀：

<div class="vc-bg-blue-500 dark:vc-bg-green-500" />

【讨论】：