<p>在 Bootstrap 5 中覆盖默认 CSS 变量需在引入 bootstrap.min.css 后于 :root 中声明 --bs-* 变量，如 --bs-primary、--bs-body-bg 等；须注意变量名准确、作用域全局、RGB 版本需手动同步，且动态修改时应避免破坏变量链式依赖。</p>
如何在 Bootstrap 5 中覆盖默认 CSS 变量
bootstrap 5 的主题定制完全基于 css 自定义属性（即 css variables），所有颜色、间距、圆角等都通过 --bs-* 开头的变量控制。直接修改这些变量就能全局生效，无需重写大量选择器。
关键点：必须在 Bootstrap 的 CSS 被加载 之后 注入自定义变量，否则会被覆盖。最稳妥的方式是用 <style> 标签写在 <link rel="stylesheet" href="bootstrap.min.css"> 之后。
- 推荐在
<head>末尾添加<style>:root { --bs-primary: #4a6fa5; --bs-body-font-size: 0.925rem; }</style> - 不要在
.class { --bs-primary: ... }里设变量——CSS 变量作用域是继承的，:root才能确保全局生效 - 如果用了 Sass 编译，就别走 CSS 变量这条路，该走
$primary: #4a6fa5+@import流程
哪些 CSS 变量最常被改，改了会影响什么
不是所有 --bs-* 变量都值得动。改错一个可能让按钮、表单、卡片全部错位或失色。
高频且安全的变量（改后影响明确、副作用小）：
-
--bs-primary：影响所有btn-primary、form-check-input:checked、link等，但不会影响btn-secondary的颜色逻辑 -
--bs-body-bg和--bs-body-color：决定<body>默认背景和文字色，几乎所有组件会继承后者 -
--bs-border-radius：控制btn、card、input的圆角，但rounded-0/rounded-1类仍会覆盖它 -
--bs-emphasis-color：控制h1–h6、strong的深色文字，不是所有版本都支持，Bootstrap 5.3+ 才稳定
为什么改了变量但按钮颜色没变
常见现象：:root { --bs-primary: #e63946; } 写了，<button class="btn btn-primary"> 却还是蓝色——大概率是变量名拼错，或作用域/加载顺序问题。
立即学习“前端免费学习笔记（深入）”；
排查步骤：
- 打开 DevTools，在 Elements 面板选中按钮，看 Computed 标签页里
background-color值来源，是否引用了var(--bs-primary) - 检查变量名：Bootstrap 5.2+ 用的是
--bs-primary，不是旧版的--primary或--bs-blue - 确认没有其他
:root声明在后面覆盖了你的设置（比如另一个<style>或第三方库） - 注意某些组件（如
btn-outline-primary）用的是--bs-primary-rgb，你只改--bs-primary不会自动更新 RGB 版本——得一并设--bs-primary-rgb: 230, 57, 70
用 JavaScript 动态改 CSS 变量要注意什么
想实现暗色模式切换？可以，但别直接 document.documentElement.style.setProperty('--bs-primary', '#0d6efd') 就完事。
- 动态改变量只影响后续渲染，已存在的组件不会重新计算伪类（比如
:hover的背景色可能还是旧值） -
--bs-primary-rgb不会自动从--bs-primary解析出来，必须手动同步设置，否则btn-outline-primary会失效 - 暗色模式建议用媒体查询 +
@media (prefers-color-scheme: dark)配合:root[data-bs-theme="dark"]，比 JS 切换更可靠 - 如果真要用 JS，优先操作
data-bs-theme属性，再配合预设好的 CSS 规则，而不是硬塞几十个setProperty
--bs-btn-bg 依赖 --bs-primary，而 --bs-btn-hover-bg 又依赖前者），漏掉一环就断链。动手前先查官方变量列表，别凭印象猜名字。 
