最推荐通过CSS变量--bs-body-bg统一控制body背景色，优先于直接写background-color；需配合@media深色模式重写变量、min-height:100vh防断层，并验证子组件适配。
直接改 body 的 background-color 最快，但别写死在 HTML 里
页面主体背景色控制权在 body 元素上，最直白的做法就是给它加 css 规则。用内联 style（如 style="background-color: #f8f9fa"）看似省事，实际会锁死样式、干扰 js 动态切换、且无法响应深色模式。推荐统一写在 css 文件中：
- 确保你的自定义样式表在 Bootstrap 的 CSS 之后加载，否则会被覆盖
- 写法示例：
body { background-color: #f8f9fa; } - 若项目已用 CSS 变量（如
--bs-body-bg），优先改变量：:root { --bs-body-bg: #f8f9fa; }，这样.container、.card等依赖该变量的组件也会同步响应
bg-* 类对 body 基本无效，别试
Bootstrap 的 bg-light、bg-dark 这类工具类，设计目标是作用于内容容器（如卡片、提示框、行），不是为 body 准备的。你给 body 加 class="bg-light"，表面上生效，但容易被以下问题反杀：
-
body没有默认height: 100%，在内容少时，背景色只铺到内容高度，下方留白——这不是类的问题，是布局逻辑没补全 -
bg-light在深色模式下仍是浅灰，和系统偏好冲突，且不触发文字色自动适配 - 某些插件（如滚动监听、全屏模态框）可能动态修改
bodyclass，导致背景意外丢失
深色模式下要手动适配，@media (prefers-color-scheme: dark) 不够用
仅靠媒体查询切 body 背景色，大概率漏掉关键细节：
-
body背景变了，但.container、.card等子元素若用了bg-white或硬编码白色，会形成“白块浮在黑底上”的割裂感 - Bootstrap 5.3+ 的
--bs-body-bg变量本身不响应prefers-color-scheme，必须显式重写：@media (prefers-color-scheme: dark) { :root { --bs-body-bg: #121418; } } - 移动端 Safari 有时会忽略根级变量变更，建议同时加一条兜底：
body[data-bs-theme="dark"] { background-color: #121418; }，并确保 HTML 根节点有对应data-bs-theme属性
用 min-height: 100vh 补齐视觉断层，但别滥用
当页面内容不足一屏时，body 背景色只渲染到内容底部，下面一片空白——这不是背景没设对，是高度没撑满。解决方法很简单：
- 给
body加min-height: 100vh，确保至少占满视口 - 注意：不要加
height: 100vh，否则内容超长时会截断或出现双滚动条 - 如果用了
position: fixed导航栏或页脚，需额外给body加padding-top或padding-bottom避免遮挡
.card、.alert、.progress）是否同步协调，得逐个验证。尤其在深色模式下，一个没处理的 bg-white 就能让整页观感崩掉。
