直接修改 .modal-header 的 background-color 即可，但需确保自定义 css 在 bootstrap 之后加载、选择器权重足够，并同步调整文字色、边框及关闭按钮颜色以保证可读性与视觉一致性。
直接修改 .modal-header 的 css 背景色就行
bootstrap 的 modal 头部默认用的是 .modal-header 类，它本身没有内联样式，完全靠 css 控制。改背景色最直接的方式就是重写它的 background-color，但要注意覆盖时机和选择器权重。
- 别只改
.modal-header—— 它内部还有.modal-title和关闭按钮（.btn-close），文字颜色、边框、内边距可能也要同步调 - 如果用了 Bootstrap 5.3+，
.modal-header默认有border-bottom，不删或重置会导致底部多一条线 - 推荐在自定义 CSS 文件中写，且放在 Bootstrap CSS 之后加载，否则会被覆盖
用 CSS 类名覆盖比用 !important 更稳妥
硬加 !important 容易后续难维护，尤其当 Modal 套了主题色、暗色模式时会冲突。更可靠的做法是提高选择器 specificity 或复用 Bootstrap 已有的工具类逻辑。
- 例如：给 Modal 加一个自定义 class：
<div class="modal fade my-modal">，然后写 <code>.my-modal .modal-header { background-color: #2c3e50; } - Bootstrap 5 提供了
bg-*背景工具类，但.modal-header不响应这些类（因为不是容器级组件），所以不能直接写class="modal-header bg-dark" - 如果项目用 Sass，可直接重定义变量
$modal-header-bg，再重新编译 CSS —— 这是最彻底的方案，但需要构建流程支持 - 检查是否触发了暗色模式：
或父元素有该属性 - 安全写法是连带设置文本色：
.modal-header { background-color: #1a2b3c; color: #fff; } - 或者用 CSS
@media (prefers-color-scheme: dark)单独处理，但不如直接监听data-bs-theme - 简单方案：给
.btn-close显式设filter或color，比如.modal-header .btn-close { filter: invert(100%) brightness(2); } - 更可控的方式：用自定义 SVG 替换，默认图标路径在
bootstrap/scss/_variables.scss里定义为$btn-close-bg，可覆盖变量或重写伪元素 - 别忘了 hover 状态 ——
.btn-close:hover默认放大 1.5 倍，背景色变化后缩放效果可能突兀
注意深色模式下 .modal-header 的自动适配
Bootstrap 5.3 开始支持 data-bs-theme="dark" 暗色模式，此时 .modal-header 会自动应用深色背景和浅色文字。如果你手动设了背景色，但没同步调整文字色，可能导致文字看不见。
关闭按钮（.btn-close）颜色要跟着背景反色
Modal 头部右上角的 × 按钮默认是灰色 SVG 图标，背景一变就容易看不清。它由 .btn-close 控制，图标颜色来自 filter: invert(1)，本质是黑白翻转，所以对非灰度背景不可靠。
改完记得在不同设备和缩放比例下点开 Modal 看一眼——头部高度、文字截断、按钮点击热区这些细节，往往比颜色本身更容易出问题。
