在 Bootstrap 4.5 中创建自己的主题答案

【问题标题】：Create your own theme in Bootstrap 4.5在 Bootstrap 4.5 中创建自己的主题
【发布时间】：2020-09-14 12:02:13
【问题描述】：

我刚刚从 getbootstrap.com 下载了 SASS 源文件，并安装了编译器 Koala。

据我所知，这样做的方法是

创建您自己的 sass 文件。
在文件开头包含覆盖。
在文件末尾导入'bootstrap.scss。
编译您的 css 文件并将标准 cdn 替换为此 css 文件。

实际上，这是可行的，但是当我尝试使用自己的风格创建导航栏时，我意识到仅创建主题是不够的。一个例子是导航栏文本颜色以一种完全不适合主题的奇怪颜色显示。那么我还需要做什么呢？下面是我的自定义 scss。

// Custom.scss

// Make overrides and customizations
$myown: #0066CC !default;
$theme-colors: ("myown": #0066CC);

// Include all of Bootstrap
@import "bootstrap.scss";

【问题讨论】：

是的，描述有点模糊，但我说的是用于创建导航栏的文本颜色。当您创建自己的主题并使用标签 ""
（深色应替换为您自己的主题）进行设置时，文本颜色是根本不适合我的情况（使用#0066CC），所以它或多或少不可见。我期待的是白色，但事实并非如此。
嗨，齐姆！那成功了。老实说，我还没有意识到 navbar-dark 与 navbar light 的影响。如果您将导航栏设置为暗色，它会使文本变亮并且反之亦然。如何将您的最终评论标记为答案？

标签： css bootstrap-4 sass koala

【解决方案1】：

只有navbar-light 和navbar-dark 影响导航栏的文本颜色。使用 navbar-dark 应该可以正常工作：http://codeply.com/p/UAWVfUy3VX -- 因为蓝色更暗。

SASS

$myown: #0066CC;
$theme-colors: ("myown": #0166CC);

@import "bootstrap";

HTML

<nav class="navbar navbar-expand-md navbar-dark bg-myown">...</nav>

另见：Customizing Bootstrap CSS template

【讨论】：