Cookie无法删除或修改求助：主题持久化功能异常排查

咱们来一步步拆解你遇到的Cookie主题问题，主要是三个核心错误导致的：

1. 恢复主题函数的条件判断用了赋值而非比较 #

你的restoreTheme函数里犯了一个典型的语法错误：

if(document.cookie="theme=dark") { ... }

这里的=是赋值运算符，不是比较运算符==或===。这意味着每次页面加载，都会直接把theme=dark写入Cookie，然后因为赋值表达式的结果是"theme=dark"（真值），直接执行darkTheme()。这就是为什么首次访问就自动生成了深色主题Cookie，完全跳过了默认浅色的逻辑。

2. 主题切换函数的Cookie逻辑混乱 #

在darkTheme和lightTheme里，你同时设置了目标主题Cookie，又尝试删除另一个主题的Cookie——但实际上我们只需要一个theme键来存储当前主题状态，这步操作完全多余。更糟的是，当你点击浅色按钮时，页面刷新后（因为表单提交），错误的restoreTheme又会立刻把Cookie改回dark，让你觉得浅色按钮根本没生效。

3. 提交按钮触发页面刷新 #

你的主题按钮是type="submit"，点击后会触发表单提交，导致页面重新加载。这会再次执行restoreTheme，加上第一个错误，直接把Cookie重置为dark，掩盖了浅色主题的设置效果。

修正后的完整代码 #

1. 添加Cookie获取工具函数 #

先写一个可靠的函数来读取指定名称的Cookie值：

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

2. 修复恢复主题函数 #

用正确的比较逻辑来判断当前主题：

function restoreTheme() {
  const currentTheme = getCookie('theme');
  // 没有Cookie时默认浅色，否则按Cookie值切换
  if (currentTheme === 'dark') {
    darkTheme();
  } else {
    lightTheme();
  }
}

3. 简化主题切换函数并阻止页面刷新 #

去掉多余的Cookie操作，同时阻止表单提交的默认行为：

function darkTheme(e) {
  // 阻止表单提交导致的页面刷新
  if (e) e.preventDefault();
  
  document.body.style.setProperty("--sideNavBackground", "rgb(33,33,33)");
  document.body.style.setProperty("--bodyBackgroundColor", "rgb(17,17,17)");
  document.body.style.setProperty("--sideNavItemBackgroundHover", "rgb(64,64,64)");
  document.body.style.setProperty("--bodyTextColor", "rgb(238,238,238)");
  
  // 设置Cookie，添加路径和过期时间（示例为30天）
  document.cookie = "theme=dark; path=/; max-age=2592000";
}

function lightTheme(e) {
  if (e) e.preventDefault();
  
  document.body.style.setProperty("--sideNavBackground", "rgb(230,230,230)");
  document.body.style.setProperty("--bodyBackgroundColor", "rgb(255,255,255)");
  document.body.style.setProperty("--sideNavItemBackgroundHover", "rgb(199,199,199)");
  document.body.style.setProperty("--bodyTextColor", "rgb(17,17,17)");
  
  document.cookie = "theme=light; path=/; max-age=2592000";
}

4. 修改按钮类型或阻止提交 #

把按钮改成type="button"避免自动提交，或者传递事件参数：

<form>
  <input name="theme" type="button" class="theme_b" id="dark" onclick="darkTheme(event)" value="Dark Theme">
  <input name="theme" type="button" class="theme_b" id="light" onclick="lightTheme(event)" value="Light Theme">
</form>

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