HTML 本身无夜间模式开关，真正起作用的是 CSS 的 @media (prefers-color-scheme) 查询配合系统深色设置；浏览器是否触发该查询完全取决于操作系统/浏览器的深色模式配置，网页无法单方面强制启用。
HTML 本身没有“夜间模式”开关，它只是静态标记语言；真正起作用的是 CSS 的 @media (prefers-color-scheme) 查询 + 浏览器系统级深色设置。手动强制开启深色主题看 HTML 页面，关键不在 HTML，而在浏览器行为或 CSS 控制逻辑。
浏览器如何触发 prefers-color-scheme: dark
这个媒体查询是否生效，完全取决于操作系统/浏览器的深色模式设置，不是网页能单方面决定的。常见情况：
- macOS：系统设置 → 外观 → 选择“深色”；Safari / Chrome 会自动识别
- Windows 10/11：设置 → 个性化 → 颜色 → “选择默认应用模式”设为“暗色”
- Chrome 浏览器（调试用）：打开
chrome://flags→ 搜索force-dark-mode→ 启用并重启（仅限开发测试，不推荐长期使用） - Firefox：暂无原生强制开关，需靠扩展或开发者工具临时修改
prefers-color-scheme
在 HTML/CSS 中响应深色主题的正确写法
不能只靠 JS 切换 class，否则无法匹配系统偏好，也影响可访问性。标准做法是用媒体查询分层覆盖：
body {
background-color: #fff;
color: #333;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #e0e0e0;
}
}
注意：
立即学习“前端免费学习笔记（深入）”；
-
@media (prefers-color-scheme: dark)必须写在常规样式之后，否则不会覆盖 - 不要用
!important硬顶，优先用选择器权重或更具体的规则 - 表单控件、图片、SVG 等也需要单独适配，比如
input边框、button背景等
为什么加了 @media 却没效果？常见坑
多数问题出在环境或写法上：
- 系统没开深色模式 → 媒体查询根本不触发，检查系统设置最直接
- CSS 文件没被加载或有语法错误 → 打开开发者工具的「Styles」面板，看对应规则是否显示为灰色（未生效）
- 用了
<meta name="color-scheme" content="dark">但误以为它能强制切换主题 → 它只提示浏览器“此页面支持深色”，不改变当前 scheme - 在本地双击打开 HTML（
file://协议），某些浏览器（如 Safari）会禁用prefers-color-scheme→ 改用本地服务器（如python3 -m http.server）测试
真正的难点从来不是“怎么写 CSS”，而是理解 prefers-color-scheme 是一个被动响应机制，它依赖系统信号，且在 file:// 下行为不一致。如果项目必须支持手动切换（比如用户点击按钮），那就得用 class 控制 + JS + 本地存储，和系统偏好解耦——但这就不再是“浏览器开启深色主题”的范畴了。
