如何在引导程序 5 中访问主题颜色？

【问题标题】：How to access a theme color in bootstrap 5?如何在引导程序 5 中访问主题颜色？
【发布时间】：2021-08-02 21:13:31
【问题描述】：

我想定义我自己的主题颜色，以便覆盖标准引导元素，并在以后将值用于我自己的组件。这是我在 scss 文件中使用的代码：

$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 然后具有引导程序的原始原色，而不是我自己的。

【问题讨论】：

标签： sass bootstrap-5 bootstrap-themes

【解决方案1】：

“如何在 bootstrap 5 中访问主题颜色？”

简答，使用map-get...

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

Demo

“我想定义我自己的主题颜色，所以标准引导元素被覆盖，并且稍后将值用于我自己的组件”

完整答案，对于您的主题更改，最好重新定义$primary 的值。那么您就不必使用map-get。只需参考$primary...

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

@import "bootstrap";

.fa-li {
    color: $primary
}

Demo

另见：Overriding Bootstrap SCSS Variables

【讨论】：