Change Bootstrap 4 text colors

Question

I am trying to create a simple dark/inverted Bootstrap 4 theme (black background, white text) using the hackerthemes kit and overriding the bootstrap variables scss. Setting the background to black is simple enough with $body-bg: black, but I can't for the life of me figure out which variable controls text color.
I see headings-color defaults to inherit which I assume means inherit from the general text color, but I can't find where that is defined.

Help an idiot out? How can I set the base text color in Bootstrap 4 using SCSS?

Answer 1

Override body-color. In CSS text color of an element is controlled by the confusingly named color property. So the name of the bootstrap variable is derived from that.

Answer 2

In the same root folder as your bootstrap scss files, create a main.scss file. You can call it what you want: main, site, custom, etc.

/* 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";

Use a Scss compiler to convert the main.scss code to main.css.

Link to the main.css file from your code.