故事书中的黑暗模式并不友好

Question

因此，我在我的svelte +顺风应用程序中使用了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，我可以看到"dark“应用于body。但是当我用这个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>

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

老实说，我不能完全确定这是因为svelte，故事书，顺风，还是黑暗模式的故事书插件。

但如果有人见过类似的情况，我会非常感谢

Answer 1

你可以试着在看故事书的时候忽略purgecss。

我不确定你的确切设置，但在我的例子中，我在postcss.config.js中添加了一个条件，以使storybook正常工作：

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; }。

Answer 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" />