css颜色变量与主题切换实现方法

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --primary-color: #007bff;
}
<p>/<em> 深色主题变量 </em>/
[data-theme="dark"] {
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
--primary-color: #00d4ff;
}</p>

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}
<p>.btn-primary {
background-color: var(--primary-color);
border: none;
}</p>

function setTheme(theme) {
  document.documentElement.setAttribute('data-theme', theme);
}
<p>// 示例：点击按钮切换
document.getElementById('toggle-theme').addEventListener('click', () => {
const current = document.documentElement.getAttribute('data-theme');
setTheme(current === 'dark' ? 'light' : 'dark');
});</p>

// 启动时恢复上次选择
const savedTheme = localStorage.getItem('theme') || 'light';
setTheme(savedTheme);
<p>// 切换时保存
document.getElementById('toggle-theme').addEventListener('click', () => {
const current = document.documentElement.getAttribute('data-theme');
const next = current === 'dark' ? 'light' : 'dark';
setTheme(next);
localStorage.setItem('theme', next);
});</p>

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-color: #1a1a1a;
    --text-color: #f0f0f0;
  }
}

if (savedTheme === 'auto') {
  const sysPref = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  setTheme(sysPref);
}