比亚迪海鸥仪表盘颜色在“设置-显示-仪表主题”中调节，因无独立仪表盘，所有信息集成于15.6英寸中控屏；部分主题随驾驶模式自动切换，且需注意避免在桌面或下拉菜单误操作。
仪表盘主题切换不是改几个颜色值就能稳的——它得同时管住 CSS 变量、data-theme 属性、<meta name="color-scheme">，还要绕过 localStorage 在 Safari 无痕模式下的报错，三者缺一不可。
用 data-theme 而不是 class 切换主题
老项目里直接 document.body.classList.toggle('dark') 很容易失效：第三方组件库（如 ECharts 封装层、Ant Design 衍生组件）可能只认 html[data-theme="dark"]，也可能被已有 .dark class 意外覆盖。更稳妥的是统一走 data-theme：
-
document.documentElement.dataset.theme = "dark"设置值，设空字符串可清空 - CSS 规则必须带
html前缀：html[data-theme="dark"] { --bg: #121212; }，否则子元素定义的同名变量会劫持它 - 避免写
[data-theme="theme-dark"]这类冗余值——JS 设"dark"，CSS 却写错成"theme-dark"，样式根本不会匹配
同步更新 <meta name="color-scheme">
这个 meta 控制安卓 Chrome 93+ 和 Safari 的地址栏、输入框边框、滚动条等系统 UI 颜色。只改页面 CSS 变量但漏掉它，就会出现“页面已黑，输入框边框还是亮灰”的割裂感：
- 初始加载时就读
localStorage.getItem('theme')，再设：document.querySelector('meta[name="color-scheme"]').content = savedTheme === "dark" ? "light dark" : "light" - 每次按钮点击后立刻更新：
document.querySelector('meta[name="color-scheme"]').content = theme === "dark" ? "light dark" : "light" - 注意：该 meta 不响应系统变更，仅声明当前倾向；监听
prefers-color-scheme要另起matchMedia监听器
localStorage 存值 + Safari 无痕兜底
用户点一次深色，刷新就回亮色？大概率是只读了 prefers-color-scheme，没存也没优先读 localStorage：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 首次加载顺序：先
try { localStorage.getItem('theme') }，有值就用；没值才 fallback 到window.matchMedia('(prefers-color-scheme: dark)').matches - 按钮点击后必须存：
localStorage.setItem('theme', theme)，别只改 DOM - Safari 无痕模式下
localStorage会直接抛QuotaExceededError，必须包try/catch，失败时降级为内存变量（不持久但至少本次有效）
CSS 变量必须全收在 :root，且禁用 !important
仪表盘里表格、图表、卡片组件的颜色如果分散在各组件级 CSS 里（比如 .chart { --color: red; }），切换主题时它们不会响应全局变量变更：
- 所有主题色统一定义在
:root下：:root { --text-primary: #333; --bg-card: #fff; } -
html[data-theme="dark"]块内只覆盖这些变量，不新增、不漏项 - 严禁在变量赋值时加
!important，它会锁死后续 JS 的setProperty()或 CSS 层叠更新 - 检查 DevTools 的 Computed Styles 面板，确认目标元素最终取到的变量值来源是
:root还是某个子选择器——这是调试不生效的第一落点
最易忽略的其实是「变量作用域」和「JS 缓存行为」：比如你在初始化时用 getComputedStyle(document.documentElement).getPropertyValue('--bg-card') 读了一次值并缓存在某个配置对象里，之后主题切换了，这个对象里的值却不会再变——它不是响应式引用，只是快照。
