更改 Bootstrap 4 文本颜色

Question

我正在尝试使用hackerthemes工具包并覆盖引导变量scss来创建一个简单的暗/倒置Bootstrap 4主题（黑色背景，白色文本）。使用 将背景设置为黑色很简单$body-bg: black，但我一生都无法弄清楚哪个变量控制文本颜色。
我看到我认为的headings-color默认值inherit意味着从一般文本颜色继承，但我找不到它的定义位置。

帮助一个白痴？如何使用 SCSS 在 Bootstrap 4 中设置基本文本颜色？

Answer 1

覆盖body-color。在 CSS 中，元素的文本颜色由令人困惑的命名color属性控制。所以引导变量的名称是从那里派生出来的。

Answer 2

在与引导程序 scss 文件相同的根文件夹中，创建 main.scss 文件。您可以将其命名为您想要的名称：main、site、custom 等。

/* main.scss */

/* import the necessary Bootstrap files */
@import "_functions.scss";
@import "_variables.scss";

/* make changes to the !default Bootstrap variables */
$body-color: #6D2077;  //this is the text color
$body-bg: #F2F5F7; //this is the background color
$input-focus-border-color: #6D2077;

// Typography
//$font-size-base: 12px; // this changes the font-size throughout bootstrap
//$font-family-sans-serif: "Raleway", sans-serif;
//$font-size-base: 1rem;
//$line-height-base: 1.2;

/* here you can change the default colors, for example, text-danger. */
$theme-colors: ( "primary": purple, "danger": orange );

/* finally, import Bootstrap to set the changes! */
@import "bootstrap.scss";

使用Scss编译器将main.scss代码转换为main.css。

从代码链接到 main.css 文件。