当前位置：首页 > JavaScript

js 实现更换主题

2026-02-02 21:09:46JavaScript

实现主题切换的方法

使用 CSS 变量和 JavaScript 切换类名

定义不同主题的 CSS 变量，通过 JavaScript 切换 body 或根元素的类名来改变主题。

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

.dark-theme {
  --primary-color: #2980b9;
  --background-color: #2c3e50;
}

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

通过修改 link 标签动态加载不同样式表

创建多个主题的 CSS 文件，通过 JavaScript 动态切换 link 标签的 href 属性。

function setTheme(themeName) {
  const link = document.getElementById('theme-style');
  link.href = `${themeName}.css`;
}

使用 localStorage 保存用户主题偏好

结合 localStorage 保存用户选择的主题，下次访问时自动加载。

function setTheme(themeName) {
  localStorage.setItem('theme', themeName);
  document.documentElement.className = themeName;
}

function loadTheme() {
  const theme = localStorage.getItem('theme') || 'light-theme';
  setTheme(theme);
}

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

完整的主题切换组件实现

创建一个完整的主题切换按钮组件，包含状态管理和样式切换。

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

const themeToggle = document.getElementById('theme-toggle');
const currentTheme = localStorage.getItem('theme') || 'light';

document.documentElement.classList.add(currentTheme);

themeToggle.addEventListener('click', () => {
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  document.documentElement.classList.remove(currentTheme);
  document.documentElement.classList.add(newTheme);
  localStorage.setItem('theme', newTheme);
  currentTheme = newTheme;
});

响应式主题切换

根据系统偏好自动切换主题，同时允许用户手动覆盖。

js 实现更换主题

const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
const currentTheme = localStorage.getItem('theme');

if (currentTheme) {
  document.documentElement.classList.add(currentTheme);
} else if (prefersDark.matches) {
  document.documentElement.classList.add('dark-theme');
}

prefersDark.addListener((e) => {
  if (!localStorage.getItem('theme')) {
    document.documentElement.classList.toggle('dark-theme', e.matches);
  }
});

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