Error: argument `$color-2` of `mix($color-1, $color-2, $weight: 50%)` must be a color when compile my own bootstrap theme

Question

i try to build my own theme. i change color theme to my style. but i got error when compile my own theme, this is my theme was created.

// 1. core variables and mixins
@import "../bootstrap/functions";
@import "../bootstrap/variables";
@import "../bootstrap/mixins";

// 2. custom core variables

// colors
$theme-colors : (
  "primary":    "46B078",
  "secondary":  "#B7E1CB",
  "success":    "#26de81",
  "info":       "#2bcbba",
  "warning":    "#fed330",
  "danger":     "#fc5c65",
);

// 3. core CSS
@import "../bootstrap/root";
@import "../bootstrap/reboot";
@import "../bootstrap/type";
@import "../bootstrap/images";
@import "../bootstrap/code";
@import "../bootstrap/grid";
@import "../bootstrap/tables";
@import "../bootstrap/forms";
@import "../bootstrap/buttons";
@import "../bootstrap/transitions";
@import "../bootstrap/dropdown";
@import "../bootstrap/button-group";
@import "../bootstrap/input-group";
@import "../bootstrap/custom-forms";
@import "../bootstrap/nav";
@import "../bootstrap/navbar";
@import "../bootstrap/card";
@import "../bootstrap/breadcrumb";
@import "../bootstrap/pagination";
@import "../bootstrap/badge";
@import "../bootstrap/jumbotron";
@import "../bootstrap/alert";
@import "../bootstrap/progress";
@import "../bootstrap/media";
@import "../bootstrap/list-group";
@import "../bootstrap/close";
@import "../bootstrap/modal";
@import "../bootstrap/tooltip";
@import "../bootstrap/popover";
@import "../bootstrap/carousel";
@import "../bootstrap/utilities";
@import "../bootstrap/print";

error message on gulp:

Error in plugin "sass"
Message:
    src/sass/bootstrap/_functions.scss
Error: argument `$color-2` of `mix($color-1, $color-2, $weight: 50%)` must be a color
        on line 85 of src/sass/bootstrap/_functions.scss, in function `mix`
        from line 85 of src/sass/bootstrap/_functions.scss, in function `theme-color-level`
        from line 103 of src/sass/bootstrap/_tables.scss
        from line 25 of src/sass/themes/default.scss
>>   @return mix($color-base, $color, $level * $theme-color-interval);

   ----------^

how to fix this error, what wrong with my code. i was follow the instruction from the bootstrap document but still error.

Answer 1

primary color in theme-colors is missing the # symbol before the color value.

The correct line should look like this:

"primary":    "#46B078",

Answer 2

I came across this issue when upgrading my project from bootstrap 4 to bootstrap 5. Before trying my solution, please ensure you are not missing the # symbol before the color value.

In my case it was happening when $color-2 was referring to another variable that was referring to another variable, that was referring to another variable. To fix it, I removed the !default from all of the variables except variables defined to the actual color.

For Example:

Initial: (this was in _variables.scss)

$gray-200: #e9ecef !default;
$input-group-addon-bg: $gray-200 !default;
$form-file-button-bg:$input-group-addon-bg !default;

Changed to: (removed !default on $input-group-addon-bg and $form-file-button-bg, but left it for $gray-200: #e9ecef)

$gray-200: #e9ecef !default;
$input-group-addon-bg: $gray-200;
$form-file-button-bg:$input-group-addon-bg;

Note: !default this might cause issues if you are override the variables you removed "!default" from.