How to access a theme color in bootstrap 5?

Question

I want to define my own theme color so the standard bootstrap elemets are overriden and also use the value later for my own components. Here is the code I use in a scss file:

$theme-colors: (
    "primary": #611fe6,
    "secondary": #ffbd58,
    "dark": #000000
);

@import "node_modules/bootstrap/scss/bootstrap";
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";


.fa-li {
    color: $primary;
}

.fa-li then has the original primary color of bootstrap and not my own.

Answer 1

"How to access a theme color in bootstrap 5?"

Short answer, use map-get...

.fa-li {
    color: map-get($theme-colors,"primary")
}

Demo

---

"I want to define my own theme color so the standard bootstrap elements are overridden and also use the value later for my own components"

Full answer, For your theme changes it would be better to redefine the value of $primary. Then you won't have to use map-get. Simply reference $primary...

$primary: #611fe6;
$secondary: #ffbd58;
$dark: #000000;

@import "bootstrap";

.fa-li {
    color: $primary
}

Demo

---

Also see: Overriding Bootstrap SCSS Variables