通过定义一组css自定义属性（变量）并绑定到 :root 选择器，利用 javascript 切换 data-theme 属性或类名即可实现一键换色。具体做法是在 css 中使用 --primary-color 等变量替代硬编码颜色值，并在 js 中监听点击事件修改根元素的属性，浏览器会自动应用新变量值。
如何定义全局主题变量
在 :root 中声明变量是基础，需将常用的语义化颜色提取为变量。例如定义背景、文字和主色调，确保所有组件引用这些变量而非固定色值。
:root {
--bg-color: #ffffff;
--text-color: #333333;
--primary-color: #007bff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
button {
background-color: var(--primary-color);
}
如何用JS切换主题模式
通过切换 标签上的 data-theme 属性来激活不同的变量集。在 JS 中获取按钮元素并添加点击监听器，切换属性后 CSS 会自动重新计算样式。
立即学习“前端免费学习笔记（深入）”；
// HTML: <button id="toggle">切换主题</button>
const btn = document.getElementById('toggle');
btn.addEventListener('click', () => {
const html = document.documentElement;
const current = html.getAttribute('data-theme');
html.setAttribute('data-theme', current === 'dark' ? 'light' : 'dark');
});
深色模式下变量如何覆盖默认值
当 data-theme 为 dark 时，通过属性选择器 [data-theme="dark"] 重新定义 :root 中的变量值。这种覆盖机制利用了 CSS 层叠规则，无需修改 HTML 结构即可实现视觉反转。
[data-theme="dark"] {
--bg-color: #121212;
--text-color: #ffffff;
--primary-color: #bb86fc;
} 
