:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --accent-color: #007bff;
}

.dark-theme {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
  --accent-color: #00d4ff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease;
}
button {
  background-color: var(--accent-color);
}

<button id="theme-toggle">切换主题</button>

const toggleButton = document.getElementById('theme-toggle');

toggleButton.addEventListener('click', () => {
  document.body.classList.toggle('dark-theme');
});

// 页面加载时恢复上次选择
if (localStorage.getItem('theme') === 'dark') {
  document.body.classList.add('dark-theme');
}

toggleButton.addEventListener('click', () => {
  document.body.classList.toggle('dark-theme');
  
  if (document.body.classList.contains('dark-theme')) {
    localStorage.setItem('theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
  }
});

const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

if (localStorage.getItem('theme') === null) {
  if (prefersDark) {
    document.body.classList.add('dark-theme');
  }
}
</font>

这样新用户打开页面会自动匹配系统主题，更贴心。

基本上就这些。HTML 提供结构，CSS 变量管理样式，J*aScript 控制交互，三者协作就能做出流畅的主题切换功能。不复杂但容易忽略细节，比如加过渡动画、保存状态、适配系统设置等，补上就完整了。