如何使用CSS自定义Bootstrap 5的默认配色方案

提问内容 #

我之前提交的相似问题被标记为重复问题并关闭，相关通知如下：

该问题已有相关解答：Customizing Bootstrap CSS template（共9条解答）您的帖子已关联到相似问题。若该问题无法解决您的疑问，请提交新的提问。
上述关联问题无法解决我的疑问，因此我重新提交此提问，未被解决的具体问题如下：

• 关联问题的多数解答针对Bootstrap早期版本，我的提问明确针对Bootstrap 5。
• 关联问题中涉及版本5的解答仅介绍了SASS方案，而我需要的是CSS实现方案。
• 我提供了最小可复现示例，但关联问题中没有对应最小示例的解决方案。

下方是我写的Bootstrap 5页面最小示例，可以看到默认配色为黑色文字、白色背景，用蓝色高亮特定元素。我该如何通过CSS修改这套默认配色？我是否可以直接插入自定义<style>标签，或者通过<link>引入外部自定义CSS文件实现？

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <title>Hello, world!</title>
</head>
<body>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
  <label class="form-check-label" for="flexCheckChecked">
    Checked checkbox
  </label>
</div>
<div class="accordion" id="accordionPanelsStayOpenExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>

以上代码片段整合自Bootstrap官方文档示例。 #

解答 #

你提到的两种自定义CSS加载方式都可以实现修改Bootstrap 5默认配色的需求，操作时只需要注意将自定义样式的加载顺序放在Bootstrap官方CSS之后，就能保证自定义样式优先级更高，覆盖默认规则。

方案1：覆盖全局CSS变量（批量修改推荐） #

Bootstrap 5所有默认配色都通过全局CSS变量定义，你可以直接重写对应变量的值，一次性修改全站点的配色规则，不需要逐个调整组件样式：

/* 放在style标签或独立CSS文件中，加载顺序晚于Bootstrap CSS */
:root {
  --bs-primary: #c05621; /* 替换默认蓝色主题色，这里示例为橙色，可按需替换 */
  --bs-body-color: #1a202c; /* 全局默认文字颜色 */
  --bs-body-bg: #fef5e7; /* 全局默认背景颜色 */
  --bs-border-color: #e9d8a6; /* 全局边框颜色 */
}

方案2：针对特定组件单独重写样式 #

如果你只需要修改部分组件的配色，也可以直接重写对应组件的类样式，针对你提供的示例，参考样式如下：

/* 自定义复选框选中态样式 */
.form-check-input:checked {
  background-color: #c05621;
  border-color: #c05621;
}
/* 自定义手风琴组件样式 */
.accordion-button {
  background-color: #fff3cd;
  color: #856404;
}
.accordion-button:not(.collapsed) {
  background-color: #c05621;
  color: #ffffff;
}
.accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(192, 86, 33, 0.25);
  border-color: #c05621;
}

两种方式都支持放在页面内的<style>标签中，或者存为独立的CSS文件通过<link>标签引入，可根据你的项目需求选择即可。 #

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