Is it possible to use CSS variables in Twitter-bootstrap 4 $theme-colors array?

Is it possible to use CSS variables in Twitter-bootstrap 4 $theme-colors array?

In bootstrap 4 you can define and/or override default colors using the following array: (<a href="https://getbootstrap.com/docs/4.2/getting-started/theming/#modify-map" target="_blank">as documented here</a>)

In bootstrap 4 you can define and/or override default colors using the following array: (as documented here)

$theme-colors: (
    "primary": #001122, /*override*/
    "color-1": red, /*new color*/
    "color-2": black, /*new color*/
    "color-3": white /*new color*/
);

I want to make custom theme colors for different users. Users can choose different color palettes which I have defined based on the class of the body.

I made a new file to make my own styles, defining my theme colors in CSS variables in the body tag:

body {
  &.color-pallette-red {
    --theme-color-1: red;
    --theme-color-2: black;
    --theme-color-3: white;

color: var(--theme-color-1); /*red*/

}

&.color-pallette-yellow { --theme-color-1: yellow; --theme-color-2: black; --theme-color-3: white;

color: var(--theme-color-1); /*yellow*/

} }

But in this way, the bootstrap colors are of course not overwritten...

I tried to paste my CSS variables in the bootstrap array mentioned earlier, to make sure that bootstrap used my colors:

$theme-colors: (
    "color-1": var(--theme-color-1),
    "color-2": var(--theme-color-2),
    "color-3": var(--theme-color-3)
);

But this returns Error: $color2: var(--theme-color-1) is not a color. @return mix($color-base, $color, $level * $theme-color-interval); after running the compiling script. So bootstrap/compiler didn't recognize my CSS variables as a color...

Summarized what I want is: Change bootstrap colors based on body class. Does anyone know a way to achieve this?

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Sass Tutorial for Beginners - CSS With Superpowers

In this Sass tutorial for beginners, you will learn the basics of Sass. We will start with a brief overview of what Sass is along with what is required to incorporate Sass into your environment. We will also set up a Sass compiler in Visual Studio Code. You will learn about Sass variables, maps, nesting, functions, mixins, extending, and operations. Lastly, we will start from scratch on a real-world project (Portfolio website) using Sass. We will go step-by-step through each part, and at the end, we will deploy the site.

Top 10 Time-Saving CSS Tips When using Sass

These top 10 CSS best practices will help you save time and collaborate better with your team.

7 Best Vue CSS Component for Your App

Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step.