直接改 --bs-pagination-bg 无效，真正起作用的是 --bs-pagination-active-bg，但仅在 sass 编译时生效；需在 bootstrap css 后用 :root 重设，并同步覆盖 .page-item.active .page-link 样式才能生效。
直接改 --bs-pagination-bg 无效，真正起作用的是 --bs-pagination-active-bg，但仅在 Sass 编译时生效 —— 你必须在 Bootstrap CSS 加载之后，用 :root 重设它，并同步覆盖 .page-item.active .page-link 的样式才能看到效果。
为什么 --bs-pagination-bg 改了没反应
Bootstrap 5 中 --bs-pagination-bg 只控制 .pagination 容器的背景色，和页码链接完全无关。.page-link 的默认背景被硬编码为 var(--bs-white)，压根不读这个变量。你在 :root 里改它，.page-link 根本看不到。
--bs-pagination-active-bg 真的能用吗
能，但有前提：
- 它只在 Bootstrap 5.3+ 的 Sass 源码中被引用，编译后生成的 CSS 是固定值（比如
background-color: #0d6efd），不会响应运行时变量变更 - 如果你的自定义 CSS 在 Bootstrap 样式表之后加载，且写法正确，浏览器会重新计算该变量并应用到新规则中
- 必须配合显式选择器使用，否则变量只是“存在”，没地方用
推荐写法：
:root {
--bs-pagination-active-bg: #2a4a7c;
--bs-pagination-active-border-color: #1a3a6c;
--bs-pagination-color: #fff;
}
.my-pagination .page-item.active .page-link {
background-color: var(--bs-pagination-active-bg);
border-color: var(--bs-pagination-active-border-color);
color: var(--bs-pagination-color);
}
漏掉这些状态，颜色就断层
只改 .page-item.active .page-link 不够，用户交互中会触发多个状态，漏一个就视觉跳变：
-
.my-pagination .page-link:hover：悬停时背景、边框、文字色要同步变深 -
.my-pagination .page-link:focus：键盘聚焦需重设box-shadow，不能只清outline -
.my-pagination .page-item.disabled .page-link：首/末页禁用时若不单独处理，在深色背景下几乎不可读 -
.my-pagination .page-link默认态：必须声明，否则 hover 或 active 会回退到 Bootstrap 默认浅灰
最易被忽略的执行细节
自定义 CSS 文件必须在 Bootstrap 的 CSS 之后加载，否则变量未定义或选择器被覆盖；active 类必须加在 <li class="page-item"> 上，加在 <a class="page-link"></a> 上完全无效；深色模式下，@media (prefers-color-scheme: dark) 里必须重写整套变量和选择器，不能只调一个背景色。
