Bootstrap 5.3+ 通过 data-bs-theme="light/dark" 属性控制主题，需配合 CSS 自定义变量、color-scheme 声明及 localStorage 持久化实现完整切换。

怎么用 data-bs-theme 切换白天/夜间模式

bootstrap 5.3+ 原生支持主题切换，核心是给 或 加 data-bs-theme 属性，值为 light 或 dark。它不是靠 js 动态改 class，而是靠 css 自定义属性（--bs-body-color、--bs-body-bg 等）响应式生效。

常见错误是只改了属性但没加载对应 CSS —— 必须确保你用的是 Bootstrap 5.3 及以上版本，且 CSS 文件包含 dark mode 变量定义（官方 CDN 或完整构建版默认包含）。

• 手动切：直接在控制台执行 document.documentElement.setAttribute('data-bs-theme', 'dark')
• 页面加载时默认设暗色：在 HTML 中写
• 不推荐用 class="dark" 模拟，会绕过 Bootstrap 主题机制，导致部分组件（如 <table>、<code><form></form>）颜色不一致

  为什么 prefers-color-scheme 不能直接替代 JS 切换

  系统级偏好（prefers-color-scheme: dark）只能作为初始值参考，无法响应用户主动点击切换。Bootstrap 不自动监听该媒体查询变化，也不提供 fallback 逻辑。

  真实场景中，用户更在意「我点一下就变」，而不是「系统变了我才变」。所以必须自己监听并同步更新 data-bs-theme。

  • 检测当前偏好：window.matchMedia('(prefers-color-scheme: dark)').matches
  • 但别只靠它初始化：用户可能刚切完系统主题，但网页已加载完毕，matchMedia 不会自动重触发
  • 正确做法：用它设初始值 + 提供按钮手动覆盖 + 把选择存到 localStorage 保证刷新不丢失

  data-bs-theme 和自定义 CSS 变量怎么配合

  Bootstrap 的暗色模式依赖一组预设的 CSS 变量，比如 --bs-body-bg: #212529。如果你覆盖了这些变量但没按主题分组，会导致 light/dark 下都用同一套值。

  

  VPS Bootstrap

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

  下载

  关键点在于：所有自定义颜色必须放在 [data-bs-theme="light"] 和 [data-bs-theme="dark"] 作用域里，否则会冲突。

  code>[data-bs-theme="dark"] {
    --bs-primary: #0d6efd;
    --bs-body-bg: #212529;
  }
  [data-bs-theme="light"] {
    --bs-primary: #0a580a;
    --bs-body-bg: #fff;
  }

  • 别在全局写 :root { --bs-body-bg: ... }，这会覆盖两个主题
  • 第三方组件（如 Chart.js）不读 data-bs-theme，需单独适配其 theme 配置
  • 字体颜色建议用 color: var(--bs-body-color) 而非固定值，才能随主题自动变

  切换后表单控件、按钮、卡片为啥还是旧颜色

  最常被忽略的是：Bootstrap 的部分组件（尤其是 <input>、<select></select>、<button></button>）默认样式由浏览器渲染，不受 CSS 变量控制。它们的颜色由 color-scheme CSS 属性或操作系统级设置影响。

  例如 Chrome 下，<input type="checkbox"> 在暗色模式下仍可能显示浅灰边框，因为它的 appearance 是 native 的。

  • 强制统一外观：加 appearance: none + 手动画背景和边框
  • 或用 color-scheme: light dark 告诉浏览器允许按主题渲染原生控件（兼容性注意：Safari 15.4+、Chrome 93+）
  • 卡片阴影（box-shadow）默认不随主题变，需显式写成 box-shadow: var(--bs-box-shadow) 并在两个 [data-bs-theme] 里分别定义

  主题切换不是改一个属性就完事，它牵扯到变量作用域、浏览器原生行为、第三方库兼容性三个层面。最容易漏的是表单控件的 color-scheme 声明和本地存储的持久化逻辑。