prefers-color-scheme媒体查询可原生响应系统暗黑模式，无需JS监听，但需顶层独立书写@media (prefers-color-scheme: dark)并成对重定义:root变量，配合html{color-scheme:light dark}确保原生控件变色。
直接用 prefers-color-scheme 媒体查询 + 手动触发切换，比任何 JS 库都快、稳、可测。
怎么让浏览器立刻响应系统暗黑模式变化
关键不是监听，而是强制重绘。Chrome 和 Safari 在页面加载后不会主动重查 prefers-color-scheme，除非你触发一次样式重计算或窗口 resize。
- 开发时在控制台执行
window.matchMedia('(prefers-color-scheme: dark)').matches看当前值，别猜 - 改完 CSS 后，按
Cmd+Shift+R（macOS）硬刷新，避免缓存导致媒体查询没重跑 - 用
matchMedia监听不是必须的——多数场景只需首次加载判断，后续靠 CSS 变量自动响应
为什么 :root 里定义的 --bg 变量在暗色下不生效
常见原因是选择器权重或作用域错位。CSS 变量本身不继承，但会沿 DOM 树向下传递；而 @media (prefers-color-scheme: dark) 必须包裹完整变量块，不能只改个别值。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 错误写法：
:root { --bg: #fff; } @media (prefers-color-scheme: dark) { --bg: #111; }→ 第二行无选择器，无效 - 正确写法：
:root { --bg: #fff; } @media (prefers-color-scheme: dark) { :root { --bg: #111; } } - 更稳妥：把暗色变量集中写在
:root[data-theme="dark"]下，再用 JS 切换data-theme属性，调试时直接改 HTML 元素属性即可验证
Chrome DevTools 里怎么模拟暗黑模式
不是点“更多工具 > 渲染”，那个是全局模拟，会影响所有标签页，且不触发 matchMedia 的 change 事件。
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → ⚙️ Settings → Preferences → Appearance → Theme → Dark（这只是 UI 变暗，不影响页面）
- 真正要测页面响应：右上角三个点 → More Tools → Rendering → Emulate CSS media feature
prefers-color-scheme→ 选dark或light - 注意：这个模拟会触发
matchMedia().addEventListener('change', ...)，适合测逻辑；但不会改变系统级设置，所以navigator.userAgent之类不受影响
最易忽略的一点：iOS Safari 对 prefers-color-scheme 的支持从 iOS 13 开始，但早期版本有缓存 bug——切系统主题后不触发页面重绘，必须手动 reload。别在真机上只点一次就下结论。
