我想知道如何为Bootstrap 5.3创建一个简单的新颜色模式。我只想取代
第一个月
与
$primary: #1e407c;个
我想用这个新颜色替换所有$primary的用法。
我正在使用webpack为我网站的自定义css文件构建sass。
我读过documentation about color modes，但我很困惑，因为它们似乎显示了两种不同的方法
1.使用颜色模式（名称）
1.使用data-bs-theme=“name”
我想把它作为一种颜色模式，而不是简单地覆盖主原色。最后，我将创建具有不同原色的多种模式。
我应该使用哪种以及如何使用它？在哪里定义新的颜色模式？我使用Symfony与webpack和webpack-encore。以下是我当前导入工作引导文件的方式（基本上是选项B）
assets/styles/app.scss:个

@import './components/bootstrap_custom';
// ...

字符串
assets/styles/components/_bootstrap_custom.scss个

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "~bootstrap/scss/functions";

// 2. Include any default variable overrides here
$body-bg:         #d9e0e7;
$link-decoration: none;

// 3. Include remainder of required Bootstrap stylesheets
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/variables-dark";

// 4. Include any default map overrides here
$link-color          : darken($primary, 15%);
$link-hover-color    : darken($link-color, 15%);
$input-bg            : tint-color($green, 95%);
$form-check-input-bg : $input-bg;
$form-select-bg      : $input-bg;
$breadcrumb-active-color: darken($primary, 30%);
// bs5.3 changed default bg colors for several elements to the $body-bg. Override back to white.
$card-bg             : $white;
$table-bg            : $white;
$dropdown-bg         : $white;
$list-group-bg       : $white;
//$enable-dark-mode    : false;

// 5. Include remainder of required parts
@import "~bootstrap/scss/maps";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/containers";
@import "~bootstrap/scss/grid";

// currently including ALL parts
@import "~bootstrap/scss/tables";
// ... truncated for brevity
@import "~bootstrap/scss/placeholders";

@import "~bootstrap/scss/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "~bootstrap/scss/utilities/api";

// 8. Add additional custom code here

型
当然，这一切都是由webpack构建的，放在/public/build中。