:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --border-color: #dddddd;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
  --border-color: #444444;
}

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

function setTheme(theme) {
  document.documentElement.setAttribute('data-theme', theme);
  localStorage.setItem('theme', theme); // 保存选择
}

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

function detectSystemTheme() {
  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    return 'dark';
  }
  return 'light';
}

// 页面加载时初始化主题
const s*edTheme = localStorage.getItem('theme');
const systemTheme = detectSystemTheme();
const initialTheme = s*edTheme || systemTheme;

setTheme(initialTheme);

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