可通过浏览器devtools模拟prefers-color-scheme：chrome/edge在rendering中设置，safari在响应式设计模式下切换appearance，firefox需启用css媒体查询模拟；该操作仅影响当前标签页渲染，不改变系统设置。
如何用 prefers-color-scheme 模拟深色模式切换
浏览器本身不提供“强制开启设备黑夜模式”的开关，但所有现代浏览器（Chrome 76+、Firefox 67+、Safari 12.1+）都支持通过 prefers-color-scheme 媒体查询响应系统级设置。测试的关键不是“模拟设备”，而是让 CSS 真实响应这个媒体特性。
开发时最直接的方式是利用浏览器 DevTools 的渲染偏好覆盖功能：
- Chrome / Edge：打开 DevTools → ⚙️ Settings → Preferences → Rendering → Emulate CSS media feature
prefers-color-scheme→ 选dark或light - Safari：Develop → Enter Responsive Design Mode → ⚙️ → Appearance → Dark / Light
- Firefox：DevTools → ☰ → Settings → Advanced Settings → Enable “CSS Media Query Emulation” → 切换下拉框
注意：这个操作只影响当前标签页的渲染，不改变系统设置，也不触发 window.matchMedia 的真实监听——但对纯 CSS 测试完全够用。
@media (prefers-color-scheme: dark) 的写法陷阱
很多人写成 @media (prefers-color-scheme: dark) { ... } 后发现样式没生效，常见原因不是语法错，而是优先级或覆盖逻辑问题。
- 确保该规则在 CSS 文件中位置靠后，或使用足够具体的 selector（比如
.card.dark-mode .title不如直接用.card .title配合媒体查询可靠） - 不要嵌套在其他媒体查询里（如
@media (min-width: 768px) { @media (prefers-color-scheme: dark) { ... } }），部分旧版 Safari 不支持嵌套媒体查询 -
prefers-color-scheme是“用户偏好”，不是“设备能力”。它不会因为屏幕亮度变化而动态切换，只随系统设置变更触发一次重计算
简单验证是否被识别：在 DevTools 的 Styles 面板里，勾选/取消 prefers-color-scheme 模拟，看对应 CSS 规则是否加删除线（表示未匹配）。
JavaScript 怎么监听系统黑夜模式变化
如果需要根据深色模式做 JS 行为调整（比如加载不同图标、修改 canvas 渲染逻辑），必须用 window.matchMedia，而不是读取 localStorage 或 class 名。
- 正确写法：
const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)'); - 监听变化：
darkModeQuery.addEventListener('change', e => { console.log(e.matches); });（注意：Safari 14+ 才支持addEventListener，旧版需用darkModeQuery.addListener） - 首次判断：
if (darkModeQuery.matches) { /* 当前是深色 */ }，别漏掉这一步，否则页面初始化就错
容易踩坑的是：在 SSR 或静态生成场景（如 Next.js、Vue SSG）中，window 不存在，这段 JS 必须包裹在 if (typeof window !== 'undefined') 里，否则构建报错。
真机调试时为什么看不到效果
在手机上打开本地开发服务器（如 http://192.168.x.x:3000）却始终显示浅色样式，大概率是因为：
- iOS Safari 对非 HTTPS 的
localhost或局域网地址，会禁用部分高级特性（包括prefers-color-scheme），尤其 iOS 15–16 有明确限制 - Android Chrome 在某些定制 ROM（如 MIUI、ColorOS）里，系统深色开关可能只作用于系统 UI，不透传给 WebView
- 你的开发服务器没启用 HTTPS，而部分安卓浏览器要求 HTTPS 才允许读取系统偏好
临时解法：用 ngrok 或 localtunnel 将本地服务映射成 HTTPS 链接，再用手机访问；或者直接在真机上用 Safari 打开 https://developer.mozilla.org 页面，确认其标题栏是否随系统变黑——这是验证设备是否真正支持该特性的最快方式。
复杂点在于：你没法控制用户设备的系统行为，所以最终上线前，必须把深色模式当作“可选增强”，而非功能前提。样式降级、JS 回退逻辑、以及用户手动切换开关的兜底方案，一个都不能少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
