Override primary color in Bootstrap 4 based on body class?

Question

I have a website where each section has its own primary color.

I would like to put something in the Bootstrap 4 Sass code to override the foreground color depending on which body class I set.

I have this, but it is not working yet:

$theme-colors: () !default; $theme-colors: map-merge(( // primary: $blue, // secondary: $gray-600, success: $green, info: $cyan, warning: $yellow, danger: $red, light: $gray-100, dark: $gray-800 ), $theme-colors) !default; // override according to portal html { &.portal-1 { $theme-colors: map-merge(( primary: #f1b36d ), $theme-colors); } 

How can this be implemented in the Bootstrap 4 Sass file?

Answer 1

You cannot modify sass variables that are dynamically converted to static CSS on the client side. However, to create a thematic system, you can apply one of the following options:

1. Create an independent topic

Put the theme argument in your build system that will generate different CSS Ex themes: grunt build-sass --theme=brown

 var themes = { "default": "https://bootswatch.com/flatly/bootstrap.min.css", "cerulean" : "https://bootswatch.com/cerulean/bootstrap.min.css" } // Use something like this to add theme: (You can also append instead of overriding whole head html) var headHTML = document.getElementsByTagName('head')[0].innerHTML; headHTML += '<link type="text/css" rel="stylesheet" href="' + themes.cerulean +'">'; document.getElementsByTagName('head')[0].innerHTML = headHTML; 

2. Changing properties based on the parent class

You can have basic CSS that defines common CSS. And then you can have separate CSS properties based on the parent

In the following example, upgrade the green-theme class to blue-theme and vice versa

 div[class^=component] { display: inline-block; width:150px; height: 150px; margin: 1em; border: 1px solid black; box-shadow: 1px 1px 5px gray; border-radius:1em; } /* Colors*/ $blue1: #3066BE; $blue2: #090C9B; $green1: #5C946E; $green2: #80C2AF; /* Blue Theme */ .blue-theme { .component1 { background-color: $blue1; } .component2 { background-color: $blue2; } } /* Green Theme */ .green-theme { .component1 { background-color: $green1; } .component2 { background-color: $green2; } } 

 <div class="green-theme" id="mainBody"> <div class="component1"> </div> <div class="component2"> </div> </div> 

* Run Snippet will not work as we use SCSS *

Answer 2

Create such a scss file structure,

 - vendors - bootstrap - stylesheets /*[Bootstrap 4 official sass files]*/ - _bootstrap.scss - scss - themes - _theme-1.scss - _theme-2.scss - _variables.scss - styles.scss - portal-1.scss - portal-2.scss 

_variables.scss

 @import "../vendors/bootstrap/stylesheets/bootstrap/variables"; @import "../vendors/bootstrap/stylesheets/bootstrap/mixins"; /* override bootstrap default variables ... */ /* custom variables with !default ... */ 

styles.scss

 @import "variables"; @import "../vendors/bootstrap/stylesheets/bootstrap"; /* custom styles ... */ 

themes /_theme-1.scss

 @import "../variables"; /* change value bootstrap and custom default variables ... */ $brand-primary: #428bca $brand-success: #5cb85c; $brand-info: #5bc0de; $brand-warning: #f0ad4e; $brand-danger: #d9534f; $body-bg: #eff; 

themes /_theme-2.scss

 @import "../variables"; /* change value bootstrap and custom default variables ... */ $brand-primary: #C04848; 

Portal 1.scss

 @import "themes/_theme-1"; /* change style with new variable bootstrap default components ... */ .portal-1 { @import "../vendors/bootstrap/stylesheets/bootstrap/buttons"; @import "../vendors/bootstrap/stylesheets/bootstrap/alerts"; /* custom style overrides ... */ } 

Portal-2.scss

 @import "themes/_theme-2"; /* change style with new variable bootstrap default components ... */ .portal-2 { @import "../vendors/bootstrap/stylesheets/bootstrap/buttons"; @import "../vendors/bootstrap/stylesheets/bootstrap/alerts"; /* custom styles from style.scss overrides ... */ } 

After compiling sass, we get 3 styles.css, portal-1.css and portal-2.css files. Use style.css by default, and others in the head tag for the theme.

 <html> <head> <link href="styles.css" rel="stylesheet" /> <link href="portal-1.css" rel="stylesheet" /> </head> <body> <button class="btn btn-primary">BUTTON</button> <div class="portal-1"> <button class="btn btn-primary">BUTTON</button> </div> </body> </html>