Bootstrap 5.3 的 data-bs-theme-value 按钮仅能切换一次主题，根本原因在于原生逻辑未动态判断当前主题状态；需结合 localStorage 读取当前主题并取反，才能实现双向循环切换。
bootstrap 5.3 的 `data-bs-theme-value` 按钮仅能切换一次主题，根本原因在于原生逻辑未动态判断当前主题状态；需结合 `localstorage` 读取当前主题并取反，才能实现双向循环切换。
在 Bootstrap 5.3 中，官方文档提供的主题切换示例依赖于 data-bs-theme-value 属性直接赋值，但该方式不具备状态感知能力——点击按钮时总是将主题设为属性值（如 "light"），而不会根据当前实际主题做取反操作，导致第二次点击无效。
要实现可靠的暗色/亮色双向切换，必须主动读取当前生效的主题（优先从 localStorage 获取，其次 fallback 到 data-bs-theme 属性或系统偏好），再将其切换为相反值。以下是推荐的完整解决方案：
✅ 正确实现：状态感知 + localStorage 持久化
// theme.js
function getStoredTheme() {
return localStorage.getItem('theme');
}
function setStoredTheme(theme) {
localStorage.setItem('theme', theme);
}
function getPreferredTheme() {
const storedTheme = getStoredTheme();
if (storedTheme) return storedTheme;
// fallback: 检查 HTML 标签上的 data-bs-theme
return document.documentElement.getAttribute('data-bs-theme') || 'light';
}
function setTheme(theme) {
document.documentElement.setAttribute('data-bs-theme', theme);
}
function showActiveTheme(theme, force = false) {
const activeThemeIcon = document.querySelector('[data-bs-theme-value]');
if (!activeThemeIcon) return;
// 可选：更新按钮文本或图标以反映当前模式
if (force && activeThemeIcon.textContent) {
activeThemeIcon.textContent = theme === 'light' ? 'Switch to Dark' : 'Switch to Light';
}
}
// 初始化：应用首选主题
window.addEventListener('DOMContentLoaded', () => {
const preferredTheme = getPreferredTheme();
setTheme(preferredTheme);
showActiveTheme(preferredTheme);
// 为所有主题切换按钮绑定智能事件
document.querySelectorAll('[data-bs-theme-value]').forEach(button => {
button.addEventListener('click', () => {
// ✅ 关键修复：读取当前存储的主题，取反后设置
const currentTheme = getStoredTheme() || getPreferredTheme();
const nextTheme = currentTheme === 'light' ? 'dark' : 'light';
setStoredTheme(nextTheme);
setTheme(nextTheme);
showActiveTheme(nextTheme, true);
});
});
});? 使用说明
- 确保 <html> 标签初始带有 data-bs-theme="light" 或 "dark"（作为兜底）；
- 按钮无需硬编码 data-bs-theme-value 值（该属性在此方案中仅作触发器，不参与逻辑判断）：
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="button"> Toggle Theme </button> - 如需视觉反馈，可在 showActiveTheme() 中动态更新按钮文字、图标（如 Font Awesome 的 ☀️/?）或添加 active 类。
⚠️ 注意事项
- 不要依赖 data-bs-theme-value 的值做状态判断——它只是静态标记，不是实时状态源；
- localStorage 是主题持久化的关键，务必在 setStoredTheme() 后立即调用 setTheme() 同步 DOM；
- 若用户禁用 JS，建议服务端也支持基于 prefers-color-scheme 的初始渲染，提升渐进增强体验。
通过以上实现，主题切换按钮即可稳定支持无限次双向切换，并自动记忆用户偏好，完全符合 Bootstrap 5.3 官方设计意图。
