如何在JS中使用localStorage设置style.backgroundColor实现多页暗黑模式持久化

实现方案 #

你只需要补全localStorage存储逻辑 + 增加页面初始化时读取存储状态的逻辑即可，修改后的完整代码如下：

导航按钮代码（无需修改，和原有保持一致） #

<li class="nav-item">
    <a class="nav-link" data-widget="navbar-search" href="#" role="button" onclick="dark()">
      <i class="far fa-moon"></i>
    </a>
</li>

<li class="nav-item">
    <a class="nav-link" data-widget="navbar-search" href="#" role="button" onclick="light()">
      <i class="fas fa-sun"></i>
    </a>
</li>

修改后的JS逻辑 #

<script>
// 页面DOM加载完成后自动初始化主题
document.addEventListener('DOMContentLoaded', function() {
    const savedColor = localStorage.getItem('color');
    // 如果有存储的主题色就用存储的，没有默认用亮色
    if(savedColor) {
        document.getElementsByClassName("content-wrapper")[0].style.backgroundColor = savedColor;
    } else {
        document.getElementsByClassName("content-wrapper")[0].style.backgroundColor = "#F4F6F9";
    }
})

function dark(){
    document.getElementsByClassName("content-wrapper")[0].style.backgroundColor="#454D55";
    localStorage.setItem("color", "#454D55");
}

function light(){
    document.getElementsByClassName("content-wrapper")[0].style.backgroundColor = "#F4F6F9";
    // 亮色模式也把配置存到localStorage
    localStorage.setItem("color", "#F4F6F9");
}
</script>

生效说明 #

• 所有页面都需要引入这段相同的JS代码即可实现多页面主题同步
• 存储在localStorage里的配置不会随页面刷新、浏览器关闭（除非手动清缓存）丢失，切换一次后全局生效
• 如果后续需要修改更多样式（比如文字颜色、边框色等），可以扩展存储的字段，除了存背景色也可以存主题标识，批量切换样式类更方便。

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