如何让现有明暗模式切换控件同时切换两张CSS样式表

嘿，我帮你找出问题啦！你的代码里有几个小细节错误导致样式表切换没生效，咱们一步步修正：

问题分析 #

1. 变量名重复冲突：你在toggle函数里两次声明了var input，第二次获取的是样式表的<link>元素，这会覆盖之前获取的复选框元素，导致后续判断逻辑混乱。
2. 错误的判断条件：你尝试用input.checked判断是否切换样式表，但此时input已经变成了<link>元素（它没有checked属性），应该基于原来的复选框状态来判断。
3. 未定义的变量：你使用了theme.setAttribute，但从未定义过theme变量，需要用你获取到的样式表链接元素来操作。

修正后的完整JavaScript代码 #

function toggle(){
  // 获取复选框元素，变量名保留为input（对应复选框）
  var input = document.getElementById("checkBox");
  // 获取样式表链接元素，换个不冲突的变量名
  var themeLink = document.getElementById("theme-link");
  // 获取模式标签元素
  var modeLabel = document.getElementById("modelabel");

  // 切换标签文字颜色 + 样式表 + 标签文字
  if(input.checked == true){
    modeLabel.style.color = "#6d5f94";
    themeLink.setAttribute('href', 'dark-styles.css');
    modeLabel.innerHTML = "Dark Mode";
  } else{
    modeLabel.style.color = "#dc92b9";
    themeLink.setAttribute('href', 'light-styles.css');
    modeLabel.innerHTML = "Light Mode";
  }
}

额外优化小提示（可选） #

如果希望页面刷新后保持用户选择的主题，可以把复选框的状态存在localStorage里，比如在页面加载时读取状态并设置样式表：

// 页面加载时执行，恢复上次选择的主题
window.onload = function() {
  var input = document.getElementById("checkBox");
  var themeLink = document.getElementById("theme-link");
  var modeLabel = document.getElementById("modelabel");
  
  // 读取本地存储的主题状态
  var isDarkMode = localStorage.getItem("darkMode") === "true";
  
  if(isDarkMode){
    input.checked = true;
    modeLabel.style.color = "#6d5f94";
    themeLink.setAttribute('href', 'dark-styles.css');
    modeLabel.innerHTML = "Dark Mode";
  } else {
    input.checked = false;
    modeLabel.style.color = "#dc92b9";
    themeLink.setAttribute('href', 'light-styles.css');
    modeLabel.innerHTML = "Light Mode";
  }
}

// 修改toggle函数，添加存储逻辑
function toggle(){
  var input = document.getElementById("checkBox");
  var themeLink = document.getElementById("theme-link");
  var modeLabel = document.getElementById("modelabel");

  if(input.checked == true){
    modeLabel.style.color = "#6d5f94";
    themeLink.setAttribute('href', 'dark-styles.css');
    modeLabel.innerHTML = "Dark Mode";
    localStorage.setItem("darkMode", "true");
  } else{
    modeLabel.style.color = "#dc92b9";
    themeLink.setAttribute('href', 'light-styles.css');
    modeLabel.innerHTML = "Light Mode";
    localStorage.setItem("darkMode", "false");
  }
}

内容的提问来源于stack exchange，提问作者mj1234