相信很多小伙伴都看到了，咱们的绿叶网（右上角）提供了 2 种皮肤：亮色模式和暗色模式。在这一节中，我们来介绍一下如何在 Tailwind CSS 中使用暗色模式。
Tailwind CSS 暗色模式简介
在现代 Web 开发中，“暗色模式（深色模式）”已经成为一个必不可少的高级特性。如果使用传统的 CSS 来实现暗色模式，我们需要使用 @media (prefers-color-scheme: dark) 这个拗口的媒体查询。
在 CSS 媒体查询 中，我们还要在 CSS 文件中把所有的背景颜色（background-color）、文本颜色（color）、边框颜色（border-color）等定义 2 次：一次用于 “亮色模式”，另一次用于 “暗色模式”。这种方式不仅繁琐，而且还容易出错。
Tailwind CSS 内置了强大的暗色模式支持，我们只需要通过一个简单的 “dark:” 前缀，就能轻松实现暗色模式。
语法：
dark:类名说明：
<div class="bg-white text-black dark:bg-gray-900 dark:text-white"></div>就拿上面这句代码来说，对于不带 “dark:” 前缀的样式，都会在 “亮色模式”（默认模式）下生效，比如：bg-white text-black。
而对于带 “dark:” 前缀的样式，只会在 “暗色模式” 下才会生效，比如：dark:bg-gray-900 dark:text-white。
注意: “dark:” 与 “类名” 之间不能有空格，否则会导致暗色效果无法生效。比如写成 dark: bg-black 是无效的，必须紧挨着写成 dark:bg-black。
Tailwind CSS 暗色模式示例
接下来，我们通过一个简单的例子来讲解一下如何在 Tailwind CSS 中实现暗色模式。
示例 1：使用 Tailwind 暗色模式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="bg-slate-50 dark:bg-slate-950 flex items-center justify-center min-h-screen transition-colors duration-500 p-4">
<div class="bg-white dark:bg-slate-900 p-8 rounded-2xl shadow-xl dark:shadow-none border border-transparent dark:border-slate-800 max-w-md w-full transition-colors duration-500">
<h2 class="text-2xl font-bold text-slate-900 dark:text-white">绿叶网</h2>
<p class="mt-4 text-slate-600 dark:text-slate-400 leading-relaxed">
绿叶网专注于教程的易懂性，让完全 0 基础的小白也能更快上手。
</p>
<button class="mt-8 w-full py-3 bg-indigo-500 hover:bg-indigo-600 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white font-bold rounded-xl transition-colors">
沉浸学习
</button>
</div>
</body>
</html>页面效果如下图所示。
分析：
这里小伙伴们肯定会问了：“我们怎么查看暗色模式下的效果呢？”实际上，Tailwind CSS 暗色模式是随着浏览器的外观模式来自动变化的。
就拿 Edge 浏览器来说，我们在浏览器右上角找到 “...”（三个点号），点击依次打开【设置】→【外观】，然后将外观设置为 “深色”，如下图所示。
然后再去查看刚刚的例子，会发现整个页面已经使用了暗色模式，如下图所示。
Tailwind CSS 手动切换暗色模式
默认情况下，Tailwind CSS 暗色模式是自动跟随系统（或浏览器）的。但在实际的项目开发中（比如咱们的绿叶网），我们往往希望在页面右上角放上一个切换按钮，让用户自己来决定使用 “亮色模式”，还是 “暗色模式”。
那怎样才能实现类似绿叶网那种 “手动切换主题” 的效果呢？在 Tailwind CSS v4 版本中，我们需要进行以下 2 步的改造。
1. 修改 Tailwind CSS 的检测机制
首先，我们不能再让 Tailwind CSS 那么听操作系统（或浏览器）的话了。因此需要在 CSS 中配置一个自定义变体（@custom-variant），告诉它：“只要我在 HTML 的 <html> 标签上添加了 class="dark"，你就给我启动暗色模式”。
@custom-variant dark (&:where(.dark, .dark *));2. 编写 JavaScript 切换逻辑
是的，我们必须通过 JavaScript 来实现才行。比如给按钮绑定一个点击事件，通过 JavaScript 动态地在 <html> 标签上增加或移除 dark 这个类名。接下来，我们还是到具体的例子中看一下。
示例 2：手动切换暗色模式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@custom-variant dark (&:where(.dark, .dark *));
</style>
</head>
<body class="bg-slate-50 dark:bg-slate-950 flex items-center justify-center min-h-screen transition-colors duration-500 p-4">
<div class="relative bg-white dark:bg-slate-900 p-8 rounded-3xl shadow-xl dark:shadow-none border border-transparent dark:border-slate-800 max-w-md w-full transition-colors duration-500">
<button id="theme-toggle" class="absolute top-4 right-4 w-10 h-10 flex items-center justify-center rounded-full bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-yellow-400 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all cursor-pointer group">
<svg class="w-5 h-5 hidden dark:block group-hover:rotate-45 transition-transform" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 11H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m12.728 0l-.707-.707M6.343 6.343l-.707-.707M12 8a4 4 0 110 8 4 4 0 010-8z"></path>
</svg>
<svg class="w-5 h-5 block dark:hidden group-hover:-rotate-12 transition-transform" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
</svg>
</button>
<h2 class="text-2xl font-bold text-slate-900 dark:text-white">绿叶网</h2>
<p class="mt-4 text-slate-600 dark:text-slate-400 leading-relaxed">
绿叶网专注于教程的易懂性，让完全 0 基础的小白也能更快上手。
</p>
<button class="mt-8 w-full py-3 bg-indigo-500 hover:bg-indigo-600 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white font-bold rounded-xl shadow-lg shadow-indigo-200 dark:shadow-none transition-all cursor-pointer active:scale-95">
沉浸学习
</button>
</div>
<script>
const themeBtn = document.getElementById("theme-toggle");
const oHtml = document.documentElement;
themeBtn.addEventListener("click", () => {
oHtml.classList.toggle("dark");
});
</script>
</body>
</html>默认情况下，页面效果如下图 1 所示。点击右上角按钮后，页面效果如下图 2 所示。
分析：
@custom-variant dark (&:where(.dark, .dark *));上面这句代码用于告诉 Tailwind CSS：只要页面中某个元素（通常是 <html> 标签）拥有了 “.dark” 这个类名，就开始激活它以及它内部所有带有 “dark:” 前缀的样式。
了解了核心原理之后，JavaScript 的逻辑就非常简单了。我们只需要给按钮绑定一个点击事件：当用户点击时，判断 <html> 上是否有 “dark” 这个类名。如果有，则去掉；如果没有，则加上。
