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

Question

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

In an Angular project with Bootstrap SCSS, set $primary: var(--bs-primaryColor) before importing Bootstrap.
Import Bootstrap: @import "bootstrap/scss/bootstrap";
Run the build (ng serve or sass).
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

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

It'll be useful if you provide a playground for reproducing this. Follow these guidelines to create a minimal reproducible example. — UncleBigBay
– UncleBigBay, Commented Sep 16 at 16:51
It's not possible (check this a bit old dicussion in github. The resumen is "You can think of it like the difference between server-side JavaScript and client-side JavaScript. Sass is a server-side version of CSS. While Sass acts as a proving-ground for many new CSS features (including variables!), Sass itself does not run in the browser, and therefor cannot be dynamic. That's not something that we can change." — Eliseo
– Eliseo, Commented Sep 17 at 15:32
you can create differents "bootstraps.css" and add dinamically like this SO — Eliseo
– Eliseo, Commented Sep 17 at 15:34

Naren Murali · Accepted Answer · 2025-09-17 06:12:18Z

0

Declaring classes using bootstrap variables:

Technically you are not overriding any bootstrap variables, but declaring other variables using the already present variables. So you can import the variables and bootstrap functions then construct the classes.

@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/variables-dark';

$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};
  }
}

@import 'bootstrap/scss/bootstrap';

Stackblitz Demo

Overriding the bootstrap variables:

By meaning of overriding variables, it would be declaring the variables before the bootstrap import. Bootstrap variables are declared with !default, so if there is already a value present, then that value is taken instead of the default value set by bootstrap.

$primary: #ff0000;

@import "bootstrap/scss/bootstrap";

Stackblitz Demo

edited Sep 17 at 6:12

answered Sep 16 at 18:25

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Harsh Savadia Sep 16 at 19:10

reason to keep @import 'bootstrap/scss/bootstrap'; at bottom is I want to override bootstrap primary / secondary color theme with my custom primary secondary color - Bootstrap Saas.

Naren Murali Sep 17 at 6:12

updated my answer

Harsh Savadia Sep 17 at 10:00

my usecase is dynamic overriding of bootstrap variables (all places like btn-primary, bg-primary it should use my primarycolor) here is updated stackblitz

Collectives™ on Stack Overflow

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

Steps to reproduce

What we expected

What actually happens

Environment

Additional context

1 Answer 1

Declaring classes using bootstrap variables:

Stackblitz Demo

Overriding the bootstrap variables:

Stackblitz Demo

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Steps to reproduce

What we expected

What actually happens

Environment

Additional context

1 Answer 1

Declaring classes using bootstrap variables:

Overriding the bootstrap variables:

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related