Cannot use CSS variables (var(--bs-primaryColor)) as $primary in Bootstrap SCSS – throws “is...

We are trying to use dynamic colors coming from our backend to replace Bootstrap’s primary and secondary colors at runtime. Our approach is to map Bootstrap’s $primary and $secondary SCSS variables to CSS custom properties so we can update them in the browser:

$primary: var(--bs-primaryColor) !default;
$secondary: var(--bs-secondaryColor) !default;

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

@function theme-color($key: "primary") {
@return map.get($theme-colors, $key);
}

:root {
@each $color, $value in $theme-colors {
--#{$color}: #{$value};
}
}



However, when compiling, Bootstrap’s functions like shade-color() or mix() throw an error:

X [ERROR] $color2: var(--bs-primary) is not a color.
212 │ @return mix(black, $color, $weight);

Steps to reproduce

1. In an Angular project with Bootstrap SCSS, set $primary: var(--bs-primaryColor) before importing Bootstrap.
2. Import Bootstrap: @import "bootstrap/scss/bootstrap";
3. Run the build (ng serve or sass).
4. Compilation fails with the above error.

What we expected


We expected Bootstrap to allow var(--bs-primary) as a valid $primary so we can update theme colors dynamically via JavaScript (document.documentElement.style.setProperty('--bs-primaryColor', '#hexvalue').

What actually happens


The Sass compiler treats var(--bs-primaryColor) as a string instead of a color, so functions like mix(), shade-color(), and tint-color() fail.

Environment

• Bootstrap version: [5.3.3]
• Framework: Angular 19
• Build tools: Angular CLI

Additional context


We’ve tried workarounds like color-mix() in pure CSS and runtime shading in JavaScript, but those require rewriting Bootstrap utilities and components manually.

Please prove a recommended approach for dynamic theming without recompiling Bootstrap?

Continue reading...