17370845950

主题切换本质是动态更新CSS自定义属性，通过document.documentElement.style.setProperty修改:root变量值，配合data-theme属性与prefers-color-scheme实现用户选择＞系统偏好＞默认的三层优先级，避免样式闪烁与失效。

主题切换本质是 CSS 变量的动态重载，不是重写整套样式

直接替换 标签或切换 class 名看似简单，但容易导致样式闪烁、伪类失效、媒体查询丢失。真正可控的方式是把主题当作一组 :root 变量的集合，在运行时只更新这些变量值，其余样式保持不变。

• 所有颜色、间距、圆角等可变属性必须通过 var(--color-bg) 引用，不能写死值
• 主题切换只需执行 document.documentElement.style.setProperty('--color-bg', '#2d3748')
• 避免在 JS 中拼接完整 CSS 字符串注入 —— 会破坏 CSP 策略且无法被 DevTools 追踪

用 CSS 自定义属性 + prefers-color-scheme 实现自动回退

用户没手动选主题时，应尊重系统偏好。但 prefers-color-scheme 仅支持 light/dark，而业务可能有 blue、high-contrast 等多主题。解决方案是分层控制：

:root {
  --color-bg: #fff;
  --color-text: #1a202c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="blue"]) {
    --color-bg: #1a202c;
    --color-text: #e2e8f0;
  }
}

• data-theme 属性由 JS 控制，表示用户主动选择的主题
• @media 规则只在 data-theme 未显式设置时生效，形成“用户选择 > 系统偏好 > 默认”优先级
• 注意：不要用 !important 覆盖变量，它会让后续 JS 动态修改失效

主题 JSON 配置 + JS 批量注入变量更易维护

把每个主题写成一个对象，比分散在多个 :root 块里更利于团队协作和 CI 检查。

const themes = {
  light: {
    '--color-bg': '#ffffff',
    '--color-border': '#e2e8f0',
    '--radius-base': '4px'
  },
  dark: {
    '--color-bg': '#1a202c',
    '--color-border': '#4a5568',
    '--radius-base': '6px'
  }
};

• 切换时遍历对象调用 setProperty()，无需硬编码变量名
• 可配合 localStorage 持久化当前主题：localStorage.setItem('ui-theme', 'dark')
• 首次加载时先读取 localStorage，再检查 prefers-color-scheme，避免白屏闪动

第三方工具如 css-vars-ponyfill 仅在 IE11 必须支持时才引入

现代浏览器（Chrome 49+、Firefox 31+、Safari 9.1+）原生支持 CSS 自定义属性，无需 polyfill。强行引入 css-vars-ponyfill 会导致：

• 所有 var() 被转译为静态值，失去运行时动态更新能力
• 无法响应 matchMedia 变化，prefers-color-scheme 切换后不生效
• 打包体积增加 ~12KB，且与 Shadow DOM 兼容性差

如果项目已放弃 IE，删掉相关依赖，用原生方案更轻、更稳、更可调试。

真正难的不是切换动作本身，而是主题变量是否覆盖了全部可变样式点，以及是否漏掉了伪类、SVG fill、box-shadow 等隐式依赖颜色的地方 —— 这些地方最容易在暗色模式下突然变黑或不可见。