CODEWITHSUNDEEP
csstwitter-bootstrapwebpacksasscreate-react-app
user210757
user210757

Reputation: 7386

Conditially override scss variables for bootstrap 4 theme switching

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.

Upvotes: 4

Views: 2856

Answers (2)

user210757
user210757

Reputation: 7386

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....

}

Upvotes: 4

combatc2
combatc2

Reputation: 1263

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?

Upvotes: 1

Related Questions