购物车按钮的CSS变量必须定义在:root并用html[data-theme="dark"]覆盖，而非仅依赖prefers-color-scheme媒体查询；需同步更新localStorage、data-theme及meta color-scheme以确保全链路主题一致。
购物车按钮的 CSS 变量必须定义在 :root 里，不能只靠 @media (prefers-color-scheme: dark)
很多开发者以为加个媒体查询就能让按钮自动变暗，结果手动切换主题时按钮颜色纹丝不动。根本原因是 @media (prefers-color-scheme: dark) 只响应系统设置变更，不响应 JS 主动触发的 dataset.theme 切换。
正确做法是把所有颜色变量（比如 --cart-bg、--cart-text、--cart-border）统一写在 :root 中，并用属性选择器覆盖：
:root {
--cart-bg: #f8f9fa;
--cart-text: #212529;
--cart-border: #dee2e6;
}
html[data-theme="dark"] {
--cart-bg: #343a40;
--cart-text: #f8f9fa;
--cart-border: #495057;
}
.cart-btn {
background-color: var(--cart-bg);
color: var(--cart-text);
border-color: var(--cart-border);
}
- 漏掉
html[data-theme="dark"]前缀会导致样式不生效——浏览器不会匹配到:root下的变量重定义 - 别在
.cart-btn.dark里重复写颜色，那会破坏变量复用性，也和主题系统脱节 - 如果按钮用了 SVG 图标，记得给
<svg></svg>加fill="var(--cart-text)"，否则图标颜色不会随主题变
localStorage 存的是用户选择，不是系统偏好；按钮点击后必须同步更新 data-theme 和 <meta name="color-scheme">
用户点一次“加入购物车”按钮，再点主题开关，发现按钮边框还是浅灰、地址栏仍是白色——这是典型的元信息不同步。
购物车按钮本身不决定主题，但它所处的上下文（页面整体）需要保持视觉一致。所以每次切换主题时，除了改 document.documentElement.dataset.theme，还得立刻更新：
立即学习“前端免费学习笔记（深入）”；
-
localStorage.setItem('theme', 'dark')或'light' document.documentElement.dataset.theme = 'dark'document.querySelector('meta[name="color-scheme"]').content = 'light dark'
尤其注意第三项：安卓 Chrome 和 Safari 会据此调整输入框焦点色、滚动条 thumb、地址栏背景等系统级 UI 元素。不更新它，购物车弹窗里的 <input> 边框就还是亮色，和深色按钮形成割裂。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
按钮交互反馈（hover / active / disabled）也要用变量，且需检查对比度是否达标
暗黑模式下，:hover 背景若只是简单变深一级（比如从 #343a40 到 #23272b），人眼几乎看不出变化，可访问性不达标。
建议按 WCAG AA 级标准控制文本与背景的对比度（至少 4.5:1），并为交互状态单独定义变量：
:root {
--cart-hover-bg: #495057;
--cart-active-bg: #212529;
--cart-disabled-bg: #6c757d;
--cart-disabled-text: #adb5bd;
}
.cart-btn:hover { background-color: var(--cart-hover-bg); }
.cart-btn:active { background-color: var(--cart-active-bg); }
.cart-btn:disabled {
background-color: var(--cart-disabled-bg);
color: var(--cart-disabled-text);
}
- 别用
opacity实现禁用态——它会降低所有内容（包括文字）的对比度，在深色背景下更难读 - 如果按钮带徽章（如购物车角标
.cart-badge），它的变量也得放进同一套体系，比如--cart-badge-bg - Safari 对
:disabled的深色渲染有延迟，建议加pointer-events: none辅助
第三方组件（如 Stripe Button、PayPal SDK）的暗黑适配不能靠 CSS 变量
像 <stripe-buy-button></stripe-buy-button> 或 PayPal 的内嵌按钮，它们运行在 shadow DOM 或 iframe 里，你的 :root 变量进不去。
这类组件通常提供 theme="dark" 属性或初始化参数，必须显式传入：
- Stripe Buy Button 支持
data-theme="dark"属性，且要求父容器有data-theme="dark" - PayPal Buttons SDK 初始化时要加
theme: "dark"配置项 - 如果组件没提供暗色选项，只能用
filter: invert(1) hue-rotate(180deg)强制翻转——但会破坏图标语义，仅作兜底
最易被忽略的是：这些组件的加载时机往往晚于主题初始化。务必在 document.documentElement.dataset.theme 设置完成后再调用 SDK 初始化，否则它们会按默认亮色渲染，后续无法重绘。
