Popover背景色由CSS变量--bs-popover-bg（5.3+）或.popover自身background-color控制，.popover-header和.popover-body需单独设置；箭头颜色需同步变量或手动覆盖伪元素；文字、边框、阴影也需配套调整以保证视觉协调。
Popover弹出框的背景色由哪些CSS类控制
Bootstrap 5 的 .popover 默认背景色来自 .popover 自身的 background-color，它依赖于 CSS 变量 --bs-popover-bg（Bootstrap 5.3+）或直接定义在 .popover 规则中（旧版）。不是所有子元素都继承这个背景——比如 .popover-header 和 .popover-body 各自有独立背景色，必须分别覆盖。
重写背景色的两种可靠方式
推荐优先使用 CSS 变量覆盖，兼容性好且侵入性低；若需支持较老 Bootstrap 版本或更精细控制，再用显式选择器。
- 用
:root覆盖变量（适用于 Bootstrap 5.3+）：:root { --bs-popover-bg: #4a5568; } - 用具体选择器强制覆盖（全版本通用）：
.popover { background-color: #4a5568 !important; } .popover-header { background-color: #2d3748 !important; } .popover-body { background-color: #4a5568 !important; } - 注意：
!important在这里不是偷懒，而是因为 Bootstrap 的 popover 样式常通过 JS 动态插入style属性或高权重选择器生效，不加容易被覆盖
箭头（arrow）背景色不同步怎么办
Popover 的小三角箭头是伪元素 ::before 和 ::after 实现的，默认颜色也来自 --bs-popover-bg。但如果你只改了 .popover 的 background-color 而没动变量，箭头会保持原色，出现色差。
- 统一方案：继续用
--bs-popover-bg，箭头自动同步 - 手动覆盖方案（不推荐）：
.popover[data-popper-placement^="top"] .popover-arrow::before, .popover[data-popper-placement^="bottom"] .popover-arrow::before, .popover[data-popper-placement^="left"] .popover-arrow::before, .popover[data-popper-placement^="right"] .popover-arrow::before { background-color: #4a5568; } - 实际中几乎不需要单独调箭头——改变量最省事
自定义主题时容易漏掉的细节
背景色改完后，文字颜色、边框、阴影可能不协调。Bootstrap 并不会自动根据 --bs-popover-bg 调整 color 或 border-color，这些得你手动配。
立即学习“前端免费学习笔记（深入）”；
- 文字颜色建议同步调整：
.popover-body, .popover-header { color: #e2e8f0; } - 边框默认是
var(--bs-popover-border-color, rgba(0, 0, 0, 0.2))，如果背景变深，浅灰边框会看不清，应显式设为border-color: #2d3748 - 阴影（
box-shadow）由--bs-popover-box-shadow控制，深色背景下建议减淡阴影，否则显得过重
真正麻烦的从来不是换一个背景色，而是让整个 popover 的视觉层次在新背景下依然清晰可辨——颜色、对比度、阴影、间距，缺一不可。
