通过JavaScript切换css主题的核心是操作类名或CSS变量。1. 使用class切换：在CSS中定义theme-light和theme-dark类，JS通过修改body的className或classlist实现主题切换。2. 利用CSS自定义属性：在:root中定义–bg-color和–text-color变量，JS调用setProperty动态更新变量值，适合灵活配色需求。3. 结合localStorage持久化：页面加载时从localStorage读取保存的主题（如’theme-dark’），并应用对应类名；切换时同时更新类名和存储，确保用户偏好在刷新后仍保留。4. 使用data属性管理：通过设置html元素的data-theme属性为’dark’或’light’，配合属性选择器和JS切换逻辑，语义清晰且易于集成。根据项目复杂度选择方案：简单场景推荐class切换，高灵活性需求可选CSS变量，务必结合localStorage提升用户体验。
要实现用 JavaScript 动态切换 CSS 主题样式，核心思路是通过操作 HTML 元素的类名或直接修改 CSS 自定义属性（CSS Variables），从而触发不同主题的显示。以下是几种常见且实用的方法。
使用 class 切换主题
这是最常用、结构清晰的方式。预先在 CSS 中定义多个主题类，然后通过 JavaScript 切换元素的 class。
CSS 示例：
body { transition: background-color 0.3s, color 0.3s; } .theme-light { background-color: #fff; color: #333; } .theme-dark { background-color: #333; color: #fff; }
JavaScript 切换代码：
function setTheme(theme) { document.body.className = theme; } // 使用示例 setTheme('theme-dark'); setTheme('theme-light');
可以配合按钮点击事件使用：
document.getElementById('dark-mode').addEventListener('click', () => { document.body.classList.remove('theme-light'); document.body.classList.add('theme-dark'); });
利用 CSS 自定义属性动态更新
使用 CSS 变量可以在不改变 class 的情况下，通过 JavaScript 直接修改主题颜色值。
CSS 定义变量：
:root { --bg-color: #fff; --text-color: #333; } body { background-color: var(--bg-color); color: var(--text-color); transition: all 0.3s; }
JavaScript 修改变量：
function changeTheme(bg, text) { document.documentElement.style.setProperty('--bg-color', bg); document.documentElement.style.setProperty('--text-color', text); } // 切换到深色 changeTheme('#333', '#fff'); // 切换回浅色 changeTheme('#fff', '#333');
这种方式适合需要更灵活配色的场景，比如用户自定义颜色。
结合 localStorage 持久化主题选择
用户切换主题后，应记住偏好，下次访问时自动应用。
// 页面加载时恢复主题 window.addEventListener('DOMContentLoaded', () => { const savedTheme = localStorage.getItem('theme') || 'theme-light'; document.body.className = savedTheme; }); // 切换并保存 function switchToDark() { document.body.className = 'theme-dark'; localStorage.setItem('theme', 'theme-dark'); } function switchToLight() { document.body.className = 'theme-light'; localStorage.setItem('theme', 'theme-light'); }
这样用户无论刷新还是重新进入页面，都能保持上次选择的主题。
使用 data 属性管理主题状态
你也可以用 data-theme 属性来标记当前主题，便于维护和扩展。
// HTML <html data-theme="light"> // CSS [data-theme="dark"] { --bg-color: #222; --text-color: #eee; } // JavaScript function toggleTheme() { const html = document.documentElement; const current = html.getAttribute('data-theme'); const next = current === 'dark' ? 'light' : 'dark'; html.setAttribute('data-theme', next); localStorage.setItem('data-theme', next); }
这种方式语义清晰，易于与现代前端框架集成。
基本上就这些。选哪种方式取决于项目复杂度：简单项目用 class 切换，需要灵活性可用 CSS 变量，记得配合本地存储提升体验。