How to add theme $custom-colors using default BS names w/o duplication?

[SamuelMiller]

Since I can't seem to remember what colors I assign to BS's default theme colors (i.e., primary, info, success warning, danger), I want to use specific color-named themes. However, when I do I get dupplication in the :root of the default colors I've redefined in my scss.

In my custom boostrap.scss file, i've specified the following:

$red: hsl(357, 90%, 41%);
$darkred: darken($red, 10%);
$yellow: hsl(46, 100%, 52%);
$cyan: hsl(186, 72%, 56%);
$orange: mix($red, $yellow, 50%);
$green: mix($yellow, $cyan, 50%);

$custom-colors: (
    "red": $red,
    "orange": $orange,
    "yellow": $yellow,
    "cyan": $cyan,
    "darkred": $darkred
);

While I get the new named themes (e.g., .btn-darkred) that I want, the CSS variables bs-red, --bs-orange, --bs-yellow, and --bs-cyan are declared twice in the :root. Is there a way to avoid this so that redefined BS colors assign to $custom-colors appear only once in the :root declaration? If there isn't an easy way, I suggest that bootstraps functions automatically detect duplicate color names. It's not a big issues since it's only a few lines of extra code, but as semi-perfectionist, I am curious to learn if there is away to accomplish this.

[WinterSilence]

Not exists the tools to removing duplicated declarations of custom CSS variables, because tools can't understand is this variable is duplicated or is correct redeclared variable.
You can merge single @each cycles of color arrays $colors, $theme-colors and $custom-colors in _root.scss:

@each $color, $value in map-merge-multiple($colors, $theme-colors, $custom-colors) {
  --#{$variable-prefix}#{$color}: #{$value};
}

[SamuelMiller]

Thanks for replying. Would I add your line of code to my custom.scss before or after importing _root.scss or in the _root.scss file itself? Does it replace "$theme-colors: map-merge($theme-colors, $custom-colors);". I am not sure what your code does. This is my current custom.scss file. How would I modify it? I am novice with customizing Bootstrap SASS.

//-Toggle-global-options
$enable-gradients: true;
$enable-shadows: true;
$enable-negative-margins: true;

// CONFIGURATION
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "bootstrap/functions";

// 2. Include any default variable overrides here
$red: hsl(357, 90%, 41%);
$darkred: darken($red, 10%);
$yellow: hsl(46, 100%, 52%);
$cyan: hsl(186, 72%, 56%);
$orange: mix($red, $yellow, 50%);
// $purple: mix($red, $cyan, 50%);
$green: mix($yellow, $cyan, 50%);
$primary: $orange;

$custom-colors: (
    "red": $red,
    "orange": $orange,
    "yellow": $yellow,
    "cyan": $cyan,
    "darkred": $darkred
);
$grid-breakpoints: (
    xxs: 0,
    xs: 320px,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1400px
);
$container-max-widths: (
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1200px,
    xxl: 1320px
);

$font-size-root: calc(100% * (var(--basepixel, 16)/16));
$headings-font-family: var(--headings-font-family), var(--bs-font-sans-serif);

$shadowcolor: var(--bs-shadow-color, var(--bs-black-rgb));
$box-shadow-sm: 0.5px 1px 1px rgba($shadowcolor, var(--bs-bg-opacity, .7));
$box-shadow: 1px 2px 2px rgba($shadowcolor, var(--bs-bg-opacity, .333)),
    2px 4px 4px rgba($shadowcolor, var(--bs-bg-opacity, .333)),
    3px 6px 6px rgba($shadowcolor, var(--bs-bg-opacity, .333));
$box-shadow-lg: 1px 2px 2px rgba($shadowcolor, var(--bs-bg-opacity, .2)),
    2px 4px 4px rgba($shadowcolor, var(--bs-bg-opacity, .2)),
    4px 8px 8px rgba($shadowcolor, var(--bs-bg-opacity, .2)),
    8px 16px 16px rgba($shadowcolor, var(--bs-bg-opacity, .2)),
    16px 32px 32px rgba($shadowcolor, var(--bs-bg-opacity, .2));

// 3. Include remainder of required Bootstrap stylesheets
@import "bootstrap/variables";

// 4. Include any default map overrides here
$theme-colors: map-merge($theme-colors, $custom-colors);
$theme-colors: map-remove($theme-colors, "info", "success", "warning", "danger");

// 5. Include remainder of required parts
@import "bootstrap/maps";
@import "bootstrap/mixins";
@import "bootstrap/utilities";

// Add custom utilities
$drop-shadow-sm: drop-shadow(0.5px 1px 1px rgba($shadowcolor, var(--bs-bg-opacity, .7)));
$drop-shadow: drop-shadow(1px 2px 2px rgba($shadowcolor, var(--bs-bg-opacity, .333))) drop-shadow(2px 4px 4px rgba($shadowcolor, var(--bs-bg-opacity, .333))) drop-shadow(3px 6px 6px rgba($shadowcolor, var(--bs-bg-opacity, .333)));

$drop-shadow-lg: drop-shadow(1px 2px 2px rgba($shadowcolor, var(--bs-bg-opacity, .2))) drop-shadow(2px 4px 4px rgba($shadowcolor, var(--bs-bg-opacity, .2))) drop-shadow(4px 8px 8px rgba($shadowcolor, var(--bs-bg-opacity, .2))) drop-shadow(8px 16px 16px rgba($shadowcolor, .2)) drop-shadow(16px 32px 32px rgba($shadowcolor, var(--bs-bg-opacity, .2)));

$utilities: map-merge($utilities,
        ("drop-shadow": (property: filter,
                class: drop-shadow,
                values: (null: $drop-shadow,
                    sm: $drop-shadow-sm,
                    lg: $drop-shadow-lg,
                    none: none,
                ))));

// 6. Optionally include any other parts as needed
// Layout & components
@import "bootstrap/root";
@import "bootstrap/reboot";
@import "bootstrap/type";
@import "bootstrap/images";
@import "bootstrap/containers";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";
@import "bootstrap/transitions";
@import "bootstrap/dropdown";
@import "bootstrap/button-group";
@import "bootstrap/nav";
@import "bootstrap/navbar";
@import "bootstrap/card";
@import "bootstrap/accordion";
@import "bootstrap/breadcrumb";
@import "bootstrap/pagination";
@import "bootstrap/badge";
@import "bootstrap/alert";
@import "bootstrap/progress";
@import "bootstrap/list-group";
@import "bootstrap/close";
@import "bootstrap/toasts";
@import "bootstrap/modal";
@import "bootstrap/tooltip";
@import "bootstrap/popover";
@import "bootstrap/carousel";
@import "bootstrap/spinners";
@import "bootstrap/offcanvas";
@import "bootstrap/placeholders";

// Helpers
@import "bootstrap/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "bootstrap/utilities/api";

[WinterSilence]

in _root.scss

:root {
  // Note: Custom variable values only support SassScript inside `#{}`.

  // Colors
  //
  // Generate palettes for full colors, grays, and theme colors.

  @each $color, $value in $grays {
    --#{$prefix}gray-#{$color}: #{$value};
  }

  @each $color, $value in map-merge-multiple($colors, $theme-colors, $custom-colors) {
    --#{$prefix}#{$color}: #{$value};
  }

and remove $theme-colors: map-remove($theme-colors, "info", "success", "warning", "danger");

[SamuelMiller]

Thanks for your suggestion. I am hesitant to tweak Boostrap's core files, but I will experiment with your code to see the result.

[WinterSilence]

@mdo posts like this are result of disallow to #35967