如何检测当前加载的CSS样式表，实现页面跳转时保留所选主题

核心思路 #

要实现页面跳转后保持选中的主题，需要把用户的主题选择存储在本地（比如localStorage），然后在每个页面加载时读取这个存储值，自动应用对应的CSS样式表。

具体实现步骤 #

1. 修改主题切换函数，添加本地存储逻辑 #

更新你的change_theme函数，在切换样式表的同时，把当前选择的主题路径保存到localStorage中：

function change_theme(sheet) {
    const styleElement = document.getElementById('pagestyle');
    styleElement.setAttribute('href', sheet);
    // 保存主题到本地存储
    localStorage.setItem('selectedTheme', sheet);
}

2. 页面加载时自动应用保存的主题 #

在每个HTML页面的<head>中添加一段脚本，页面加载时检查localStorage里的主题设置，如果存在就应用对应的样式表：

window.addEventListener('DOMContentLoaded', function() {
    const savedTheme = localStorage.getItem('selectedTheme');
    const styleElement = document.getElementById('pagestyle');
    // 如果有保存的主题，就替换默认样式表
    if (savedTheme) {
        styleElement.setAttribute('href', savedTheme);
    }
});

3. 修正导航链接的小问题 #

你当前的Change Theme按钮存在两处问题：onclick属性无效，且href会触发首页跳转。修改为：

<li><a id="mybtn" href="javascript:void(0)">Change Theme ▾</a></li>

4. 统一所有页面的样式表ID #

确保每个HTML页面的样式表链接都使用相同的id="pagestyle"，比如products.html和aboutUs.html里的样式表链接也要写成：

<link id="pagestyle" rel="stylesheet" type="text/css" href="css/mainstyle.css">

原理说明 #

• localStorage是浏览器提供的本地存储机制，数据会持久保存（除非用户手动清除浏览器缓存），跨页面访问时可以读取到相同的存储值。
• 页面加载时的脚本会优先读取本地存储的主题设置，覆盖默认的样式表路径，从而实现跳转页面后主题保持一致。

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