如何添加JavaScript函数实现全站HTML页面背景及配色切换？已遇单页生效问题

问题核心在于单页JS状态无法跨页面保留，解决思路是用本地存储持久化配色选择，并在每个页面加载时自动应用保存的配置。以下是具体实现步骤：

1. 用CSS变量统一管理配色（推荐） #

先在全局样式文件（所有页面都引入的.css）中定义基础配色变量，这样切换时只需修改变量值，无需逐个元素调整：

/* 全局样式 */
:root {
  /* 默认浅色配色 */
  --bg-color: #ffffff;
  --text-color: #333333;
  --link-color: #0066cc;
  --button-bg: #0066cc;
  --button-text: #ffffff;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* 平滑过渡 */
}

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

button.theme-btn {
  background-color: var(--button-bg);
  color: var(--button-text);
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

2. 实现配色切换与持久化的JS函数 #

创建公共JS文件（比如theme-switcher.js），所有页面都引入这个文件：

// 预定义可选配色方案
const colorSchemes = {
  light: {
    bg: '#ffffff',
    text: '#333333',
    link: '#0066cc',
    buttonBg: '#0066cc',
    buttonText: '#ffffff'
  },
  dark: {
    bg: '#1a1a1a',
    text: '#f0f0f0',
    link: '#66b3ff',
    buttonBg: '#333333',
    buttonText: '#f0f0f0'
  },
  warm: {
    bg: '#fff8e1',
    text: '#8d6e63',
    link: '#e64a19',
    buttonBg: '#e64a19',
    buttonText: '#ffffff'
  }
};

// 切换配色的核心函数
function switchColorScheme(schemeKey) {
  const scheme = colorSchemes[schemeKey];
  if (!scheme) return;

  // 更新根元素的CSS变量
  const root = document.documentElement;
  root.style.setProperty('--bg-color', scheme.bg);
  root.style.setProperty('--text-color', scheme.text);
  root.style.setProperty('--link-color', scheme.link);
  root.style.setProperty('--button-bg', scheme.buttonBg);
  root.style.setProperty('--button-text', scheme.buttonText);

  // 将选择的配色保存到localStorage，实现跨页面持久化
  localStorage.setItem('activeColorScheme', schemeKey);
}

// 页面加载时自动恢复上次选择的配色
document.addEventListener('DOMContentLoaded', () => {
  // 默认使用浅色方案
  const savedScheme = localStorage.getItem('activeColorScheme') || 'light';
  switchColorScheme(savedScheme);
});

3. 在页面中添加切换控件 #

在任意页面（比如导航栏）添加切换按钮，调用switchColorScheme函数即可：

<!-- 示例切换按钮 -->
<button class="theme-btn" onclick="switchColorScheme('light')">浅色</button>
<button class="theme-btn" onclick="switchColorScheme('dark')">深色</button>
<button class="theme-btn" onclick="switchColorScheme('warm')">暖色调</button>

关键注意事项 #

• 确保所有页面都引入上述全局CSS和JS文件，避免重复代码
• 如果不需要平滑过渡效果，可以去掉CSS中的transition属性
• localStorage仅在当前浏览器有效，若需跨设备同步，需配合后端用户存储（比如用户账户关联配色偏好）
• 若不使用CSS变量，也可直接修改document.body.style.backgroundColor等属性，但维护成本更高

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