I use a Bootstrap 5.3 theme. I’d like a user to be able to override that the “primary” color theme should be. So instead of blue, maybe a purple or orange.
My plan is to generate “orange-as-primary.css”, “purple-as-primary.css”, etc, and include those after the standard “bootstrap.css” to override the classes dynamically (say a dropdown menu in the frontend).
The Bootstrap documentation shows how to generate custom text color classes (e.g., .text-purple-500
) 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";
I’m not Sass-savvy enough to adapt it to my use case and generate all derived css rules (for borders, hover, active colors etc) for all components (text-primary
, alert-primary
, btn-primary
, etc).
Any suggestions or alternative approaches?