直接修改 .form-check-input:checked 的 background-color 无效，因 bootstrap 5 开关使用 base64 svg 作为 background-image 覆盖了颜色；需改 background-image（含 url 编码颜色）、轨道底色及聚焦阴影。
直接改 .form-check-input:checked 的 background-color 为什么没用
Bootstrap 5 的开关（.form-switch）不用纯色块模拟滑块，而是用 base64 编码的 SVG 作为 background-image 渲染滑块。你写的 background-color: #ff0000 会被这个 SVG 图像完全盖住，视觉上毫无变化。
真正起效的三处是：
-
.form-switch .form-check-input:checked的background-image（必须替换整个 SVG URL，且颜色要 URL 编码） -
.form-switch .form-check-input的background-color和border（控制轨道底色） -
.form-switch .form-check-input:focus的box-shadow（聚焦边框）
最小改动方案：覆盖关键属性而非重写整个结构
把这段 CSS 放在 Bootstrap CSS 引入之后即可生效，无需删原样式或引入 JS：
.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='%232196F3'/%3e%3c/svg%3e");
}
.form-switch .form-check-input {
background-color: #e0e0e0;
border: 1px solid #bdbdbd;
}
.form-switch .form-check-input:focus {
box-shadow: 0 0 0 0.25rem rgba(33, 150, 243, 0.25);
}
注意：
-
fill='%232196F3'是蓝色的 URL 编码值，换颜色时记得用 URL 编码工具 转义 - 如果改了
width/height，SVG 的viewBox必须同比例缩放，否则滑块错位 - 别漏掉
.form-switch .form-check-input:not(:checked)的轨道色，否则关态灰得不一致
想彻底摆脱 SVG 限制？用伪元素重绘滑块
如果你需要动画、渐变、阴影或更灵活的尺寸，就得放弃 Bootstrap 的 SVG 方案，回归原生 <input type="checkbox"> + ::after：
- 给
.form-check-input加opacity: 0; position: absolute;隐藏它但保留可交互性 - 给父级
.form-check或额外容器加position: relative;，确保伪元素定位基准正确 - 用
.form-check-input::after绘制滑块，并同时定义:not(:checked)::after和:checked::after的transform: translateX()位移 - 务必加
transition: transform 0.2s ease在伪元素上，不是 input 上 - 用
<label></label>包裹整个结构，否则移动端点击区域太小
深色模式下开关颜色不随主题变？检查变量链是否断裂
如果你用了 data-bs-theme="dark" 切换主题，但开关颜色还是浅色，大概率是：
- CSS 文件用了精简版
bootstrap.min.css，它可能剔除了[data-bs-theme="dark"]规则；换成完整版bootstrap.css - 自定义颜色写死了，比如
background-color: #4CAF50，应改为background-color: var(--bs-success)并在 :root 中定义暗色变量 - 没在暗色媒体查询里重设 SVG 的
fill值，base64 URL 里颜色是硬编码的，不会自动响应主题
最稳妥的做法是：深色模式下重新生成一套 base64 SVG，或干脆用伪元素方案配合 CSS 变量动态控制 ::after 的 background-color 和 transform —— 这样变量更新，开关就实时响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
