Bootstrap 5 - Custom theme-colors not updating classes

Asked 12/8, 2021 at 9:52 Answered 8/8, 2023 at 20:11

Solved twitter-bootstrap sass bootstrap-5

I have just started a new project using Bootstrap 5 and I am trying to set up theme-colors with some custom values. However doing it the way that I have always done it is giving me some issues.

I have created three colors: $primary, $secondary, $tertiary. However if I add any classes such as bg-tertiary, then nothing changes as if it doesn't exist. bg-primary simply uses the default color defined by Bootstrap.

My code below:

@import "bootstrap/_functions";
@import "bootstrap/_variables";

$primary: #ec008c;
$secondary: #1ab7ea;
$tertiary: #3fb247;

$theme-colors: (
    "primary": $primary,
    "secondary": $secondary,
    "tertiary": $tertiary,
    "light": $light,
    "dark": $dark,
);

@import "bootstrap/bootstrap";

If I change a default value such as "dark" to use $tertiary then any code within the scss file using $dark changes to use the value from $tertiary. Like below:

$theme-colors(
    "dark": $tertiary
);

#pageFooter {
   background: $dark; //This becomes #3fb247 the value from $tertiary
}

What am I doing wrong? I can't understand why the variables in the scss file are being affected by the change to $theme-colors, but classes are not.

Edit:

Using chrome inspector I can see that .bg-primary uses a css variable --bs-primary-rgb. Looking at the available variables --bs-primary has changed to the color that I have set, but not --bs-primary-rgb.

How can I have this variable be changed. Should it be done automatically?

With further research these rgb variables appear to have been introduced in Bootstrap 5.1. I can't find much information about how to get the variable to update to my set values probably because it is too new. So I have chosen to revert back to 5.0.2 and everything is now working as I expect it to.

Petitioner answered 12/8, 2021 at 9:52 Comment(0)

Bootstrap 5.1.0

A recent change to the way the text- and bg- classes are created requires additional SASS map merges in 5.1.0

@import "functions";
@import "variables";
@import "mixins";

$tertiary: #3fb247;

$custom-theme-colors:map-merge($theme-colors, (
  "tertiary": $tertiary
));

$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

@import "bootstrap";

Bootstrap 5.0.2

You need to add a "tertiary" var to the theme-colors map using map-merge if you want it to generate classes like bg-tertiary, btn-tertiary, etc...

@import "functions";
@import "variables";
@import "mixins";

$tertiary: #3fb247;

$theme-colors:map-merge($theme-colors, (
  "tertiary": $tertiary
));
      
@import "bootstrap";

Demo

Infralapsarian answered 12/8, 2021 at 19:3 Comment(3)

I recently found a workaround for the 5.1.0 issue here: #68824609 – Infralapsarian 17/8, 2021 at 22:18

This works and seems to be the preferred method indicated by the BS docs. getbootstrap.com/docs/5.0/customize/color/#theme-colors However, it seems a bit redundant to have to manually generate the RGB values... Might be a good suggestion for the BS team. – Warrick 12/10, 2021 at 4:44

Just need to change $theme-colors: to $custom-theme-colors: in your example map-merge. Excellent work. – Holography 23/1, 2022 at 14:2

As of Bootstrap 5.1.3 the background color component is not automatically generated by

$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

In the manual it is written,

Unfortunately at this time, not every component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the ${color} variables and this Sass map.

Here is one way of manually adding .bg-* classes in Bootstrap 5.1.3. Compiled with Parcel V 2.3.2

/*Bootstrap core imports - adjust for your case*/
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/mixins";


$custom-theme-colors:(
  "custom-color": #8bd0da,
);

$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

// Adjust path to bootstrap for your case
@import "~bootstrap/scss/bootstrap";

// .bg classes not automatically generated. As an example, manually add
// .bg-custom-color

.bg-custom-color{background-color: var(--bs-custom-color);};

Example html

<div class="container border mb-4 bg-primary">
    Background: bg-primary
</div>

<div class="container border mb-4 bg-custom-color">
    <code>bg-custom-color</code>
</div>

<div class="container mb-4">    
    <div class="btn btn-custom-color"><code>btn-custom-color</code></div>
</div>

<div class="container mb-4">
    <div class="alert-custom-color">alert-custom-color</div>
</div>

<div class="container mb-4">
    <ul class="list-group">
        <li class="list-group-item-custom-color"><code>list-group-item-custom-color</code></li>
    </ul>
</div>

The page render as shown below

Elongation answered 6/3, 2022 at 14:35 Comment(0)

I ran into a similar problem. It seems like the latest distro of Bootstrap 5 is seriously buggy.

In addition to not compiling properly under some common SASS compilers, after compiling it you can get output like this:

.bg-primary { background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;

Look carefully and you notice that someone went around the Bootstrap source and swapped CSS variables into anyplace that primary color was used, even when it's illegal. In this case the CSS variable is being passed to rgba(hex, opacity), which is a SASS extension, and not a part of CSS. CSS variables only work post-compilation; and that rgba call only works pre-compilation.

Specifically, the --bs-primary-rgb variable is a hex value. The rgba() command used to exist in plain CSS, but has been deprecated; and, it never supported rgba(hex, opacity). It did support rgba(r, g, b, opacity), and it now supports rgb(r g b / opacity):

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb

But because Bootstrap is wrapping post-compile CSS vars representing hex and passing them to the SASS-extension pre-compile rgba syntax, the past several releases of Bootstrap are flat-out broken.

It seems this bug was introduced after 5.0.2 and every version since has this bug, and should be avoided until this is resolved.

Workaround: color-mix to the rescue!

If you've already platformed onto one of the broken Bootstrap 5 releases and are dealing with this issue, you can work around it by replacing this:

rgba(var(--bs-primary-rgb), var(--bs-bg-opacity))

With this:

color-mix(in srgb, var(--bs-primary-rgb) var(--bs-bg-opacity), transparent)

This moves the burden of mixing colors from the server-side pre-compiler to the browser, so you are increasing CPU use a tidbit for the user. Other than that minor extra, the code accomplishes exactly what was intended, because color-mix() is a post-compile legit CSS feature, unlike rgba().

Eggshaped answered 8/8, 2023 at 20:11 Comment(0)

I was able to achieve this via the below code on Bootsrap 5.1.x

@import "bootstrap/scss/bootstrap";

$red:   #FF0000;
$green: #00FF00;
$blue:  #0000FF;

$custom-colors: (
  'custom-red':   $red,
  'custom-green': $green,
  'custom-blue':  $blue,
);

$utilities: map-merge(
  $utilities,
  (
   "background-color": (
      property: background-color,
      class: bg,
      values: $custom-colors
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Outcome of this you'd be able to use the custom background classes:

.bg-custom-red
.bg-custom-green
.bg-custom-blue

References:

Carruthers answered 25/5, 2023 at 10:10 Comment(0)

i faced the same issue, and i'v resolve it by importing "bootstrap/scss/variables-dark" and "bootstrap/scss/maps" after "bootstrap/scss/functions" :

@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";

Ting answered 9/6, 2023 at 21:24 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Workaround: color-mix to the rescue!

Recommended topics

Hot tags