Bootstrap斑马纹默认色看似“太深”并非眼花，主因是table-dark主题切换、transparent背景透出或变量被覆盖；验证需查DevTools中tr的background-color计算值，修改应同步设置--bs-table-striped-bg和--bs-table-striped-color以保可读性与兼容性。
Bootstrap斑马纹默认色为什么看起来“太深”
不是你眼花了，--bs-table-striped-bg 在 Bootstrap 5.3+ 中默认值是 #f9f9f9（极浅灰），但实际看到的“深”往往来自三个干扰源：一是你用了 table-dark，它会把条纹色自动切为 #2b2b2b；二是父容器或重置 CSS 给 tr 或 td 设了 background-color: transparent，导致底色透出变暗；三是某些定制主题或 UI 库覆盖了变量但没同步调亮文字色，造成视觉压抑。
如何快速验证是不是变量被意外覆盖
打开 DevTools → 选中任意一条斑马行的 <tr> → 看 <code>Computed 面板里 background-color 的最终值。如果显示的是 rgb(43, 43, 43) 或类似深灰，说明 --bs-table-striped-bg 已被改写；如果显示 transparent，就要查是否全局写了 tr { background: transparent !important } —— 这种写法会直接吃掉所有条纹背景。
改颜色时最容易踩的坑
- 只改
--bs-table-striped-bg却漏掉--bs-table-striped-color，导致文字在浅底上发灰、可读性下降 - 在 scoped style（如 Vue SFC）里覆盖变量却不加
!important，结果被 Bootstrap 的 :root 声明压住 - 用 HSL 值（比如
hsl(210, 10%, 95%)）设色，旧版 Safari 或 Edge 可能渲染成意外偏蓝或偏紫 - 给
tbody tr:nth-of-type(odd)单独加背景，但没同步定义even行，导致偶数行继承了父级灰色背景，形成“双深”错觉
真正省事又可控的改法
别碰选择器权重战，直接在 <style></style> 或自定义 CSS 文件末尾写：
table.table-striped {
--bs-table-striped-bg: #f8faff;
--bs-table-striped-color: #2d3748;
}
这个写法生效快、不冲突、适配深色模式自动降级——前提是确保你的 Bootstrap 是 5.2+，且 CSS 文件加载顺序在 Bootstrap 之后。如果项目还在用 CDN 引入的编译版 CSS，就别试图改 Sass 变量，老老实实覆盖变量更稳。
最常被忽略的一点：改完后务必检查带 table-hover 的表格——hover 色和条纹色的对比度差太小的话，悬停反馈会几乎消失。
