主题切换是前端项目中很常见的功能，核心是通过JavaScript动态修改页面生效的样式规则，同时保存用户的偏好设置。下面我们一步步实现完整的主题切换功能。
第一步：定义CSS变量区分不同主题
首先我们需要在CSS根节点定义不同主题的变量，这里以浅色和深色两种主题为例：
/* 定义根节点的CSS变量，默认浅色主题 */
:root {
--bg-color: #ffffff;
--text-color: #333333;
--primary-color: #1890ff;
}
/* 深色主题的类名，应用到html节点时生效 */
.dark-theme {
--bg-color: #1f1f1f;
--text-color: #e5e5e5;
--primary-color: #177ddc;
}
/* 全局样式使用变量 */
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
button {
background-color: var(--primary-color);
color: #ffffff;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}第二步：编写JavaScript切换逻辑
接下来编写切换主题的核心函数，主要包括切换主题类、更新存储、同步切换按钮状态三个部分：
// 获取html根节点
const htmlElement = document.documentElement;
// 获取主题切换按钮，假设按钮id为themeToggle
const themeToggleBtn = document.getElementById('themeToggle');
// 切换主题的函数
function toggleTheme() {
// 判断当前是否是深色主题
const isDark = htmlElement.classList.contains('dark-theme');
if (isDark) {
// 切换到浅色主题，移除深色类
htmlElement.classList.remove('dark-theme');
// 存储用户选择到localStorage
localStorage.setItem('theme', 'light');
} else {
// 切换到深色主题，添加深色类
htmlElement.classList.add('dark-theme');
localStorage.setItem('theme', 'dark');
}
// 更新按钮显示文本
updateToggleBtnText();
}
// 更新切换按钮的显示文本
function updateToggleBtnText() {
const isDark = htmlElement.classList.contains('dark-theme');
themeToggleBtn.textContent = isDark ? '切换到浅色主题' : '切换到深色主题';
}
// 给按钮绑定点击事件
themeToggleBtn.addEventListener('click', toggleTheme);第三步：初始化时读取存储的主题
页面加载时需要先读取localStorage中存储的用户主题偏好，避免刷新后主题重置：
// 页面加载完成后初始化主题
document.addEventListener('DOMContentLoaded', () => {
// 读取存储的主题，默认是light
const savedTheme = localStorage.getItem('theme') || 'light';
if (savedTheme === 'dark') {
htmlElement.classList.add('dark-theme');
} else {
htmlElement.classList.remove('dark-theme');
}
// 初始化按钮文本
updateToggleBtnText();
});实际使用示例
下面是完整的HTML示例，可以直接复制到本地运行测试：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript主题切换示例</title>
<style>
:root {
--bg-color: #ffffff;
--text-color: #333333;
--primary-color: #1890ff;
}
.dark-theme {
--bg-color: #1f1f1f;
--text-color: #e5e5e5;
--primary-color: #177ddc;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
padding: 20px;
font-family: sans-serif;
}
button {
background-color: var(--primary-color);
color: #ffffff;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>主题切换示例</h2>
<p>点击下面的按钮可以切换浅色和深色主题，刷新页面后主题会保持上次的选择。</p>
<button id="themeToggle">切换到深色主题</button>
<script>
const htmlElement = document.documentElement;
const themeToggleBtn = document.getElementById('themeToggle');
function toggleTheme() {
const isDark = htmlElement.classList.contains('dark-theme');
if (isDark) {
htmlElement.classList.remove('dark-theme');
localStorage.setItem('theme', 'light');
} else {
htmlElement.classList.add('dark-theme');
localStorage.setItem('theme', 'dark');
}
updateToggleBtnText();
}
function updateToggleBtnText() {
const isDark = htmlElement.classList.contains('dark-theme');
themeToggleBtn.textContent = isDark ? '切换到浅色主题' : '切换到深色主题';
}
document.addEventListener('DOMContentLoaded', () => {
const savedTheme = localStorage.getItem('theme') || 'light';
if (savedTheme === 'dark') {
htmlElement.classList.add('dark-theme');
} else {
htmlElement.classList.remove('dark-theme');
}
updateToggleBtnText();
});
themeToggleBtn.addEventListener('click', toggleTheme);
</script>
</body>
</html>扩展说明
如果需要支持更多主题，只需要新增对应的CSS类，在切换函数中增加对应的判断逻辑即可。另外如果需要跟随系统的主题偏好自动切换，可以结合window.matchMedia('(prefers-color-scheme: dark)')来监听系统主题变化，实现更智能的主题适配。
JavaScript主题切换CSS变量localStorage前端交互修改时间：2026-05-29 23:36:51