如何在Bootstrap 5中访问主题颜色？

Question

我想定义自己的主题颜色，这样标准的Bootstrap元素将被覆盖，并且稍后还可以在我的组件中使用该值。以下是我在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然后具有Bootstrap的原始主要颜色，而不是我的自定义颜色。

- MarcS82

Answer 1

"如何在Bootstrap 5中访问主题颜色？" 简短的回答是使用 map-get...。"

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

对于您的主题更改，最好重新定义$primary的值。这样你就不必使用map-get。只需引用$primary... 请参考演示。

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

@import "bootstrap";

.fa-li {
    color: $primary
}

演示

---

另请参见：覆盖Bootstrap SCSS变量

- Zim