Bootstrap 5.3 的 data-bs-theme-value 按钮默认不支持双向切换，需手动判断当前主题状态并动态取反，结合 localStorage 持久化存储才能实现可靠的暗色/亮色主题循环切换。
bootstrap 5.3 的 `data-bs-theme-value` 按钮默认不支持双向切换，需手动判断当前主题状态并动态取反，结合 localstorage 持久化存储才能实现可靠的暗色/亮色主题循环切换。
在 Bootstrap 5.3 中，官方文档提供的主题切换示例依赖于 data-bs-theme-value 属性直接赋值，但该方式未考虑当前实际主题状态——点击按钮时总是将 data-bs-theme 设为属性值（如 "light"），导致第二次点击仍设为 "light"，无法实现「暗 ⇄ 亮」的翻转逻辑。根本原因在于：切换逻辑缺失状态感知，未读取当前主题值进行取反操作。
正确做法是：每次点击时先获取当前已生效的主题（优先从 localStorage 读取， fallback 到 html[data-bs-theme] 或系统偏好），再将其切换为相反值。以下是经过验证的完整解决方案：
// theme.js
function getStoredTheme() {
return localStorage.getItem('theme')
}
function setStoredTheme(theme) {
localStorage.setItem('theme', theme)
}
function getPreferredTheme() {
const storedTheme = getStoredTheme()
if (storedTheme) return storedTheme
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}
function setTheme(theme) {
document.documentElement.setAttribute('data-bs-theme', theme)
}
function showActiveTheme(theme, updateToggle = false) {
const activeToggle = document.querySelector(`[data-bs-theme-value="${theme}"]`)
const inactiveToggles = document.querySelectorAll(`[data-bs-theme-value]:not([data-bs-theme-value="${theme}"])`)
if (updateToggle && activeToggle) {
activeToggle.classList.add('active')
}
inactiveToggles.forEach(t => t.classList.remove('active'))
}
// 初始化：设置初始主题并同步按钮状态
document.addEventListener('DOMContentLoaded', () => {
const preferredTheme = getPreferredTheme()
setTheme(preferredTheme)
showActiveTheme(preferredTheme)
// 为所有主题切换按钮绑定智能翻转逻辑
document.querySelectorAll('[data-bs-theme-value]').forEach(button => {
button.addEventListener('click', () => {
const currentTheme = getStoredTheme() ||
document.documentElement.getAttribute('data-bs-theme') ||
getPreferredTheme()
const nextTheme = currentTheme === 'light' ? 'dark' : 'light'
setStoredTheme(nextTheme)
setTheme(nextTheme)
showActiveTheme(nextTheme, true)
})
})
})
✅ 关键要点说明：
- 状态感知优先：通过 getStoredTheme() 读取 localStorage，确保跨页面刷新后主题一致；若无存储，则回退到 DOM 属性或系统偏好。
- 动态取反逻辑：currentTheme === 'light' ? 'dark' : 'light' 是核心，避免硬编码赋值。
- UI 同步：showActiveTheme() 主动更新按钮的 .active 类，提升用户体验（需配合 Bootstrap 的 data-bs-toggle="button" 使用）。
- 无需 jQuery：原生 addEventListener 更轻量、兼容性更好，且 Bootstrap 5.3 已移除 jQuery 依赖。
⚠️ 注意事项：
- 确保 标签初始 data-bs-theme 值与 localStorage 或系统偏好一致，否则初始化可能错乱；建议移除 HTML 中的硬编码 data-bs-theme="dark"，交由 JS 统一控制。
- 若使用多个主题切换按钮（如分别标记 data-bs-theme-value="light" 和 data-bs-theme-value="dark"），上述代码会自动识别并高亮当前有效按钮。
- 首次访问时，若用户未操作，主题将按系统偏好（prefers-color-scheme）自动启用，符合无障碍与用户体验最佳实践。
通过以上实现，即可彻底解决「切换仅生效一次」问题，构建稳定、可持久、可访问的主题切换功能。
