Create new color scheme for dark-light mode in bootstrap sass

Question

I want to create dark mode for a web site which use bootstrap. I have to add new root class which includes all boostrap colors. Here is my colors.scss:

$primary:#065FC6;
$secondary:#263C5C;
$success:#49C96D;
$danger:#FD7972;
$warning:#FF965D;
$light:#F8F8F8;
$body-color: #263C5C;

$custom-colors: (
  "brd-default": $body-color
  );
  

I want create new class like this:

:root.dark{
    // override colors and classes for dark mode
    $primary:#012345;
    $secondary:#111111;
    $success:#222222;
}

So how can i copy and paste all bootstrap colors for new color scheme?

If i can add colors, i will change HTML class so my root(color scheme) will be:

in my styles.scss:

@import "./colors";// custom colors
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

Inspissate

@Zim i changed question. Would you look at please? – Grandfather

Answer 1

As explained here, there's no way to attach a class to :root. However, you don't need this to achieve what you want.

Simply make a dark class then you can add that as desired to the html or body tag.

Make all the needed theme color changes inside .dark{}, and then @import "bootstrap". When .dark doesn't exist on the body, the theme colors will return to Bootstrap defaults.

@import "functions";
@import "variables";
@import "mixins";


.dark {

    /* redefine theme colors for dark theme */
    $primary: #012345;
    $secondary: #111111;
    $success: #222222;
    $dark: #000;
    
    $theme-colors: (
        "primary": $primary,
        "secondary": $secondary,
        "success": $success,
        "danger": $danger,
        "info": $indigo,
        "dark": $dark,
        "light": $light,
    );

    /* redefine theme color variables */
    @each $color, $value in $theme-colors {
        --#{$variable-prefix}#{$color}: #{$value};
    }

    /* redefine theme color rgb vars (used for bg- colors) */
    $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
    @each $color, $value in $theme-colors-rgb {
        --#{$variable-prefix}#{$color}-rgb: #{$value};
    }

    $body-color: #eeeeee;
    $body-bg: #263C5C;
    
    --#{$variable-prefix}body-color: #{$body-color};
    --#{$variable-prefix}body-bg: #{$body-bg};
      
    @import "bootstrap";
}

Bootstrap 5 Dark Theme

Lightship

thanks, but i can't override ".bg-light" class. – Grandfather

I am unable to override this. I couldn't. – Grandfather

I updated the answer.. you need to reset $theme-colors-rgb with the new theme colors too – Lightship

The github.com/vinorodrigues/bootstrap-dark-5 proof of concept project shows how to achieve dark mode with Bootstrap using 6 different variants. The bootstrap-nightshade variation show how to achieve dark mode with a .dark class set. – Windward

Thanks @vino -- I'm aware of your dark mode stuff. you should post an answer OR a comment to the question. – Lightship

@Zim i am getting this error: "Syntax Error: SassError: ("primary": #012345, "secondary": #111111, "success": #222222, "dark": #000) isn't a valid CSS value." – Grandfather

is this plain css or scss? – Cytochrome

This works for me only if I put @import "bootstrap"; at the very end, outside of .dark{} – Tricycle

i dont understand why @import "bootstrap"`` is inside the . dark` class. Doesnt this contain the complete bootstrap css tree? – Leuko