当前位置：首页 > JavaScript

js实现简易换肤

2026-04-04 13:27:32JavaScript

简易换肤实现方法

方法一：通过切换CSS类名

定义不同主题的CSS类

.theme-light {
  --bg-color: #ffffff;
  --text-color: #333333;
}

.theme-dark {
  --bg-color: #333333;
  --text-color: #ffffff;
}

HTML结构

<button id="toggleTheme">切换主题</button>
<div class="content">这里是页面内容</div>

JavaScript实现

const toggleBtn = document.getElementById('toggleTheme');
const content = document.querySelector('.content');

toggleBtn.addEventListener('click', () => {
  content.classList.toggle('theme-dark');
  content.classList.toggle('theme-light');
});

方法二：使用CSS变量动态修改

定义CSS变量

:root {
  --primary-color: #4285f4;
  --secondary-color: #34a853;
}

JavaScript修改变量

js实现简易换肤

document.documentElement.style.setProperty('--primary-color', '#ea4335');
document.documentElement.style.setProperty('--secondary-color', '#fbbc05');

方法三：通过link标签切换样式表

HTML引入样式表

<link id="theme-style" rel="stylesheet" href="light-theme.css">

JavaScript切换

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

方法四：使用localStorage持久化主题

js实现简易换肤

保存用户选择

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

页面加载时应用

const currentTheme = localStorage.getItem('theme') || 'light';
document.documentElement.className = currentTheme;

注意事项

使用CSS变量方法时需注意浏览器兼容性
切换主题时考虑添加过渡动画提升用户体验
复杂项目建议使用CSS预处理器管理主题变量
确保主题切换后所有UI元素都能正确响应变化

扩展实现

添加主题切换动画

.content {
  transition: background-color 0.3s ease, color 0.3s ease;
}

多主题切换实现

const themes = ['default', 'dark', 'blue', 'green'];
let currentIndex = 0;

function cycleThemes() {
  currentIndex = (currentIndex + 1) % themes.length;
  document.body.className = themes[currentIndex];
}