How can I change the primary color in Bootstrap 4 based on the body class?

Question

How can I change the primary color in Bootstrap 4 based on the body class?

I'm working on a website where each section is assigned a primary color. Now, I want to use Bootstrap 4's Sass code to dynamically change the primary color based on a body class I set.

Although I have attempted to do this with the following code, it hasn't been successful:

$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);
    }

Can anyone guide me on how to properly implement this feature in Bootstrap 4's Sass files?

css twitter-bootstrap sass bootstrap-4

Answer 1

Answer №1

It is not possible to dynamically change sass variables that have already been converted to static CSS on the client side. However, there are a few options you can consider for building a theme system:

1. Creating independent themes

Add a theme argument to your build system to generate different theme CSS files. For example: 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 a theme: (You can also append instead of overriding the 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. Adapting properties based on the parent class

You can have a base CSS file that defines general styles and then specific CSS properties based on the parent class.

In the example below, you can switch 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>

*Please note that the Run Snippet feature will not work as we are using SCSS.*

Answer 2

It is not possible to dynamically change sass variables that have already been converted to static CSS on the client side. However, there are a few options you can consider for building a theme system:

1. Creating independent themes

Add a theme argument to your build system to generate different theme CSS files. For example: 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 a theme: (You can also append instead of overriding the 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. Adapting properties based on the parent class

You can have a base CSS file that defines general styles and then specific CSS properties based on the parent class.

In the example below, you can switch 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>

*Please note that the Run Snippet feature will not work as we are using SCSS.*

Answer 3

Answer №2

Create a structured scss file setup as shown below:

- vendors
  - bootstrap
    - stylesheets /*[Official Bootstrap 4 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 default bootstrap variables */
/* define custom variables with !default */

styles.scss

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

themes/_theme-1.scss

@import "../variables";
/* modify bootstrap and custom 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";
/* adjust bootstrap and custom variables */
$brand-primary:         #C04848;

portal-1.scss

@import "themes/_theme-1";
/* apply style changes using new bootstrap variables */
.portal-1 {
    @import "../vendors/bootstrap/stylesheets/bootstrap/buttons";
    @import "../vendors/bootstrap/stylesheets/bootstrap/alerts";
   /* customize styles here */
}

portal-2.scss

@import "themes/_theme-2";
/* apply style changes using new bootstrap variables */
.portal-2 {
    @import "../vendors/bootstrap/stylesheets/bootstrap/buttons";
    @import "../vendors/bootstrap/stylesheets/bootstrap/alerts";
   /* include custom styles from style.scss overrides */
}

Upon compilation, you will have styles.css, portal-1.css, and portal-2.css files. Include styles.css by default and the others in the head tag for theming.

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

Answer 4

Create a structured scss file setup as shown below:

- vendors
  - bootstrap
    - stylesheets /*[Official Bootstrap 4 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 default bootstrap variables */
/* define custom variables with !default */

styles.scss

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

themes/_theme-1.scss

@import "../variables";
/* modify bootstrap and custom 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";
/* adjust bootstrap and custom variables */
$brand-primary:         #C04848;

portal-1.scss

@import "themes/_theme-1";
/* apply style changes using new bootstrap variables */
.portal-1 {
    @import "../vendors/bootstrap/stylesheets/bootstrap/buttons";
    @import "../vendors/bootstrap/stylesheets/bootstrap/alerts";
   /* customize styles here */
}

portal-2.scss

@import "themes/_theme-2";
/* apply style changes using new bootstrap variables */
.portal-2 {
    @import "../vendors/bootstrap/stylesheets/bootstrap/buttons";
    @import "../vendors/bootstrap/stylesheets/bootstrap/alerts";
   /* include custom styles from style.scss overrides */
}

Upon compilation, you will have styles.css, portal-1.css, and portal-2.css files. Include styles.css by default and the others in the head tag for theming.

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

Answer 5

Answer №3

After extensive searching for a simple solution, I stumbled upon a method that can save others the frustration of trying to achieve this:

CSS variables can be utilized to accomplish this task.

On the main bootstrap github page, there is a discussion regarding this issue Github Issue, where user @johanlef has shared a gist demonstrating his approach and the necessary code gist.

Simply ensure that the css variables are initialized on your page

.body.theme1{
   --primary: #5d8be5;
}

I have successfully implemented this method on one of my multi tenanted websites and it functions perfectly.

Answer 6

After extensive searching for a simple solution, I stumbled upon a method that can save others the frustration of trying to achieve this:

CSS variables can be utilized to accomplish this task.

On the main bootstrap github page, there is a discussion regarding this issue Github Issue, where user @johanlef has shared a gist demonstrating his approach and the necessary code gist.

Simply ensure that the css variables are initialized on your page

.body.theme1{
   --primary: #5d8be5;
}

I have successfully implemented this method on one of my multi tenanted websites and it functions perfectly.

How can I change the primary color in Bootstrap 4 based on the body class?

Answer №1

Answer №2

_variables.scss

styles.scss

themes/_theme-1.scss

themes/_theme-2.scss

portal-1.scss

portal-2.scss

Answer №3

Similar questions

Styling Text on Buttons (Using CSS)

What is the process for connecting a personalized bootstrap framework with an index.html document?

Is there a specific CSS selector that targets elements with "multiline" content?

Bootstrap 4: Concealed and Revealed Columns?

Creating a Dynamic Slideshow on Autopilot

The v-bind:style directive in Vue.js is functioning properly for setting the margin-right property, however

Having Difficulty Modifying the CSS Styles of a Specific Class

I have a simple inquiry regarding the customization of table designs

What factors determine the height of a table cell?

At the header of my webpage, there is a subtle grey border

Determine the present vertical measurement of the video

Use of carrots within a contenteditable div

Ways to create unique hover effects for images in a filter gallery

Issue with arranging blocks in a horizontal line in Opera

Tips for preserving the dimensions of a container even after adding text dynamically

Unable to view Bootstrap modal upon click

Adjust the text orientation using CSS within an SVG element

precise placement of image inside pop-up

dividing a circle in half with CSS using an image background

Grid Refresh Spinner Update