JavaScript实现深色模式切换：动态修改元素边框样式与状态管理

<button id="toggleBtn">深色模式已开启</button>
<div class="veritas">
  深色/浅色模式切换时，此边框颜色应随之改变。
</div>

body {
  margin: 0;
  height: 100%;
  transition: background-color 0.3s ease, color 0.3s ease; /* 添加平滑过渡效果 */
}

.dark-mode {
  background-color: #101010;
  color: #FFFFFF;
}

.veritas {
  width: 90%;
  margin: 20px auto; /* 居中显示 */
  padding: 10px;
  border-bottom: 1px solid #101010; /* 默认浅色模式边框 */
  transition: border-bottom-color 0.3s ease; /* 添加平滑过渡效果 */
}

// 错误示例：
// var borderBottom = document.getElementById(".veritas"); // 错误，应该使用类名选择器

// 正确示例：
var borderDiv = document.getElementsByClassName("veritas")[0];

// 错误示例：
// borderBottom.style.borderBottom = borderBottom; // 错误，不能直接赋颜色字符串

// 正确示例：
borderDiv.style.borderBottomColor = borderBottomColorValue; // 正确，只修改边框颜色

// 获取DOM元素
var toggleBtn = document.getElementById("toggleBtn");
var body = document.getElementsByTagName("body")[0];
var borderDiv = document.getElementsByClassName("veritas")[0]; // 正确选择类名为"veritas"的元素

// 添加按钮点击事件监听器
toggleBtn.addEventListener("click", function() {
  var bgColor, textColor, borderBottomColor;

  // 检查body是否包含"dark-mode"类
  if (body.classList.contains("dark-mode")) {
    // 当前是深色模式，切换到浅色模式
    body.classList.remove("dark-mode");
    toggleBtn.textContent = "深色模式已开启";
    bgColor = "#FFFFFF"; // 浅色背景
    textColor = "#101010"; // 浅色文本
    borderBottomColor = "#101010"; // 浅色边框
  } else {
    // 当前是浅色模式，切换到深色模式
    body.classList.add("dark-mode");
    toggleBtn.textContent = "深色模式已关闭";
    bgColor = "#101010"; // 深色背景
    textColor = "#FFFFFF"; // 深色文本
    borderBottomColor = "#FFFFFF"; // 深色边框
  }

  // 应用样式
  body.style.backgroundColor = bgColor;
  body.style.color = textColor;
  borderDiv.style.borderBottomColor = borderBottomColor; // 正确修改边框颜色

  // 保存用户偏好到localStorage
  localStorage.setItem("bgColor", bgColor);
  localStorage.setItem("textColor", textColor);
  localStorage.setItem("borderBottomColor", borderBottomColor); // 保存边框颜色
  localStorage.setItem("isDarkMode", body.classList.contains("dark-mode")); // 保存模式状态
});

// 页面加载时从localStorage恢复用户偏好
document.addEventListener("DOMContentLoaded", function() {
  var savedBgColor = localStorage.getItem("bgColor");
  var savedTextColor = localStorage.getItem("textColor");
  var savedBorderBottomColor = localStorage.getItem("borderBottomColor"); // 获取保存的边框颜色
  var isDarkMode = localStorage.getItem("isDarkMode") === "true"; // 获取保存的模式状态

  if (savedBgColor && savedTextColor && savedBorderBottomColor !== null) {
    body.style.backgroundColor = savedBgColor;
    body.style.color = savedTextColor;
    borderDiv.style.borderBottomColor = savedBorderBottomColor; // 应用保存的边框颜色

    if (isDarkMode) {
      body.classList.add("dark-mode");
      toggleBtn.textContent = "深色模式已关闭";
    } else {
      body.classList.remove("dark-mode");
      toggleBtn.textContent = "深色模式已开启";
    }
  } else {
    // 如果没有保存的偏好，初始化为浅色模式
    body.classList.remove("dark-mode");
    toggleBtn.textContent = "深色模式已开启";
    body.style.backgroundColor = "#FFFFFF";
    body.style.color = "#101010";
    borderDiv.style.borderBottomColor = "#101010";
  }
});