网站深色/浅色/系统主题切换按钮点击无响应问题求助

原代码中的核心错误 #

1. 错误的事件监听：按钮元素(<button>)不会触发change事件，应该监听click事件。
2. 属性值类型判断错误：aria-pressed属性返回的是字符串（"true"/"false"），原代码中用=== false比较永远不会成立，应该用=== "false"。
3. DOM元素操作对象错误：pressed.setAttribute('aria-pressed', !pressed)里的pressed是布尔值，不是DOM元素，应该操作按钮元素本身。
4. 按钮状态未同步更新：点击按钮时没有将其他按钮的aria-pressed设为false，会导致多个按钮同时显示选中状态。
5. 函数调用错误：applyColorScheme函数定义没有参数，但调用时传入了colorScheme，属于无效传参。
6. 初始化状态未正确同步：页面加载时没有根据localStorage的值正确设置所有按钮的选中状态。

修正后的完整代码 #

调整后的CSS（新增手动主题覆盖规则）

原CSS仅依赖系统偏好设置，需要添加data-color-scheme属性的变量覆盖，确保手动选择的主题优先生效：

:root[data-color-scheme="dark"] {
  --canvas: var(--ref-black);
  --canvas-text: var(--ref-white);
  --button-color: var(--ref-white);
}

:root[data-color-scheme="light"] {
  --canvas: var(--ref-white);
  --canvas-text: var(--ref-black);
  --button-color: var(--ref-black);
}

修复后的JS代码

// scheme picker
(() => {
  const colorSchemeSwitchers = document.querySelectorAll('[data-color-scheme]');

  function removeColorScheme() {
    localStorage.removeItem('color-scheme');
  }

  function saveColorScheme(colorScheme) {
    if (colorScheme === 'system') {
      removeColorScheme();
      return;
    }
    localStorage.setItem('color-scheme', colorScheme);
  }

  function updateButtonStates(activeScheme) {
    colorSchemeSwitchers.forEach(button => {
      const scheme = button.getAttribute('data-color-scheme');
      button.setAttribute('aria-pressed', scheme === activeScheme);
    });
  }

  function applyColorScheme() {
    const storedScheme = localStorage.getItem('color-scheme');
    const activeScheme = storedScheme || 'system';

    if (storedScheme) {
      document.documentElement.setAttribute('data-color-scheme', storedScheme);
    } else {
      document.documentElement.removeAttribute('data-color-scheme');
    }
    updateButtonStates(activeScheme);
  }

  function colorSchemeSwitcherHandler() {
    colorSchemeSwitchers.forEach(button => {
      button.addEventListener('click', () => {
        const selectedScheme = button.getAttribute('data-color-scheme');
        saveColorScheme(selectedScheme);
        applyColorScheme();
      });
    });
  }

  document.addEventListener('DOMContentLoaded', () => {
    colorSchemeSwitcherHandler();
    applyColorScheme();
  });
})();

修复说明 #

• 事件监听修正：将change事件替换为click事件，确保按钮点击能触发逻辑。
• 状态同步逻辑：新增updateButtonStates函数，统一管理所有按钮的aria-pressed状态，确保同一时间只有一个按钮处于选中状态。
• 类型判断优化：设置aria-pressed时直接用布尔值，浏览器会自动转换为合法的字符串属性值。
• 主题应用逻辑整合：applyColorScheme函数同时处理localStorage读取、根元素属性设置和按钮状态更新，逻辑更统一清晰。
• 手动主题优先级：新增的CSS规则会在用户手动选择主题后，覆盖系统偏好设置的样式，确保主题切换即时生效。

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