Изменить цвета текста Bootstrap 4

Question

Я пытаюсь создать простую темную / перевернутую тему Bootstrap 4 (черный фон, белый текст), используя hackerthemes kit и переопределяя переменные начальной загрузки scss. Установить черный фон достаточно просто с помощью $body-bg: black, но я не могу понять, какая переменная контролирует цвет текста.
Я вижу headings-color по умолчанию inherit, что, я предполагаю, означает наследование от общего цвета текста, но я не могу найти, где это определено.

Выручить идиота? Как установить базовый цвет текста в Bootstrap 4 с помощью SCSS?

Answer 1

В той же корневой папке, что и ваши файлы начальной загрузки scss, создайте файл main.scss. Вы можете называть это как хотите: основной, сайт, пользовательский и т. Д.

/* 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 из вашего кода.

Answer 2

Переопределить body-color. В CSS текстовый цвет элемента контролируется с ошибочно названным свойством color. Таким образом, имя переменной начальной загрузки происходит от этого.