本教程详细讲解如何利用javascript、css和html构建一个深色模式切换功能。内容涵盖dom元素选择、css类管理、动态样式应用（特别是如何正确修改特定元素的 border-bottom 颜色），以及通过 localstorage 实现用户偏好持久化，确保页面在不同模式间平滑切换并保持视觉一致性。
在现代网页设计中，提供深色模式（Dark Mode）已成为提升用户体验的重要功能之一。它不仅能减少夜间使用时的视觉疲劳，还能在特定设备上节省电量。本教程将指导您如何使用纯JavaScript、CSS和HTML实现一个功能完善的深色模式切换器，并特别关注如何动态调整特定元素的边框颜色。
1. HTML 结构
首先，我们需要一个简单的HTML结构，包括一个用于切换模式的按钮和一个带有特定类名（例如 .veritas）的 div 元素，其边框颜色需要随模式变化。
深色模式切换教程
此元素的下边框颜色将随模式切换而改变
2. CSS 样式定义
接下来，我们定义页面的基础样式和深色模式下的特定样式。.dark-mode 类将应用于 body 元素，以改变背景和文本颜色。同时，为 .veritas 元素设置初始边框样式。
body {
margin: 0;
height: 100vh; /* 使用vh确保body高度充满视口 */
font-family: sans-serif;
background-color: #FFFFFF; /* 默认浅色模式背景 */
color: #101010; /* 默认浅色模式文本颜色 */
transition: background-color 0.3s ease, color 0.3s ease; /* 平滑过渡 */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.dark-mode {
background-color: #101010; /* 深色模式背景 */
color: #FFFFFF; /* 深色模式文本颜色 */
}
button {
padding: 10px 20px;
margin-bottom: 20px;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f0f0f0;
color: #333;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.dark-mode button {
background-color: #333;
color: #f0f0f0;
border-color: #555;
}
.veritas {
width: 90%;
padding: 20px;
text-align: center;
border-bottom: 1px solid #101010; /* 默认浅色模式下边框颜色 */
transition: border-bottom-color 0.3s ease; /* 平滑过渡 */
}3. JavaScript 逻辑实现
JavaScript 是实现深色模式切换的核心。我们将编写逻辑来：
立即学习“Java免费学习笔记（深入）”；
- 获取DOM元素。
- 定义一个函数来应用主题样式。
- 为按钮添加事件监听器。
- 在页面加载时检查并应用之前保存的用户偏好。
// 1. 获取DOM元素
var toggleBtn = document.getElementById("toggleBtn");
var body = document.getElementsByTagName("body")[0];
// 正确获取具有特定类名的元素。注意：getElementsByClassName 返回一个HTMLCollection，需要通过索引 [0] 获取第一个元素。
var borderDiv = document.getElementsByClassName("veritas")[0];
/**
* 应用主题样式
* @param {boolean} isDarkMode - 如果为true，则应用深色模式；否则应用浅色模式。
*/
function applyTheme(isDarkMode) {
let bgColor, textColor, borderColor;
let buttonText;
if (isDarkMode) {
// 切换到深色模式
body.classList.add("dark-mode");
buttonText = "关闭深色模式";
bgColor = "#101010"; // 深色模式背景色
textColor = "#FFFFFF"; // 深色模式文本颜色
borderColor = "#FFFFFF"; // 深色模式边框颜色
} else {
// 切换到浅色模式
body.classList.remove("dark-mode");
buttonText = "开启深色模式";
bgColor = "#FFFFFF"; // 浅色模式背景色
textColor = "#101010"; // 浅色模式文本颜色
borderColor = "#101010"; // 浅色模式边框颜色
}
// 应用body的背景和文本颜色
body.style.backgroundColor = bgColor;
body.style.color = textColor;
// 检查borderDiv是否存在，然后正确设置其下边框颜色
if (borderDiv) {
borderDiv.style.borderBottomColor = borderColor;
}
// 更新按钮文本
toggleBtn.textContent = buttonText;
// 将用户偏好保存到 localStorage，以便下次访问时记住
localStorage.setItem("theme", isDarkMode ? "dark" : "light");
}
// 2. 为切换按钮添加点击事件监听器
toggleBtn.addEventListener("click", function() {
// 判断当前是否处于深色模式
const isCurrentlyDarkMode = body.classList.contains("dark-mode");
// 切换到相反的模式
applyTheme(!isCurrentlyDarkMode);
});
// 3. 页面加载时，根据 localStorage 中的偏好应用主题
document.addEventListener("DOMContentLoaded", function() {
const savedTheme = localStorage.getItem("theme");
if (savedTheme === "dark") {
applyTheme(true); // 应用深色模式
} else {
// 如果没有保存偏好或偏好为"light"，则默认应用浅色模式
applyTheme(false);
}
});关键点与注意事项
-
DOM 元素选择器的准确性：
- document.getElementById("toggleBtn") 用于通过 id 属性获取唯一元素。
- document.getElementsByClassName("veritas") 用于通过 class 属性获取元素。它返回一个 HTMLCollection（类似数组），因此您需要使用 [0] 来访问第一个匹配的元素，例如 document.getElementsByClassName("veritas")[0]。这是原始问题中导致边框不变化的根本原因之一。
-
CSS 属性设置的正确方式：
- 要改变元素的 border-bottom 颜色，应使用 element.style.borderBottomColor = colorValue;。直接设置 element.style.borderBottom = colorValue; 会覆盖整个 border-bottom 属性（包括宽度和样式），这通常不是我们想要的。
-
利用 CSS 类管理复杂样式：
- 通过在 body 元素上添加或移除 dark-mode 类，可以利用 CSS 的级联特性一次性改变多个元素的样式，使代码更简洁、更易于维护。例如，您可以为深色模式下的链接、段落等定义不同的颜色，而无需在 JavaScript 中逐一修改。
-
localStorage 的应用：
-
代码可维护性和可扩展性：
- 将主题应用逻辑封装在 applyTheme 函数中，提高了代码的复用性和可读性。未来如果需要添加更多主题或样式调整，只需修改此函数即可。
- 在访问 borderDiv 的 style 属性之前进行 if (borderDiv) 检查，可以避免在元素不存在时引发JavaScript错误，增加了代码的健壮性。
总结
通过本教程，您已经学会了如何构建一个功能齐全的深色模式切换器，它不仅能改变页面的背景和文本颜色，还能精确地控制特定元素的边框颜色，并能记住用户的偏好。掌握这些技术将有助于您创建更具交互性和用户友好性的网页应用。在实际项目中，您还可以考虑结合媒体查询 @media (prefers-color-scheme: dark) 来根据用户操作系统的偏好提供默认模式，进一步提升用户体验。
