使用CSS变量和JavaScript实现主题切换：在:root中定义默认颜色，创建.dark-theme类覆盖变量，通过JS切换类名并结合localStorage保存用户偏好，支持跟随系统主题，实现平滑切换效果。
想让网页支持暗色和亮色主题切换？用 HTML、CSS 变量配合少量 JavaScript 就能轻松实现。关键在于把颜色定义在 CSS 自定义属性中，再通过 JS 动态切换类名或根变量，完成主题变更。
使用 CSS 变量定义主题
在 :root 中定义默认主题的颜色变量，再为另一种主题（比如暗色）创建单独的类，覆盖原有变量。
:root {
--bg-color: #ffffff;
--text-color: #333333;
--accent-color: #007bff;
}
.dark-theme {
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
--accent-color: #00d4ff;
}
这样所有用到这些变量的地方都会自动响应变化。例如：
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s ease;
}
button {
background-color: var(--accent-color);
}
添加主题切换按钮
在页面中放一个按钮，用于触发主题切换。
立即学习“Java免费学习笔记（深入）”；
<button id="theme-toggle">切换主题</button>
这个按钮不需传参或复杂结构，点击后由 JavaScript 控制逻辑。
用 JavaScript 切换主题
获取按钮并监听点击事件，切换 body 或 html 元素上的主题类名。
猫眼课题宝
25
5分钟定创新选题，3步生成高质量标书！
25
查看详情
const toggleButton = document.getElementById('theme-toggle');
toggleButton.addEventListener('click', () => {
document.body.classList.toggle('dark-theme');
});
每次点击，dark-theme 类会被添加或移除，CSS 变量随之更新，界面自动重绘。
如果想记住用户偏好，可结合 localStorage：
// 页面加载时恢复上次选择
if (localStorage.getItem('theme') === 'dark') {
document.body.classList.add('dark-theme');
}
toggleButton.addEventListener('click', () => {
document.body.classList.toggle('dark-theme');
if (document.body.classList.contains('dark-theme')) {
localStorage.setItem('theme', 'dark');
} else {
localStorage.setItem('theme', 'light');
}
});
优化体验：默认跟随系统
首次访问时，可判断用户的系统偏好。
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (localStorage.getItem('theme') === null) {
if (prefersDark) {
document.body.classList.add('dark-theme');
}
}
</font>
这样新用户打开页面会自动匹配系统主题，更贴心。
基本上就这些。HTML 提供结构，CSS 变量管理样式，JavaScript 控制交互，三者协作就能做出流畅的主题切换功能。不复杂但容易忽略细节，比如加过渡动画、保存状态、适配系统设置等，补上就完整了。
相关标签：
html css javascript java js ssl ai win 点击事件 重绘 JavaScript css html JS 事件
大家都在看：
如何在HTML中插入搜索框_HTML form搜索类型与实时搜索功能实现
html在线代码安全管理 html在线防护漏洞的最佳实践
html编辑器如何大小写转换 html编辑器快速修改命名的技巧
html函数如何实现页面跳转链接 html函数锚链接的详细使用方法
HTML必填字段怎么设置_HTML表单必填Required属性
html在线代码安全管理 html在线防护漏洞的最佳实践
html编辑器如何大小写转换 html编辑器快速修改命名的技巧
html函数如何实现页面跳转链接 html函数锚链接的详细使用方法
HTML必填字段怎么设置_HTML表单必填Required属性
本站资料仅供学习交流使用请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负！
THE END
暂无评论内容