暗黑模式

现在很多操作系统（如IOS等）都将暗黑模式作为一个必备的特性，我们的网站也应该支持暗黑模式，避免在夜间闪瞎用户的眼睛。但如果使用原生CSS开发暗黑模式工程量巨大，我们可能得编写两套CSS样式，然后用JavaScript来切换。但如果使用TailwindCSS就十分简单了，这里我们介绍如何用TailwindCSS实现暗黑模式。

暗黑模式切换

默认情况下，TailwindCSS使用prefers-color-scheme媒体查询来获取当前浏览器是否开启暗黑模式，因此暗黑模式的切换默认是自动的。不过我们也可以手动进行切换。

在tailwind.config.js中，配置darkMode: 'class'可以将暗黑模式的切换设置为手动模式。

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  // ...
}

此时在页面的<html>标签上设置class="dark"即可将页面切换为暗黑模式，这可能需要编写一些JavaScript代码来关联一个按钮的点击事件。

暗黑模式样式

设置暗黑模式的样式思路和之前我们学习的响应式布局差不多，TailwindCSS提供了dark:前缀，我们可以基于这个前缀设置暗黑模式下页面样式的表现。

<body class="bg-white dark:bg-slate-700"></body>

上面代码中，我们设置暗黑模式下页面的背景颜色为bg-slate-700。

作者：Gacfox
版权声明：本网站为非盈利性质，文章如非特殊说明均为原创，版权遵循知识共享协议CC BY-NC-ND 4.0进行授权，转载必须署名，禁止用于商业目的或演绎修改后转载。