js 实现更换主题

使用 CSS 变量实现主题切换

通过 CSS 变量定义主题颜色，JavaScript 动态修改变量值实现切换。

:root {
  --primary-color: #3498db;
  --background-color: #ffffff;
  --text-color: #333333;
}

.dark-theme {
  --primary-color: #9b59b6;
  --background-color: #2c3e50;
  --text-color: #ecf0f1;
}

function toggleTheme() {
  document.body.classList.toggle('dark-theme');
}

通过类名切换主题

定义不同主题的样式类，JavaScript 切换类名。

.light-theme {
  background-color: white;
  color: black;
}

.dark-theme {
  background-color: black;
  color: white;
}

function setTheme(themeName) {
  document.body.className = themeName;
}

使用 localStorage 保存主题偏好

结合 localStorage 实现主题记忆功能。

function saveThemePreference(theme) {
  localStorage.setItem('theme', theme);
}

function loadThemePreference() {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    setTheme(savedTheme);
  }
}

// 页面加载时调用
loadThemePreference();

完整实现示例

const themeToggle = document.getElementById('theme-toggle');
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');

function applyTheme(theme) {
  document.body.className = theme;
  localStorage.setItem('theme', theme);
}

function toggleTheme() {
  const currentTheme = localStorage.getItem('theme');
  const newTheme = currentTheme === 'dark-theme' ? 'light-theme' : 'dark-theme';
  applyTheme(newTheme);
}

// 初始化主题
const savedTheme = localStorage.getItem('theme') || 
                  (prefersDarkScheme.matches ? 'dark-theme' : 'light-theme');
applyTheme(savedTheme);

// 添加事件监听
themeToggle.addEventListener('click', toggleTheme);

响应系统偏好

自动检测用户系统主题偏好。

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

function handleColorSchemeChange(e) {
  const newTheme = e.matches ? 'dark-theme' : 'light-theme';
  applyTheme(newTheme);
}

colorSchemeQuery.addListener(handleColorSchemeChange);

使用 CSS 媒体查询

通过 prefers-color-scheme 媒体查询实现系统级主题适配。

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #9b59b6;
    --background-color: #2c3e50;
    --text-color: #ecf0f1;
  }
}

这些方法可以根据项目需求单独或组合使用，实现灵活的主题切换功能。