# 暗夜之约——明暗之间的优雅 ## 概述 从 2020 年起，几乎所有操作系统都内置了深色模式。用户希望网页应用能跟着系统走——白天浅色，晚上深色。 深色模式不只是在白色背景上把字变白。它需要一整套**明暗调和**的颜色搭配： - 背景用深灰而不是纯黑（纯黑太刺眼） - 文字用浅灰而不是纯白（降低对比度） - 卡片用比背景稍亮的灰色来区分层次 Tailwind 用 `dark:` 变体来处理这一切。 ## dark 变体 ### 基础用法 在任意工具类前加 `dark:`，深色模式下生效： ![](images/09-dark-mode.svg) ```html
``` ### 两种配置方式 **方式一：media 策略**（默认） 自动跟随系统设置： ```html
``` 等价于：`@media (prefers-color-scheme: dark)`。 **方式二：class 策略** 允许用户手动切换。在 v4 中，需要在 CSS 中配置： ```css @import "tailwindcss"; @custom-variant dark (&:where(.dark, .dark *)); ``` 然后通过 JavaScript 在根元素上切换 `dark` 类： ```html ``` 切换按钮的 JavaScript 逻辑： ```javascript // 读取系统偏好 const prefersDark = window.matchMedia('(prefers-color-scheme: dark)') // 切换 dark 类 document.documentElement.classList.toggle('dark', prefersDark.matches) ``` > [!tip] 技巧 > class 策略更灵活。用户选择应该被记住——切换后将偏好存到 localStorage。 ## 深色模式的配色原则 ### 背景层级 深色模式下，用不同深浅的灰色区分层次： ```html
``` | 层级 | 浅色 | 深色 | |------|------|------| | 页面背景 | `bg-white` | `bg-gray-950` | | 卡片/区块 | `bg-gray-50` | `bg-gray-900` | | 悬浮态 | `bg-gray-100` | `bg-gray-800` | | 导航栏/顶部 | `bg-white/70` | `bg-gray-950/70` | ### 文字层级 ```html

主要文字

次要文字

占位文字（深色下适当变亮）

``` ### 边框和分隔线 ```html
边框
``` 深色下的边框要比浅色更暗，避免产生"发光"的错觉。 ## 图片在深色模式下的处理 有些图片在深色背景下显得刺眼，可以降低透明度或加暗： ```html ``` ## 实战：为产品页添加深色主题 ```html 星光科技 · 智能灯

智能台灯 Lumina

光线随你而变。一盏懂你的台灯。

为什么选择 Lumina

🧠

AI 调光

内置传感器实时感知环境光线，自动调整亮度和色温。

👁️

护眼模式

无频闪、低蓝光，通过德国莱茵 TÜV 护眼认证。

🎤

语音控制

支持 Siri、小爱同学、Google Assistant 语音指令。

用户评价

用户

设计师小王

"用了两周，眼睛舒服多了。AI 调光真的很智能。"

用户

程序员大刘

"晚上写代码的时候，灯光会自动变暖，不刺眼。"

用户

学生小林

"期末复习全靠它了，灯光可以跟着时间变化。"

``` 看看 v4 中 `dark:` 变体如何统一处理所有颜色： - `body`：`bg-white dark:bg-gray-950` —— 页面背景从白变为深色 - `

`：`text-gray-900 dark:text-white` —— 标题从深灰变为纯白 - 卡片：`bg-white dark:bg-gray-900 border-gray-100 dark:border-gray-800` —— 卡片底色和边框同步切换 - 导航栏：`bg-white/70 dark:bg-gray-950/70 border-gray-100/50 dark:border-gray-800/50` —— 毛玻璃导航栏也适配深色 - Hero 渐变：`from-blue-50 dark:from-blue-950 via-white dark:via-gray-950 to-purple-50 dark:to-purple-950` —— 渐变背景全深色化 - 图标背景：`from-blue-100 dark:from-blue-900 to-blue-50 dark:to-blue-950` —— 图标容器适配 - 分隔线：`divide-gray-100 dark:divide-gray-800` —— 用户评价的分隔线 - 页脚边框：`border-gray-100 dark:border-gray-800` - `body` 上的 `transition-colors duration-300` —— 切换深色/浅色时有平滑过渡 > [!info] 说明 > 用 Play CDN 预览时，深色模式默认跟随系统偏好。你可以在浏览器开发者工具中切换模拟，或者在系统设置中切换主题来查看效果。 > [!summary] 本章小结 > - `dark:` 变体让深色模式集成变得简单 > - v4 默认使用 `media` 策略（跟随系统），通过 `@custom-variant dark` 切换为 `class` 策略 > - 深色配色原则：背景用 `gray-950`（非纯黑），文字用 `gray-100`（非纯白） > - 搭配 `transition-colors` 让明暗切换更平滑 --- 现在能浅能深，页面适配能力已经很强了。最后一篇，我们来做一个**完整的实战整合**——把前 9 章所有的技巧融会贯通。 --- > 作者: Aphros > URL: https://blog.papergate.top/posts/09.%E6%9A%97%E5%A4%9C%E4%B9%8B%E7%BA%A6%E6%98%8E%E6%9A%97%E4%B9%8B%E9%97%B4%E7%9A%84%E4%BC%98%E9%9B%85/