实现一个黑暗模式切换功能是现代网页设计中常见的需求。下面是一个完整的示例，展示如何使用 JavaScript + CSS 来实现一个简单的“黑暗模式”切换按钮。
✅ 实现思路
- 使用
CSS定义两种主题样式（亮色和暗色）。 - 通过 JavaScript 动态切换 HTML 元素的
class或data-theme属性。 - 使用
localStorage保存用户选择的主题偏好。
🧩 示例代码
🔹 HTML 部分
黑暗模式切换 欢迎来到我的网站这是一个可以切换黑暗模式的页面。
🔹 CSS 部分 (styles.css)
/* 默认亮色主题 */
body {
background-color: #ffffff;
color: #000000;
transition: background-color 0.3s, color 0.3s;
}
/* 暗色主题样式 */
.dark-mode {
background-color: #121212;
color: #ffffff;
}
🔹 JavaScript 部分 (script.js)
const toggleButton = document.getElementById("toggleThemeBtn");
// 页面加载时检查 localStorage 中是否有之前保存的主题
if (localStorage.getItem("theme") === "dark") {
document.body.classList.add("dark-mode");
toggleButton.textContent = "切换到亮色模式";
}
// 切换主题函数
toggleButton.addEventListener("click", () => {
document.body.classList.toggle("dark-mode");
// 修改按钮文字
if (document.body.classList.contains("dark-mode")) {
toggleButton.textContent = "切换到亮色模式";
localStorage.setItem("theme", "dark");
} else {
toggleButton.textContent = "切换到暗色模式";
localStorage.setItem("theme", "light");
}
});
🌟 进阶优化建议
-
使用
prefers-color-scheme: dark媒体查询来自动匹配系统设置：@media (prefers-color-scheme: dark) { body:not(.dark-mode) { background-color: #121212; color: #ffffff; } } -
使用
data-theme="dark"而不是class，更语义化地控制主题。 -
可以封装为可复用组件或 React/Vue 插件。
-
添加动画过渡效果提升用户体验。
完整示例
黑暗模式切换 /* 默认亮色主题 */ body { background-color: #ffffff; color: #000000; transition: background-color 0.3s, color 0.3s; } /* 暗色主题样式 */ .dark-mode { background-color: #121212; color: #ffffff; } @media (prefers-color-scheme: dark) { body:not(.dark-mode) { background-color: #121212; color: #ffffff; } } 欢迎来到我的网站这是一个可以切换黑暗模式的页面。
const toggleButton = document.getElementById("toggleThemeBtn"); // 页面加载时检查 localStorage 中是否有之前保存的主题 if (localStorage.getItem("theme") === "dark") { document.body.classList.add("dark-mode"); toggleButton.textContent = "切换到亮色模式"; } // 切换主题函数 toggleButton.addEventListener("click", () => { document.body.classList.toggle("dark-mode"); // 修改按钮文字 if (document.body.classList.contains("dark-mode")) { toggleButton.textContent = "切换到亮色模式"; localStorage.setItem("theme", "dark"); } else { toggleButton.textContent = "切换到暗色模式"; localStorage.setItem("theme", "light"); } });
✅ 总结
你现在已经掌握了一个基础但实用的黑暗模式切换功能实现方式：
- 用 CSS 定义样式；
- 用 JS 控制类名切换；
- 用 localStorage 保存用户偏好；
- 用户体验友好，兼容性好。
到此这篇关于html使用JavaScript + CSS实现亮色和暗色切换功能的文章就介绍到这了,更多相关JavaScript和CSS实现html明暗切换内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
