如何在不使用jQuery的情况下用JavaScript为项目新增navy主题？

第一步：用CSS变量统一管理主题样式 #

先把主题相关的颜色、基础样式抽成CSS变量，切换主题时只需要替换根元素的类名，不用修改大量样式代码：

/* 默认浅色主题 */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --primary-color: #4285f4;
}

/* 深色主题 */
.dark {
  --bg-color: #121212;
  --text-color: #ffffff;
  --primary-color: #64b5f6;
}

/* 新增藏青色主题 */
.navy {
  --bg-color: #0a192f;
  --text-color: #e6f1ff;
  --primary-color: #64ffda;
}

/* 全局样式绑定变量 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

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

第二步：添加主题切换的HTML控件 #

用按钮组作为切换入口（也可以用下拉选择器，逻辑一致）：

<div class="theme-switch-group">
  <button class="theme-btn" data-theme="light">浅色主题</button>
  <button class="theme-btn" data-theme="dark">深色主题</button>
  <button class="theme-btn" data-theme="navy">藏青色主题</button>
</div>

第三步：JavaScript实现切换与持久化 #

// 获取所有主题切换按钮
const themeBtns = document.querySelectorAll('[data-theme]');
// 本地存储的键名，用于保存用户选择的主题
const THEME_STORAGE_KEY = 'user-selected-theme';

// 切换主题的核心函数
function switchTheme(themeName) {
  // 先移除所有主题类名，避免冲突
  document.documentElement.classList.remove('light', 'dark', 'navy');
  // 添加当前选中的主题类名
  document.documentElement.classList.add(themeName);
  // 把选择保存到本地存储，刷新页面后保持主题
  localStorage.setItem(THEME_STORAGE_KEY, themeName);
}

// 页面初始化时加载主题
function initTheme() {
  // 优先读取本地存储的主题，没有则用默认的light
  const savedTheme = localStorage.getItem(THEME_STORAGE_KEY) || 'light';
  switchTheme(savedTheme);
}

// 给每个按钮绑定点击事件
themeBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    const targetTheme = btn.getAttribute('data-theme');
    switchTheme(targetTheme);
  });
});

// 页面加载完成后初始化主题
document.addEventListener('DOMContentLoaded', initTheme);

可选优化：匹配系统主题偏好 #

如果需要优先匹配用户的系统主题设置，可以修改初始化函数：

function initTheme() {
  const savedTheme = localStorage.getItem(THEME_STORAGE_KEY);
  if (!savedTheme) {
    // 检测系统是否设置了深色模式
    const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
    const defaultTheme = prefersDarkMode ? 'dark' : 'light';
    switchTheme(defaultTheme);
  } else {
    switchTheme(savedTheme);
  }
}

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