更改 Bootstrap 主题颜色答案

【问题标题】：Changing Bootstrap theme-colors更改 Bootstrap 主题颜色
【发布时间】：2020-09-14 06:23:22
【问题描述】：

为了便于参考，我正在创建新的主题颜色，如下所示，因此我可以使用bg-red 而不是bg-danger 或text-purple 等等。

$primary        : #24305e;
$blue           : #375abb;
$indigo         : #796eff;
$purple         : #6f42c1;
$pink           : #e83e8c;
$red            : #db4446;
$orange         : #e3240C;
$yellow         : #ffc107;
$green          : #21c87a;
$teal           : #2e9cca;
$cyan           : #17a2b8;
$light          : #f6f9fc;

$theme-colors   : (
    "blue"      : $blue,
    "indigo"    : $indigo,
    "purple"    : $purple,
    "pink"      : $pink,
    "red"       : $red,
    "orange"    : $orange,
    "yellow"    : $yellow,
    "green"     : $green,
    "teal"      : $teal,
    "cyan"      : $cyan    
);

@import "node_modules/bootstrap/scss/bootstrap";

但是，我想知道这是否是正确的做法，因为我注意到我有重复的 :root 可变颜色。请参考附图。

我错过了什么吗？

【问题讨论】：

尝试将$theme-colors移到底部..写在@import语句之后
感谢您的建议，但我认为这样做是不可能的，因为您将失去使用 bg-red 或 text-yellow 的能力。
我想删除或添加您需要访问 $theme-colors 变量的主题颜色...getbootstrap.com/docs/4.4/getting-started/theming/#add-to-map检查删除颜色部分。
问题不在于添加它，因为我所做的至少对我有用。只是，也许只是我，我有点讨厌看到添加额外的 CSS 变量。也许这个过程有些错误，但至少它对我有用。感谢您的帮助。

标签： css twitter-bootstrap sass

【解决方案1】：

这是因为 CSS 变量是从 $colors: () 映射创建的，而不是从 $theme-colors:() 映射创建的。

您通过使用相同的颜色名称来覆盖已创建的 CSS 变量。如果为，例如做在

$theme-colors:( 'vermilion':$red, )

在root: 中你会看到--vermilion: 和--red:

更新：就像在普通的 .css 文件中一样：

:root {
    --red: #222222;
    --red: #333333;
}

--red: #222222; 将被交叉，浏览器将使用第二个 --red: #333333;

【讨论】：

谢谢。所以我不能使用覆盖默认颜色的相同名称？
你可以，你会看到你现在看到的——交叉变量。但它工作正常。你没有发现任何问题，对吧？

【解决方案2】：

Bootstrap 为 $colors 和 $theme-colors 映射定义了 css 变量。由于默认的$colors 映射还包括许多与您定义为$theme-colors 相同的颜色，例如blue、indigo、purple 等，因此相关的CSS 变量会输出两次。

默认的$colors映射定义为(v4.5.2)：

  (
    "blue":       $blue,
    "indigo":     $indigo,
    "purple":     $purple,
    "pink":       $pink,
    "red":        $red,
    "orange":     $orange,
    "yellow":     $yellow,
    "green":      $green,
    "teal":       $teal,
    "cyan":       $cyan,
    "white":      $white,
    "gray":       $gray-600,
    "gray-dark":  $gray-800
  )

只要您在$colors 和$theme-colors 中使用相同名称的相同颜色值，或者在您的情况下设置$theme-colors 映射匹配，它就不会导致任何问题默认$colors 中的任何键都映射到相同的变量。所以你的情况一切正常，完全不用担心。*

如果您想将$blue 设置为与$theme-colors 中的"blue" 项目不同的值，那么您就会遇到问题。在这种情况下，您需要在 $theme-colors 映射中使用不同的名称，例如"blue2" 或类似的。

你可能会发现这些 CSS 变量的双重存在很烦人，但我想就是这样，所以如果你不小心会覆盖你自己的一种颜色，因为它们之间的相互作用

颜色名称变量（例如$blue），
默认的colors() 映射（其中包含"blue": $blue 声明并导致默认添加--blue css 变量）和
$theme-colors 映射（可以自定义为还包含一个带有键 "blue":... 的项目，并且还会创建一个 --blue css 变量）。

不过滤掉这些潜在的重复声明可以为您提供调试问题的起点。否则，仅通过查看浏览器中的样式就很难弄清楚发生了什么。

*：请注意，每个主题颜色都会为您的最终 CSS 增加一些大小，因此最好只包含那些肯定需要的内容。

【讨论】：