Bootstrap 5.3 generate alternative color classes using Sass

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?

Leave a Comment