更改 Bootstrap 主题颜色

Question

Just for the sake of easy reference, I'm creating new theme-colors as per below so I could use bg-red instead of bg-danger or text-purple and so on.

$primary        : #24305e;
$blue           : #375abb;
$indigo         : #796eff;
$purple         : #6f42c1;
$pink           : #e83e8c;
$red            : #db4446;
$orange         : #e3240C;
$yellow         : #ffc107;
$green          : #21c87a;
$teal           : #2e9cca;
$cyan           : #17a2b8;
$light          : #f6f9fc;

$theme-colors   : (
    "blue"      : $blue,
    "indigo"    : $indigo,
    "purple"    : $purple,
    "pink"      : $pink,
    "red"       : $red,
    "orange"    : $orange,
    "yellow"    : $yellow,
    "green"     : $green,
    "teal"      : $teal,
    "cyan"      : $cyan    
);

@import "node_modules/bootstrap/scss/bootstrap";

However, I'd like to know if this is the right way of doing it as I do notice that I'm having a duplicate :root variable colors. Please refer to the attached image.

Am I missing something here?

Answer 1

That's because CSS variables are created from $colors: () map, not from $theme-colors:() map.

You are overriding already created CSS variables by using the same name for colors. If for, example do in

$theme-colors:( 'vermilion':$red, )

in root: you would see both --vermilion: and --red:

UPDATE: it is same as if in normal.css file you do:

:root {
    --red: #222222;
    --red: #333333;
}

--red: #222222; would be crossed and browser would use second --red: #333333;

Answer 2

Bootstrap defines css variables for both the $colors and the $theme-colors maps. Since the default $colors map includes many of the same colors that you are defining as $theme-colors as well, such as blue , indigo , purple etc. those will have the related CSS variables output twice.

The default $colors map is defined as (v4.5.2):

  (
    "blue":       $blue,
    "indigo":     $indigo,
    "purple":     $purple,
    "pink":       $pink,
    "red":        $red,
    "orange":     $orange,
    "yellow":     $yellow,
    "green":      $green,
    "teal":       $teal,
    "cyan":       $cyan,
    "white":      $white,
    "gray":       $gray-600,
    "gray-dark":  $gray-800
  )

It should not cause any issues as long as you are using the same color values for the same name in both $colors and the $theme-colors , or in your case as long as you are setting your $theme-colors map matching any of the keys in the default $colors map to the same variables. So in your case everything is normal and there's no need to worry at all.*

If you would like to set for example $blue to a different value than your "blue" item in $theme-colors , than you'd have an issue. In that case you'd need to use a different name in your $theme-colors map, eg "blue2" or similar.

You may find the double presence of these CSS variables annoying, but I guess it is like that so if you by accident would override one of your own colors, because of the interactions between

• the color-name variables (eg $blue ),
• the default colors() map (which contains a "blue": $blue declaration and results in a --blue css variable added by default) and
• the $theme-colors map (which may be customised to also contain an item with the key "blue":... and would also create a --blue css variable).

Not filtering out these potential duplicate declarations could give you a starting point to debug the issue. Otherwise it could be much harder to figure out what is going on just by looking at the styles in your browser.

*: Note that each theme-color adds some size to your final CSS, so it's best to only include those, which are needed for sure.