Bootstrap 5.3主题切换按钮仅生效一次问题求助

问题原因 #

你的按钮固定设置了data-bs-theme-value="light"，配套脚本只处理了从dark切换到light的单向逻辑，没有判断当前主题状态执行反向切换，导致第二次点击时无法触发dark主题的切换。

解决方案 #

1. 调整按钮HTML #

移除固定的data-bs-theme-value，简化按钮结构：

<button type="button" class="btn btn-outline-secondary me-3" id="theme-toggle">Dark/light theme switch</button>

2. 重写theme.js逻辑 #

实现基于当前主题的双向切换，同时同步更新按钮文本提升体验：

// 获取切换按钮和根元素
const themeToggleBtn = document.getElementById('theme-toggle');
const htmlElement = document.documentElement;

// 初始化按钮文本（匹配初始主题）
if (htmlElement.getAttribute('data-bs-theme') === 'dark') {
  themeToggleBtn.textContent = '切换到浅色主题';
} else {
  themeToggleBtn.textContent = '切换到深色主题';
}

// 绑定点击切换事件
themeToggleBtn.addEventListener('click', () => {
  const currentTheme = htmlElement.getAttribute('data-bs-theme');
  // 切换主题值
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  htmlElement.setAttribute('data-bs-theme', newTheme);
  // 更新按钮文本
  themeToggleBtn.textContent = newTheme === 'dark' ? '切换到浅色主题' : '切换到深色主题';
});

3. （可选）保留Bootstrap内置属性的优化方案 #

如果想继续使用data-*属性方式，需要动态更新按钮的目标主题值：

const themeToggleBtn = document.querySelector('[data-bs-toggle="button"]');
const htmlElement = document.documentElement;

themeToggleBtn.addEventListener('click', () => {
  const currentTheme = htmlElement.getAttribute('data-bs-theme');
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  htmlElement.setAttribute('data-bs-theme', newTheme);
  // 更新按钮的目标主题值，确保下一次点击反向切换
  themeToggleBtn.setAttribute('data-bs-theme-value', currentTheme);
  // 同步按钮的active状态（可选）
  themeToggleBtn.classList.toggle('active');
});

关键说明 #

• 核心逻辑是动态判断当前主题状态，而非固定切换到单一主题；
• 若使用Bootstrap的data-bs-toggle="button"，必须同步更新按钮的data-bs-theme-value，否则下一次点击仍会指向原目标主题；
• 同步按钮文本或状态，能让用户更直观感知当前主题模式。

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