暗黑模式
你将学会什么
Section titled “你将学会什么”- 用
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 表示「在暗黑模式下用这个文字色」。这样后续维护时，你只改语义，不关心具体颜色值；将来要调整主题，也只需要改一处。
dark: 样式怎么跟随系统配色？
Section titled “dark: 样式怎么跟随系统配色？”dark: 前缀的样式默认跟随操作系统配色：系统切到深色时，带 dark: 前缀的类生效；切回浅色时自动停用，不需要额外清理。浏览器感知系统配色的底层机制是 prefers-color-scheme，主流浏览器与桌面、移动端行为一致。检查样式是否生效时，先确认系统当前配色，再检查类名——样式写好了但系统没切换时，页面看起来就像没有生效。在站点内提供手动切换按钮属于另一套方案，需要保存用户的选择并处理「跟随系统」之外的选项，状态管理更复杂；本课采用跟随系统的写法。
dark: 版本只补充深色场景下的颜色差异。结构类（边框、圆角、间距、布局）与配色无关，只写一次，深色与浅色共享这些类，改动结构时不需要处理两套。判断是否值得做暗黑模式，看站点是否长期维护：长期维护的站点从一开始就按「浅色语义 + dark: 补丁」组织颜色；只做短期展示的页面可以不写深色样式，但写类名时不要直接写死颜色值。
怎么维护颜色语义才省事？
Section titled “怎么维护颜色语义才省事？”「先写浅色语义，再补 dark: 版本」的顺序，也决定后续维护路径。新增颜色时先想它在两种模式下的语义，再落成类名；调整主题时只改定义处，组件里的写法保持不变。在组件里直接写具体色值，两种模式都要找一遍，遗漏的概率随之上升；复制整套主题类名的做法更麻烦，两套样式需要长期同步维护，一旦不同步，页面就会出现深浅混合的中间状态，这是最难排查的颜色问题。新增组件时沿用同一套颜色语义，主题调整时所有页面自动保持一致，页面代码里不再出现具体色值。语义化的收益随页面数量增加而累积，页面越多越明显。
暗黑模式怎么自查？
Section titled “暗黑模式怎么自查？”写完整套 dark: 样式后，按固定顺序自查一遍：
- 文字与背景的对比度在深色下更关键，肉眼不确定时用浏览器检查
- 表格、代码块、表单控件在深色下单独确认，避免大块内容刺眼或不可读
- 图片、边框、阴影、半透明遮罩在深色背景下可能需要单独处理，图片容器注意给出边界
- 悬停、聚焦等交互状态在两种模式下都要可辨认，弹出层与菜单是常见的遗漏位置
- 逐页切换系统配色，浅色与深色各看一遍，最后回到浅色确认
dark:的修改没有影响浅色显示
自查时从页面顶部逐段滚动，比跳着看更容易覆盖全部区域。页面更新与新增页面时，把两种模式的检查纳入完成标准，暗黑模式与浅色模式放在同等地位维护。
先自己回答，再看答案：
dark:bg-gray-950表示什么？- 为什么先写浅色版本再补
dark:，而不是复制一套主题类名？ - 什么时候开始考虑暗黑模式比较合适？
参考答案
- 在暗黑模式下使用
gray-950作为背景色，浅色模式下不生效。 - 复制整套主题会导致两套样式长期同步维护，语义化写法只改语义、不关心具体颜色值。
- 想做一个偏技术感或长期维护的站点时，从最开始就按「浅色语义 + dark: 补丁」的写法组织颜色。
dark:前缀给任意类名补深色版本，浅色版本默认生效- 原则是「先写浅色语义，再补 dark:」，不复制整套主题
- 维护时只改语义，不需要记住具体颜色值
- Tailwind CSS 暗黑模式文档——说明 dark: 变体的用法与暗黑模式的配置方式。
- prefers-color-scheme 指南——介绍浏览器如何读取系统配色偏好，以及页面如何响应。