如何实现夜间/日间模式切换按钮：保存至localStorage且全站生效

嘿，作为编程新手能想到这些功能已经超棒啦！我来一步步给你拆解怎么实现，都是简单易懂的基础代码，放心跟着做～

第一步：准备日间/夜间模式的CSS文件 #

先创建两个CSS文件，分别对应两种主题：

light-mode.css（日间模式）：

body {
  background-color: #fff;
  color: #333;
}
/* 可以继续添加其他元素的日间样式，比如导航栏、卡片等 */

dark-mode.css（夜间模式）：

body {
  background-color: #1a1a1a;
  color: #f0f0f0;
}
/* 对应调整其他元素的夜间样式，确保可读性 */

然后在所有页面的<head>里引入默认样式表，给<link>标签加个唯一ID，方便JS操作：

<link rel="stylesheet" id="theme-stylesheet" href="light-mode.css">

第二步：添加全站可见的切换按钮 #

因为要让按钮在所有页面显示，最简单的方式是把按钮代码放到每个页面的固定位置（比如顶部导航栏、页面 footer 或者设置页的显眼区域）。如果是静态HTML，直接复制这段代码到每个页面即可：

<button id="theme-toggle-btn">切换夜间模式</button>

为了避免重复写JS逻辑，创建一个共用的脚本文件theme-switcher.js，然后在所有页面的<body>末尾引入它：

<script src="theme-switcher.js"></script>

第三步：编写切换逻辑与本地存储 #

打开theme-switcher.js，写入以下代码，注释已经写得很清楚啦：

// 获取页面上的样式表和按钮元素
const themeStylesheet = document.getElementById('theme-stylesheet');
const themeToggleBtn = document.getElementById('theme-toggle-btn');

// 页面加载时初始化主题：读取本地存储的设置
function initTheme() {
  const savedTheme = localStorage.getItem('selected-theme');
  // 如果本地存储有"dark"记录，就启用夜间模式，否则用日间模式
  savedTheme === 'dark' ? setDarkMode() : setLightMode();
}

// 切换为日间模式的函数
function setLightMode() {
  themeStylesheet.href = 'light-mode.css';
  themeToggleBtn.textContent = '切换夜间模式';
  localStorage.setItem('selected-theme', 'light'); // 保存到本地存储
}

// 切换为夜间模式的函数
function setDarkMode() {
  themeStylesheet.href = 'dark-mode.css';
  themeToggleBtn.textContent = '切换日间模式';
  localStorage.setItem('selected-theme', 'dark'); // 保存到本地存储
}

// 给按钮添加点击事件监听
themeToggleBtn.addEventListener('click', () => {
  const currentTheme = localStorage.getItem('selected-theme');
  // 根据当前主题切换到相反模式
  currentTheme === 'dark' ? setLightMode() : setDarkMode();
});

// 页面加载完成后执行初始化
document.addEventListener('DOMContentLoaded', initTheme);

第四步：优化设置页的按钮显示 #

你要求按钮在设置页添加，同时全站显示——刚才的方式已经满足了（因为每个页面都有按钮）。如果想让设置页的按钮更突出，可以给它加个专属class，比如：

<!-- 设置页的按钮 -->
<button id="theme-toggle-btn" class="settings-theme-btn">切换主题模式</button>

然后在CSS里添加样式，让它更显眼：

.settings-theme-btn {
  padding: 12px 24px;
  font-size: 18px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

小提示 #

• 注意文件路径：如果你的CSS或JS文件放在子文件夹里（比如css/、js/），要把代码里的路径改成css/light-mode.css、js/theme-switcher.js这种，避免找不到文件
• 测试的时候，切换主题后刷新页面、打开其他页面，看看主题是否能保持，这就说明localStorage生效了
• 如果后续要加更多主题，只要新增CSS文件，然后修改JS里的切换逻辑就行，扩展性很强

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