直接修改 .form-switch .form-check-input:checked 的 background-color 无效，因 bootstrap 5 使用 base64 svg 作为 background-image 覆盖滑块，需重写 background-image（含 url 编码颜色）、border、box-shadow 等才能生效。
直接改 .form-check-input:checked 的 background-color 无效，因为 Bootstrap 5 用 base64 编码的 SVG 作为背景图覆盖颜色；必须重写 background-image、border、background-color 和 box-shadow 才能真正生效。
为什么 .form-switch:checked 改 background-color 没反应？
Bootstrap 5 的开关（.form-switch）不靠纯色块实现滑块效果，而是用 background-image（一个 base64 编码的 SVG 圆形）+ transform 位移来模拟。你设的 background-color 被 SVG 图像盖住了，自然看不见。
-
.form-switch .form-check-input:checked的视觉核心是background-image，不是background-color -
border和background-color控制的是轨道底色，不是滑块本身 -
box-shadow影响聚焦态蓝边，漏掉会让交互反馈缺失
最小改动方案：覆盖 background-image + 关键状态
把这段 CSS 放在 Bootstrap 引入之后，就能稳定替换开关颜色：
.form-switch .form-check-input:checked {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3e%3ccircle cx='12' cy='12' r='12' fill='%234CAF50'/%3e%3c/svg%3e");
}
.form-switch .form-check-input {
width: 48px;
height: 24px;
}
.form-switch .form-check-input:focus {
box-shadow: 0 0 0 0.25rem rgba(76, 175, 80, 0.25);
}
.form-switch .form-check-input:not(:checked):not(:disabled) {
background-color: #bdbdbd;
}
.form-switch .form-check-input:not(:checked):not(:disabled):active {
background-color: #e0e0e0;
}
-
fill='%234CAF50'是 URL 编码后的绿色，替换成你自己的十六进制色时，务必用 URL encoder 编码（比如#ff6b6b→%23ff6b6b） - 如果改了
width/height，SVG 的viewBox和cx/cy/r必须同比例缩放，否则滑块会偏移或裁切 - 移动端需加
touch-action: manipulation和cursor: pointer，否则点击无反馈
用 CSS 变量动态换色？不行，Bootstrap 5 的 form-switch 不支持
别试图用 :root { --bs-primary: #xxx } 或 document.documentElement.style.setProperty() 去改开关颜色——.form-switch 样式完全不读取任何 CSS 变量，它硬编码在 SVG 背景图里。
- 所有
--bs-*变量（如--bs-primary）只影响按钮、警告框、链接等组件，对开关无效 - 想运行时切换主题？只能 JS 动态生成新 SVG 并重设
background-image，不能靠变量批量驱动 - 如果你用 Sass 源码，唯一干净方式是重定义
$form-switch-color等变量再编译，但注意：这些变量只控制默认值，不提供 runtime 切换能力
最容易被忽略的一点：SVG 中的 r='12' 是半径，对应默认 24px 宽高；你调大开关尺寸后，若没同步放大 r 和 viewBox，滑块会变小、居中偏移，甚至消失在轨道外。这不是浏览器兼容问题，是 SVG 自身坐标系没对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
