html使用JavaScript + CSS实现亮色和暗色切换功能

戴嘉淑 · 发表于 2025-8-30 03:12:38

实现一个黑暗模式切换功能是现代网页设计中常见的需求。下面是一个完整的示例，展示如何使用 JavaScript + CSS 来实现一个简单的“黑暗模式”切换按钮。

✅ 实现思路

使用
1. CSS
复制代码
定义两种主题样式（亮色和暗色）。
通过 JavaScript 动态切换 HTML 元素的
1. class
复制代码
或
1. data-theme
复制代码
属性。
使用
1. localStorage
复制代码
保存用户选择的主题偏好。

🧩 示例代码

🔹 HTML 部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>黑暗模式切换</title>
<link rel="stylesheet" href="styles.css" rel="external nofollow" />
</head>
<body>
欢迎来到我的网站
<p>这是一个可以切换黑暗模式的页面。</p>
<button id="toggleThemeBtn">切换到暗色模式</button>
<script src="script.js"></script>
</body>
</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");
}
});

复制代码

🌟 进阶优化建议

使用
1. prefers-color-scheme: dark
复制代码
媒体查询来自动匹配系统设置：
1. @media (prefers-color-scheme: dark) {
2. body:not(.dark-mode) {
3. background-color: #121212;
4. color: #ffffff;
5. }
6. }
复制代码
使用
1. data-theme="dark"
复制代码
而不是
1. class
复制代码
，更语义化地控制主题。
可以封装为可复用组件或 React/Vue 插件。
添加动画过渡效果提升用户体验。

完整示例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>黑暗模式切换</title><style> /* 默认亮色主题 */
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;
}
}</style></head><body> 欢迎来到我的网站 <p>这是一个可以切换黑暗模式的页面。</p> <button id="toggleThemeBtn">切换到暗色模式</button><script>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");
}
});</script></body></html>

复制代码

✅ 总结

你现在已经掌握了一个基础但实用的黑暗模式切换功能实现方式：

用 CSS 定义样式；
用 JS 控制类名切换；
用 localStorage 保存用户偏好；
用户体验友好，兼容性好。

到此这篇关于html使用JavaScript + CSS实现亮色和暗色切换功能的文章就介绍到这了,更多相关JavaScript和CSS实现html明暗切换内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

		自动登录	找回密码
密码			立即注册

html使用JavaScript + CSS实现亮色和暗色切换功能

浏览过的版块