如何在Bootstrap 5.3中覆盖CSS变量，修改dark主题下btn-primary样式？

你的核心问题是CSS变量的作用域优先级：Bootstrap直接在.btn-primary选择器内定义了按钮相关变量，这些变量的优先级高于你在html[data-bs-theme]父级元素中定义的同名变量，所以你的修改不会生效。下面是两种简洁且无需SCSS的解决方案：

方法1：精准定位主题+组件选择器（推荐） #

通过将主题属性与按钮选择器结合，提升选择器优先级，直接在.btn-primary层级覆盖变量。这种方式只针对目标组件和主题修改，代码清晰且不会影响其他元素。

示例代码（修改dark主题下的btn-primary为深红色）：

/* Dark主题下的btn-primary样式覆盖 */
html[data-bs-theme='dark'] .btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #ff0000;
  --bs-btn-border-color: #ff0000;
  --bs-btn-hover-bg: #cc0000; /*  hover状态用稍暗的红色 */
  --bs-btn-hover-border-color: #cc0000;
  --bs-btn-active-bg: #990000;
  --bs-btn-active-border-color: #990000;
}

/* 如需修改Light主题，同样逻辑 */
html[data-bs-theme='light'] .btn-primary {
  --bs-btn-bg: #28a745; /* 替换为你想要的绿色 */
  --bs-btn-border-color: #28a745;
  --bs-btn-hover-bg: #218838;
}

优点： #

• 优先级高于Bootstrap原样式，确保修改生效
• 仅修改目标主题和组件，代码集中不冗余
• 无需编译，直接用纯CSS，部署体积极小
• 可按需只修改部分状态（比如只改hover效果），不用重复所有默认变量

方法2：修改全局主题色变量（视情况使用） #

如果Bootstrap的.btn-primary变量是基于全局--bs-primary定义的（部分版本的Bootstrap会这么做），你可以直接修改dark主题下的全局主色变量，联动修改所有使用该颜色的组件。但注意：从你贴出的Bootstrap代码看，.btn-primary是硬写了具体色值，这种情况下该方法不生效，仅当按钮变量是var(--bs-primary)时可用。

示例代码：

html[data-bs-theme='dark'] {
  --bs-primary: #ff0000;
  --bs-primary-rgb: 255, 0, 0;
}

注意： #

• 该方法会影响所有使用--bs-primary的组件（比如导航栏、徽章等），适合需要统一调整主题主色的场景
• 若Bootstrap组件是硬写色值（如你提供的代码），此方法无效

最佳实践总结 #

1. 优先使用方法1，精准控制修改范围，避免意外影响其他组件
2. 只编写需要修改的变量，无需重复Bootstrap的默认变量，保持代码简洁
3. 把所有主题相关的修改集中放在一个CSS文件中，便于维护

内容的提问来源于stack exchange，提问作者Jayy