如何在HTML页面内实现主题切换开关（替代浏览器样式切换）

嘿，我来帮你搞定这个主题切换按钮的功能！你已经通过<link rel="alternate stylesheet">配置了可切换主题，这一步做得很到位，现在只需要用JavaScript来控制这些样式表的启用状态，就能实现页面内的一键切换啦。

第一步：确保样式表的配置规范 #

首先，建议给你的默认主题样式表也加上title属性（比如title="light"），这样浏览器能把它和深色主题视为一组可切换的选项，方便我们后续操作：

<!-- 默认浅色主题 -->
<link rel="stylesheet" href="css/light.css" title="light">
<!-- 备选深色主题 -->
<link rel="alternate stylesheet" href="css/dark.css" title="dark">

小贴士：不带title的样式表会始终生效，适合放一些全局通用的基础样式。

第二步：编写主题切换的JavaScript函数 #

核心逻辑是找到所有带title的样式表，然后切换它们的disabled属性——因为浏览器同一时间只会启用一个带title的样式表：

function switchTheme() {
  // 获取所有可切换的主题样式表
  const themeStyleSheets = Array.from(document.querySelectorAll('link[rel*="stylesheet"][title]'));
  
  // 找到当前正在启用的主题
  const activeTheme = themeStyleSheets.find(sheet => !sheet.disabled);
  
  // 找到要切换到的目标主题（这里假设只有两个主题，你可以根据需求扩展）
  const targetTheme = themeStyleSheets.find(sheet => sheet.title !== activeTheme.title);
  
  // 切换启用状态
  activeTheme.disabled = true;
  targetTheme.disabled = false;
  
  // 可选：把用户的主题偏好存到localStorage，下次打开页面自动应用
  localStorage.setItem('userPreferredTheme', targetTheme.title);
}

第三步：给按钮绑定点击事件 #

有两种方式可以实现，推荐第二种（分离HTML和JS代码，更易维护）：

方式一：直接在按钮上绑定

<button onclick="switchTheme()">Switch Theme</button>

方式二：用事件监听（推荐）

// 等待DOM加载完成后绑定事件
window.addEventListener('DOMContentLoaded', () => {
  const switchBtn = document.querySelector('button');
  switchBtn.addEventListener('click', switchTheme);
});

第四步：优化记忆用户偏好 #

为了提升体验，我们可以在页面加载时自动应用用户之前选择的主题，不用每次打开都重新切换：

window.addEventListener('DOMContentLoaded', () => {
  // 获取存储的主题偏好，默认用light
  const savedTheme = localStorage.getItem('userPreferredTheme') || 'light';
  
  const themeStyleSheets = Array.from(document.querySelectorAll('link[rel*="stylesheet"][title]'));
  themeStyleSheets.forEach(sheet => {
    // 只启用用户选择的主题
    sheet.disabled = sheet.title !== savedTheme;
  });
});

这样一来，你的按钮就能完美实现主题切换功能，而且还能记住用户的选择哦！

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