I would like to know how to create a simple new color-mode for Bootstrap 5.3. All I want to do is replace
$primary: $blue;
with
$primary: #1e407c;
I want to replace all the usages of $primary with this new color.
I am using webpack to build the sass for my site's custom css files.
I have read the documentation about color modes but am confused because they seem to show two different methods
I want to do this as a color-mode, not a simple override of the main primary color. In the end I will create multiple modes with different primary colors.
Which do I use and how do I use it? Where do I define my new color-mode? I use Symfony with webpack and webpack-encore. Here is how I currently import my working bootstrap files (basically Option 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
Of course, this is all built by webpack and placed in /public/build
You would just add the customizations as:
and then reference it as an attribute in the HTML:
SASS demo