Cannot use CSS variables (var(--bs-primaryColor)) as $primary in Bootstrap SCSS – throws “is not a color” error

[harshsavadia]

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.

Here is repro on stackblitz

Would the Bootstrap team consider:

Supporting var() references for $theme-colors?
Or providing a recommended approach for dynamic theming without recompiling Bootstrap?

[mcortezv]

SCSS cannot use var(--bs-*) in functions like mix() or darken() because CSS variables exist only at runtime, while SCSS variables are compile-time.

Recommended approach:

• Keep $primary and $secondary as real colors for compile-time calculations.
• Map them to CSS variables in :root for runtime updates:

$primary: #0d6efd;
$secondary: #6c757d;

:root {
  --bs-primaryColor: #{$primary};
  --bs-secondaryColor: #{$secondary};
}

• Update the CSS variables dynamically in JavaScript:

document.documentElement.style.setProperty('--bs-primaryColor', '#ff5733');

This way, Bootstrap utilities work at compile-time, and you can change theme colors at runtime without recompiling.

You cannot pass CSS variables directly to SCSS functions.

[harshsavadia]

@mcortezv , my usecase is dynamic overriding of bootstrap variables

how do we override bootstrap primary / secondary variable with primaryColor / secondaryColor? with above approach, btn-primary like classes still using bootstrap primary color rather than mine