Conditially override scss variables for bootstrap 4 theme switching - css

Question

Per the Bootstrap docs,
Every Sass variable in Bootstrap 4 includes the !default flag allowing
you to override the variable’s default value in your own Sass without
modifying Bootstrap’s source code. Copy and paste variables as needed,
modify their values, and remove the !default flag. If a variable has
already been assigned, then it won’t be re-assigned by the default
values in Bootstrap.
So they recommend you create your own theme like this:
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
#import "node_modules/bootstrap/scss/bootstrap";
What I would like to do is have two sets of variables, and uses this to switch between a light and dark theme:
// Your variable overrides
body.light-mode {
$body-bg: #fff;
}
body.dark-mode {
$body-bg: #000;
}
// Bootstrap and its default variables
#import "node_modules/bootstrap/scss/bootstrap";
But this doesn't seem to be working, I think because of how variables are scoped.
Is this possible? Ideally I'd like to have light and dark variables in their own file.
For a little context; I am using bootstrap in a web app created by create-react-app, and they recommend to import bootstrap as detailed here. If I just generated 2 separate style sheets I'd have copy those to my /public folder manually and reference, and they wouldn't be part of the webpack bundling.

Answer 1

This was the solution I went with:
// Default theme
$body-bg: #fff;
// etc...
// Bootstrap and its default variables
#import "node_modules/bootstrap/scss/bootstrap";
// dark theme, turned on by adding class dark to document.documentElement (html tag)
.dark {
$body-bg: #000;
// etc...
// Import just the things you customize
#import "~bootstrap/scss/functions";
#import "~bootstrap/scss/variables";
#import "~bootstrap/scss/mixins";
#import "~bootstrap/scss/tables";
#import "~bootstrap/scss/button-group"
// etc....
}

Answer 2

That won't work. Why not make two different themes - dark/light:
light theme (light-theme.scss):
// Your variable overrides
$body-bg: #fff;
// Bootstrap and its default variables
#import "node_modules/bootstrap/scss/bootstrap";
dark theme (dark-theme.scss):
// Your variable overrides
$body-bg: #000;
// Bootstrap and its default variables
#import "node_modules/bootstrap/scss/bootstrap";
and then pull the appropriate style sheet into the page as needed?