在不到 10 分钟的时间内将您的网站变为黑暗模式！ （仅限 CSS/顺风）
在不到 10 分钟的时间内将您的网站变为黑暗模式！ （仅限 CSS/顺风）
您是否想让您的网站设置为暗模式并且对哪种方式更好感到困惑？如果你想重构你项目的整个部分，那将花费很多时间，以至于它可能是无止境的！
如果您在项目中使用了 Tailwind 并且没有使用固定颜色并使用 Tailwind 颜色系统，请不要担心！我们将在不到十分钟的时间内将您的网站设为暗模式！即使您在项目中不使用 Tailwind，本文也可以为您提供帮助，因为我们可以使用纯 CSS 方法。
先决条件
首先，如果您使用过 Tailwind，则不应该使用固定颜色：
.jsx file
另外，如果您没有使用 Tailwind 并且只使用了 CSS，则必须使用 CSS 可变颜色。如果您使用了硬编码的静态十六进制颜色，则必须重构您的项目并将所有颜色替换为 CSS 可变颜色：
.css file
1. 定义颜色：
首先，在 ：根 CSS 文件中的 CSS 选择器：
然后在暗模式中定义所有颜色 html.dark CSS 选择器：
最后，您的 CSS 文件应如下所示：
colors.css
2. 切换暗模式：
现在我们唯一需要做的就是给主要元素 黑暗的 班级。
输出将是这样的：
这是一个简单的示例，说明如何支持亮模式、暗模式以及尊重操作系统偏好，您还可以保存 主题 在 本地存储 ：
Sample by 顺风
完毕！
您有一个可以使用的暗模式网站。
顺风集成
对于顺风，您唯一需要做的就是告诉顺风听您的 CSS 变量颜色。所以为了做到这一点，我们需要将其设置为 tailwind.config.js ：
[
自定义颜色 - Tailwind CSS
Tailwind 包含一个精心制作的开箱即用默认调色板，如果您不...
尾风css.com
](https://tailwindcss.com/docs/customizing-colors#using-css-variables)
例如：
tailwind.config.js ( tailwindcss.com 示例)
然后我们可以在元素类名中使用这些颜色。例如：
<div class="bg-color-primary" />
此外，如果您想自定义特定元素以在暗模式下具有不同的颜色，您可以简单地使用 黑暗的： 选择器感谢 顺风黑暗选择器 .
例如：
<div class="bg-color-primary dark:bg-color-secondary" />
结论
在本文中，我将向您展示如何使用简单的技巧来实现暗模式，我们只需在 CSS 变量中定义我们的颜色并定义暗颜色，并且我们只需添加切换暗模式 黑暗的 上课 <html class="dark"> 标签。因为 Tailwind 支持在 tailwind.config.js 它支持 CSS 可变颜色，我们的方法也适用于 Tailwind。
这种方法的最大优点是速度极快。当我们切换暗模式时，所有颜色都会立即改变。因为我们使用纯 CSS 的方法，并且我们已经告诉了 CSS 所有的颜色。
现场示例：
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
