如何在Flask环境下仅前端自定义Bootstrap 5颜色主题？

• 直接覆盖编译后的Bootstrap样式
  针对需要修改的组件（比如按钮），在自定义CSS文件中重写对应类的样式，用!important强制覆盖原有规则：

/* 自定义primary按钮基础样式 */
.btn-primary {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
}

/* 覆盖hover、active等状态样式 */
.btn-primary:hover {
  background-color: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}

将这个自定义CSS放在Bootstrap CSS之后引入，确保优先级足够。

• 用Bootstrap主题工具预编译自定义CSS
  使用Bootstrap官方提供的主题生成工具，配置好你需要的颜色主题后，直接生成编译完成的自定义Bootstrap CSS文件，替换Flask静态文件夹中原有的Bootstrap CSS即可，无需编写大量覆盖样式。

• 结合CSS变量优化覆盖逻辑
  新版本Bootstrap已内置大量CSS变量，先尝试修改根变量来批量调整主题：

:root {
  --bs-primary: #2563eb;
  --bs-primary-rgb: 37, 99, 235;
  --bs-secondary: #6b7280;
}

如果部分组件（如带渐变的按钮）未生效，再针对这些组件单独补充覆盖样式，这种方式比全量重写更简洁。

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