Bootstrap Dark Mode实现 Bootstrap 5如何开启暗黑模式-Bootstrap教程-PHP中文网

Bootstrap 5.3+ 原生支持暗黑模式，只需在标签添加data-bs-theme="dark"属性即可启用，所有官方组件自动响应；需确保版本≥5.3.0、避免CSS覆盖、清除缓存，并配合localStorage持久化用户偏好及prefers-color-scheme监听实现可靠适配。

直接加 `data-bs-theme="dark"` 就能启用

bootstrap 5.3+ 原生支持暗黑模式，不需要额外 js 或第三方库——只要在标签上加一个属性就行。这是最轻量、最可靠的方式，所有官方组件（btn、card、navbar 等）会自动响应。

常见错误现象：加了但没生效 → 检查是否用了旧版 Bootstrap（必须 ≥5.3.0），或被其他 CSS 强制覆盖了背景/颜色；也可能是浏览器缓存了旧样式表。

正确写法：
局部启用（比如只让卡片变暗）：<div class="card" data-bs-theme="dark"> <li>不推荐手动改 <code>class="dark" 或重写大量 CSS —— 这会绕过 Bootstrap 的主题系统，后续升级易出问题

用 `prefers-color-scheme` 自动适配系统设置

用户在 macOS / Windows / iOS 系统里开了深色模式，网页应该跟着变——这不是“锦上添花”，而是现代 Web 的基本体验。靠纯 CSS 媒体查询就能实现，无需 JS。

性能影响几乎为零，兼容性也很好（Chrome 87+、Firefox 96+、Safari 14+ 都支持），但要注意：它只读取系统偏好，不能记忆用户手动切换后的选择。

基础写法：
```
@media (prefers-color-scheme: dark) {
  html {
    data-bs-theme: dark;
  }
}
```
（⚠️注意：CSS 里不能直接设 HTML 属性，所以这行无效）
真正可行的做法是：用 JS 检测并设置 data-bs-theme，再配合 localStorage 记住用户偏好
更稳妥的方案是引入 bootstrap-dark-5 这类成熟封装，它已内置该逻辑，并处理了 Safari 对 prefers-color-scheme 的兼容细节

手动切换时必须持久化用户选择

用户点一次“切暗色”，刷新页面又回亮色？这是最常被忽略的一环。Bootstrap 本身不管理状态，data-bs-theme 是瞬时的 DOM 属性，刷新即丢。

VPS Bootstrap

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

下载

典型场景：后台系统、文档站、博客——用户明确表达了偏好，就得尊重它。否则每次都要重新点，体验断层。

保存到 localStorage：localStorage.setItem('theme', 'dark')
页面加载时读取：const saved = localStorage.getItem('theme');，然后设置 document.documentElement.setAttribute('data-bs-theme', saved)
别只监听点击事件，还要监听 prefers-color-scheme 变化（用 window.matchMedia），避免系统切换后与用户选择冲突

用 `bootstrap-dark-5` 而不是自己手写变量

有人想“深度定制”，于是去改 SCSS 变量、编译新 CSS——结果发现按钮 hover 色不对、表单 focus outline 消失、下拉菜单阴影错位……因为 Bootstrap 暗黑模式不是简单换几个 $body-bg，而是整套语义化颜色映射（$primary-rgb、$body-color-rgb 等都得同步调整）。

bootstrap-dark-5 不是“另一个主题”，它是对 Bootstrap 5.3+ 原生暗黑能力的补全：提供预设变量、修复 RTL 下的暗色渲染、兼容 bootstrap-icons 等生态组件。

CDN 最简接入：<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-dark-5/dist/bootstrap-dark.min.css">
npm 安装后需确保 Bootstrap 5.3+ 已先加载，否则变量未定义会报错
它不替换你的 Bootstrap CSS，而是叠加增强——所以升级 Bootstrap 主版本时，务必同步检查 bootstrap-dark-5 是否有对应更新

真正麻烦的从来不是“怎么开暗黑模式”，而是“怎么让它在用户换设备、清缓存、切系统主题、点错按钮之后，依然保持一致”。状态管理、优先级覆盖、生态兼容——这些才是落地时卡住人的地方。