I am currently using a Bootstrap 5.3 theme and I would like to give users the option to change the main color theme from the default blue to something like purple or orange.
My idea is to create additional CSS files named "orange-as-primary.css", "purple-as-primary.css", etc, which can be included after the standard "bootstrap.css" file to dynamically override the classes (for example, through a dropdown menu on the frontend).
The Bootstrap documentation provides guidance on generating custom text color classes using Sass:
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
$utilities: map-merge(
$utilities,
(
"color": map-merge(
map-get($utilities, "color"),
(
values: map-merge(
map-get(map-get($utilities, "color"), "values"),
(
$all-colors
),
),
),
),
)
);
@import "bootstrap/scss/utilities/api";
Unfortunately, I don't have enough experience with Sass to adapt this code for my specific needs and generate all the necessary CSS rules for various components (such as text-primary, alert-primary, btn-primary, etc).
Do you have any suggestions or alternative approaches that could help me achieve this?