怎么用Bootstrap制作一键切换黑夜模式-Bootstrap教程-PHP中文网

Bootstrap 5.3+ 主题切换需手动管理状态：在添加 dark 类并同步 localStorage，优先级为 localStorage → prefers-color-scheme → 默认 light，不可仅依赖 data-bs-theme 或媒体查询。

怎么用bootstrap制作一键切换黑夜模式

如何用 Bootstrap 5.3+ 的 data-bs-theme 实现主题切换

Bootstrap 5.3 起原生支持 data-bs-theme="dark" 属性，但仅靠它无法“一键切换”——它只是静态标记，不触发 CSS 变量重载或 localStorage 持久化。真正可用的方案必须手动补全状态管理与 class 注入逻辑。

常见错误是直接写就以为黑夜模式生效了，结果发现组件颜色没变、表单控件还是亮色、甚至 prefers-color-scheme 冲突导致闪烁。

必须在或上添加 class="dark"（或自定义类名），并配合 Bootstrap 的 CSS 变量覆盖规则
data-bs-theme 仅用于服务端渲染提示或辅助 JS 判断，不能替代 class 控制样式
务必监听 localStorage 初始化，否则刷新后退回到默认主题

为什么不能只靠 prefers-color-scheme 媒体查询

系统级暗色偏好（@media (prefers-color-scheme: dark)）会自动启用 Bootstrap 的暗色变量，但它完全绕过用户主动选择——用户点了“黑夜模式”按钮，结果被系统设置覆盖，或者反之。

更麻烦的是：Chrome 和 Safari 对该媒体查询的触发时机不一致，某些情况下页面加载时查不到偏好，导致首次渲染错乱。

必须把用户选择（localStorage）作为最高优先级，媒体查询仅作 fallback
初始化时按顺序检查：localStorage → prefers-color-scheme → 默认（light）
不要在 CSS 中直接写 @media (prefers-color-scheme: dark) { :root { ... } }，Bootstrap 已内置，重复覆盖易出错

切换按钮的 JS 实现要点

核心是切换 document.documentElement 的 class，并同步写入 localStorage。Bootstrap 不提供 toggle 方法，得自己写。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

function toggleTheme() {
  const html = document.documentElement;
  const isDark = html.classList.contains('dark');
  
  if (isDark) {
    html.classList.remove('dark');
    localStorage.setItem('theme', 'light');
  } else {
    html.classList.add('dark');
    localStorage.setItem('theme', 'dark');
  }
}

注意：必须操作 html 元素而非 body，因为 Bootstrap 的暗色变量作用域基于 :root（即 html）；另外，localStorage.setItem 必须在 class 切换后立即执行，否则页面跳转或刷新时读不到最新值。