求助：无法实现多页面深色与浅色主题切换功能

核心实现逻辑 #

要实现全站主题同步生效，核心是用浏览器的localStorage存储用户的主题选择，每个页面加载时读取该值并应用对应主题；点击切换按钮时更新存储值，同时实时切换当前页面主题。

1. 统一所有页面的HTML结构 #

每个页面都添加相同的主题切换按钮，建议放在页面头部等显眼位置：

<button id="theme-toggle">切换到深色模式</button>

2. 用CSS变量定义双主题样式 #

通过CSS变量封装两种主题的配色，切换时只需修改根元素属性即可批量更新样式：

/* 浅色主题（默认） */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --link-color: #0066cc;
  --card-bg: #f5f5f5;
}

/* 深色主题 */
[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
  --link-color: #66b3ff;
  --card-bg: #2d2d2d;
}

/* 全局样式应用变量 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
  margin: 0;
  padding: 0;
}

a {
  color: var(--link-color);
}

.card {
  background-color: var(--card-bg);
  padding: 1rem;
  border-radius: 8px;
}

3. 通用JavaScript切换逻辑（所有页面引入） #

编写可复用的脚本，处理主题初始化、切换和存储逻辑：

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

// 页面加载时初始化主题
function initTheme() {
  // 优先读取本地存储的主题设置
  const savedTheme = localStorage.getItem('theme');
  // 无存储时，匹配系统深色模式偏好
  const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  const targetTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light');

  if (targetTheme === 'dark') {
    document.documentElement.setAttribute('data-theme', 'dark');
    themeToggle.textContent = '切换到浅色模式';
  } else {
    document.documentElement.removeAttribute('data-theme');
    themeToggle.textContent = '切换到深色模式';
  }
}

// 点击按钮切换主题
function toggleTheme() {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

  if (newTheme === 'dark') {
    document.documentElement.setAttribute('data-theme', 'dark');
    themeToggle.textContent = '切换到浅色模式';
  } else {
    document.documentElement.removeAttribute('data-theme');
    themeToggle.textContent = '切换到深色模式';
  }

  // 将新主题存储到本地，实现跨页面同步
  localStorage.setItem('theme', newTheme);
}

// 绑定事件
document.addEventListener('DOMContentLoaded', initTheme);
themeToggle.addEventListener('click', toggleTheme);

注意事项 #

• 所有页面必须引入上述相同的CSS和JavaScript代码，确保样式和逻辑统一
• 如果你的原有代码中存在硬写的颜色值，需要替换为CSS变量，否则切换主题时无法生效
• localStorage存储的主题设置会一直保留，直到用户清除浏览器缓存或手动修改

内容的提问来源于stack exchange，提问作者ASilva