如何在EJS环境中通过btn-night按钮切换stylesheet实现深色模式？

1. 给目标样式表添加唯一ID #

先修改第14行的样式表标签，添加id属性让JS能精准定位元素：

<link id="theme-stylesheet" rel="stylesheet" href="/dist/css/skins/ralue-theme.min.css">

2. 编写核心切换逻辑 #

在页面中添加以下JavaScript代码（建议放在</body>标签前，或借助DOMContentLoaded确保DOM加载完成）：

// 获取按钮和样式表元素
const themeToggleBtn = document.querySelector('.btn-night');
const themeSheet = document.getElementById('theme-stylesheet');

// 页面加载时恢复用户之前的主题偏好
document.addEventListener('DOMContentLoaded', () => {
  const savedTheme = localStorage.getItem('userTheme');
  if (savedTheme) {
    themeSheet.href = savedTheme;
    // 更新按钮显示文本（可选，提升体验）
    themeToggleBtn.textContent = savedTheme.includes('ralack') ? '切换浅色模式' : '切换深色模式';
  }
});

// 绑定按钮点击事件
themeToggleBtn.addEventListener('click', () => {
  // 判断当前主题状态
  const isLightTheme = themeSheet.href.includes('ralue-theme');
  // 切换对应的样式表路径
  const newThemePath = isLightTheme 
    ? '/dist/css/skins/ralack-theme.min.css' 
    : '/dist/css/skins/ralue-theme.min.css';

  // 更新样式表
  themeSheet.href = newThemePath;
  // 保存主题到本地存储，刷新页面后保持状态
  localStorage.setItem('userTheme', newThemePath);
  // 更新按钮文本
  themeToggleBtn.textContent = isLightTheme ? '切换浅色模式' : '切换深色模式';
});

3. （可选）优化按钮视觉反馈 #

添加CSS样式，让按钮在不同主题下有明显区分：

.btn-night {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* 浅色主题下的按钮样式 */
.btn-night {
  background-color: #2d3748;
  color: #fff;
}

/* 深色主题下的按钮样式 */
.btn-night.light-toggle {
  background-color: #fff;
  color: #2d3748;
  border: 1px solid #2d3748;
}

如果用上述CSS，记得在JS的切换逻辑里给按钮加/移除light-toggle类：

// 在点击事件中添加
themeToggleBtn.classList.toggle('light-toggle');
// 页面加载时初始化类状态
if (savedTheme) {
  themeToggleBtn.classList.toggle('light-toggle', savedTheme.includes('ralack'));
}

4. EJS相关注意事项 #

• 确保JS代码在按钮和样式表标签渲染完成后执行，要么放在页面底部，要么依赖DOMContentLoaded事件（代码中已包含）。
• 若使用EJS布局模板，可把主题切换的JS代码放在公共footer模板中，避免重复编写。

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