最可靠方案是直接修改 :root 中的 CSS 变量并配合媒体查询，需覆盖全站作用域、处理深色模式嵌套、确保 body min-height: 100vh、同步重设组件级变量（如 --bs-card-color）、避免 JS 硬改 class 而应调用 style.setProperty。
直接改 :root 变量 + 媒体查询最可靠
Bootstrap 5.3+ 的全局背景和文字色由 CSS 变量控制，比如 --bs-body-bg、--bs-body-color。想让它们响应断点，不能靠工具类（如 bg-light 或 text-dark），得在 :root 里用媒体查询重设变量值。
常见错误：写 @media (min-width: 768px) { .bg-light { background-color: #f0f0f0; } } —— 没用，因为 .bg-light 是静态类，权重高且无媒体查询包裹，你的规则会被覆盖。
- 必须用
:root（或html）作为选择器，确保变量作用域覆盖全站 - 媒体查询要写完整断点范围，比如
@media (min-width: 576px) and (max-width: 767.98px)对应 sm 断点区间 - 别漏掉深色模式叠加逻辑：
@media (prefers-color-scheme: dark)需嵌套在断点内，否则可能被忽略 - 移动端 Safari 对根变量更新有延迟，建议加兜底：
body[data-bs-theme="dark"]直接设background-color
示例（仅在 md 及以上启用深灰背景 + 浅灰文字）：
@media (min-width: 768px) {
:root {
--bs-body-bg: #1a1d22;
--bs-body-color: #e2e8f0;
}
}
body 必须配 min-height: 100vh
只改变量或颜色，页面内容少时仍会露白底——这不是颜色没生效，是 body 高度没撑满视口。
- 加
min-height: 100vh，不是height: 100vh，避免内容超长时截断 - 如果用了
position: fixed的导航栏或页脚，记得给body加对应padding-top或padding-bottom - 某些插件（如 Bootstrap 的 offcanvas、modal）会动态切
bodyclass，导致min-height被重置，可加!important保底（仅此处合理）
文字色要同步处理子组件继承链
--bs-body-color 控制的是默认文本色，但很多组件（如 .card、.alert、.dropdown-item）并不直接继承它，而是用各自变量（如 --bs-card-color、--bs-dropdown-color）。
- 若只要求全局统一，需一并重设这些变量，否则会出现“背景变了，卡片文字还是黑的”这种割裂感
- 推荐按组件粒度批量覆盖，例如：
--bs-card-bg: var(--bs-body-bg); --bs-card-color: var(--bs-body-color); - 注意
.navbar是个特例：它用--bs-navbar-color和--bs-navbar-bg，且navbar-dark/navbar-light类会覆盖这些变量，所以断点切换时最好也动态切 navbar 类名
JS 动态切换时别碰 className，改 style.setProperty
如果要用按钮或主题开关实时切换断点背景/文字色（比如模拟“中屏主题预览”），不要清空 body.className 或硬塞 class，容易破坏其他功能。
- 正确做法：用
document.documentElement.style.setProperty('--bs-body-bg', '#2d3748') - 监听
window.matchMedia变化比监听resize更精准，避免频繁触发 - 切换后需手动触发一次重绘（尤其 Safari）：
getComputedStyle(document.body).backgroundColor - 别在 JS 里写死颜色值，把所有断点色值抽成配置对象，方便维护和 SSR 兼容
真正容易被忽略的是：断点背景色只是表层，字体粗细、行高、链接下划线、阴影深度这些视觉节奏，同样需要按断点做梯度调整——否则再准的颜色切换，也撑不起一个自洽的响应式体验。
