暗黑模式

你将学会什么

• 用 dark: 前缀给任意类名补充深色版本
• 理解「先写浅色语义，再补 dark:」的维护原则
• 判断暗黑模式应该什么时候开始考虑

正文

如果你未来想做一个像 mcourse.app 这样偏技术感的站点，暗黑模式不是后期补丁，而应该从一开始就考虑。最小可用的暗黑写法是：

<section class="bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-100">
  <h2 class="text-xl font-semibold">课程介绍</h2>
  <p class="text-gray-600 dark:text-gray-300">适合大学生自学的实践路径。</p>
</section>

这里的关键原则是：颜色语义先写浅色版本，再补 dark: 版本，而不是复制一套主题。dark:bg-gray-950 表示“在深色模式下用这个背景色”，dark:text-gray-100 表示“在深色模式下用这个文字色”。这样后续维护时，你只改语义，不关心具体颜色值；将来要调整主题，也只需要改一处。

动手练

练习

把上面的 section 复制到你的页面里，再写一个带 dark: 前缀的按钮。完成标准：切换系统深色模式后，区块背景、文字和按钮颜色都会跟着变化，且浅色模式下样式不受影响。

知识检查

先自己回答，再看答案：

1. dark:bg-gray-950 表示什么？
2. 为什么先写浅色版本再补 dark:，而不是复制一套主题类名？
3. 什么时候开始考虑暗黑模式比较合适？

参考答案

1. 在深色模式下使用 gray-950 作为背景色，浅色模式下不生效。
2. 复制整套主题会导致两套样式长期同步维护，语义化写法只改语义、不关心具体颜色值。
3. 想做一个偏技术感或长期维护的站点时，从最开始就按“浅色语义 + dark: 补丁”的写法组织颜色。

本节小结

• dark: 前缀给任意类名补深色版本，浅色版本默认生效
• 原则是“先写浅色语义，再补 dark:”，不复制整套主题
• 维护时只改语义，不需要记住具体颜色值

暗黑模式小测

x

1 / 3

以下哪种写法更适合表达暗黑模式语义？

复制一套 .dark 主题类名先写浅色语义，再补 dark: 版本只写深色背景类放弃暗黑模式

下一题