bootstrap 5.3+ 的 .spinner-border 边框颜色由 css 变量 --bs-spinner-border-color 控制，直接设置 border-color 会失效或破坏深色模式适配；应通过 :root 或作用域化选择器重设该变量，并确保自定义 css 在 bootstrap 样式之后加载。
Spinner边框颜色由--bs-spinner-border-color控制
Bootstrap 5.3+ 的 .spinner-border 完全依赖 CSS 变量，不是写死的 border-color。直接改 .spinner-border { border-color: #xxx } 虽然能临时生效，但会破坏响应式状态（比如配合 .text-light 使用时颜色可能错乱），且无法被深色模式自动适配。
正确做法是重设变量：
-
--bs-spinner-border-color：主边框色（必须设） -
--bs-spinner-border-opacity：默认0.25，调高会让旋转条更实，调低更淡 - 如果 spinner 放在深色背景上，还需同步设
--bs-body-bg或用@media (prefers-color-scheme: dark)隔离变量
示例（全局生效）：
:root {
--bs-spinner-border-color: #6a5acd;
--bs-spinner-border-opacity: 0.3;
}
局部修改 Spinner 颜色要加选择器前缀
只改某一个 spinner（比如只改页脚加载图标），不能只靠 :root，否则所有 spinner 都变。得用具体父容器或自定义类限定作用域：
- 给 spinner 外层加 class：
<div class="footer-spinner"><div class="spinner-border"></div></div> - 然后写：
.footer-spinner .spinner-border { --bs-spinner-border-color: #3498db; } - 别写
.footer-spinner .spinner-border { border-color: ... }—— 这样会绕过变量系统，后续升级或嵌套主题时容易失效 - 注意：变量继承是向上查找的，所以确保父元素（如
.footer-spinner）上定义了变量，而不是只在.spinner-border自己身上用style=""
Spinner 不转/颜色不生效？检查三个常见断点
现象：加了变量但 spinner 还是灰的，或者根本不动。不是 JS 问题，大概率是样式链断了：
- CSS 加载顺序错误：你的自定义 CSS 必须在 Bootstrap 的 CSS 之后 引入，否则变量被覆盖
- 用了
bootstrap.min.css（CDN 或 dist 目录下）：它不含变量定义逻辑，--bs-spinner-border-color根本不存在——你得换用bootstrap.css或走 Sass 编译流程 - 浏览器兼容性：旧版 Safari（@keyframes 中的支持不完整，导致动画卡住；可加降级规则：
.spinner-border { animation: spinner-border 0.75s linear infinite; }显式声明
想让 Spinner 颜色随主题自动切换
单纯设 :root { --bs-spinner-border-color: ... } 是静态的。要响应系统深色模式，必须用媒体查询包裹：
:root {
--bs-spinner-border-color: #6a5acd;
}
@media (prefers-color-scheme: dark) {
:root {
--bs-spinner-border-color: #9370db;
}
}
注意：prefers-color-scheme 是系统级开关，不会被 Bootstrap 的 data-bs-theme="dark" 触发——后者只是个 class 切换机制，不触发媒体查询。如果你用的是手动切 theme 的方案，就得自己用 JS 同步 setProperty 到 document.documentElement.style。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
