购物车按钮必须用CSS变量控制所有颜色，且data-theme="dark"必须设在上，否则悬停、禁用、SVG图标等无法正确响应主题切换；硬编码颜色值不随主题变化，导致黑底黑字或白底白字；需同时支持prefers-color-scheme和JS手动切换，且后者优先级更高。
购物车按钮必须用 CSS 变量控制所有颜色，data-theme="dark" 必须挂在 上，否则悬停、禁用、SVG 图标都会出错。
为什么
常见错误是直接写 background-color: #007bff 或 color: #fff——这些硬编码值不会随主题切换而变化。系统切到深色时，按钮可能变成黑底黑字，或白底白字；用户手动切换主题后，按钮颜色卡死不动。
根本原因是：CSS 变量本身不响应 DOM 属性变化，必须靠 html[data-theme="dark"] 这类选择器触发重计算。漏掉 html 前缀、或者只靠 @media (prefers-color-scheme: dark) 定义变量，JS 切换时就完全失效。
- 所有颜色相关属性（
background-color、color、border-color、box-shadow、fill）都得用var(--btn-bg)、var(--btn-text)等变量 -
data-theme必须设在元素上，设在或容器里会导致<input>、滚动条、<select></select>下拉箭头颜色不一致 - 禁用态不能靠
:disabled覆盖颜色，要单独定义--btn-disabled-bg和--btn-disabled-text变量
怎么写 CSS 才让
关键不是“写两套样式”，而是“让一套变量在不同 data-theme 下取不同值”。必须同时支持系统偏好（prefers-color-scheme）和用户手动切换（data-theme），且后者优先级更高。
立即学习“前端免费学习笔记（深入）”；
正确结构示例：
:root {
--btn-bg: #007bff;
--btn-text: #fff;
--btn-hover-bg: #0056b3;
--btn-disabled-bg: #6c757d;
--btn-disabled-text: #fff;
}
html[data-theme="light"] {
--btn-bg: #007bff;
--btn-text: #fff;
--btn-hover-bg: #0056b3;
--btn-disabled-bg: #6c757d;
--btn-disabled-text: #fff;
}
html[data-theme="dark"] {
--btn-bg: #1a3a5f;
--btn-text: #e0e0e0;
--btn-hover-bg: #2a4a6f;
--btn-disabled-bg: #495057;
--btn-disabled-text: #adb5bd;
}
.add-to-cart-btn {
background-color: var(--btn-bg);
color: var(--btn-text);
border: none;
padding: 8px 16px;
border-radius: 4px;
transition: background-color 0.2s;
}
.add-to-cart-btn:hover:not(:disabled) {
background-color: var(--btn-hover-bg);
}
.add-to-cart-btn:disabled {
background-color: var(--btn-disabled-bg);
color: var(--btn-disabled-text);
cursor: not-allowed;
}
- SVG 图标（如购物车图标）必须设
fill="currentColor"，否则无法继承color变量 - 不要在
@media里覆盖:root变量——它只响应系统设置，不响应 JS 切换；html[data-theme]规则才是主控 -
transition要加在基础类（如.add-to-cart-btn）上，而不是:hover里，否则深色模式下 hover 动画可能不生效
JavaScript 切换主题时，按钮为什么没反应
最常踩的坑是：只改了 localStorage，没同步更新 document.documentElement.dataset.theme；或者监听 window.matchMedia 时没注册 change 事件，导致系统设置变更后按钮颜色冻结。
- 初始化时顺序必须是：
localStorage.getItem('theme')→ 有值就用它，否则 fallback 到window.matchMedia('(prefers-color-scheme: dark)').matches - 切换函数里必须同时执行：
document.documentElement.dataset.theme = 'dark'和localStorage.setItem('theme', 'dark') - 监听系统变更必须显式绑定：
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { ... })，不能只读一次.matches - 按钮自身要加
aria-pressed并根据data-theme动态更新，方便屏幕阅读器识别当前状态
复杂点在于：深色模式下，不仅要保证按钮可读，还要确保悬停对比度 ≥ 4.5:1，禁用态视觉明确，且 SVG 图标、边框、阴影全部走同一套变量体系。任何一处硬编码或选择器权重不足，都会导致局部失配——比如按钮变暗了，但购物车图标还是黑的，或者 hover 时背景变浅却没改文字色，瞬间糊掉。
