How to properly introduce a light/dark mode in Bootstrap?

by

Bootstrap 5.3.0-alpha (update 2023)

Bootstrap has introduced a dark mode, and the ability to create other color-modes. However, this feature is currently limited to a few variables, and it’s not possible to customize the dark theme colors. For the dark mode switch, simply add the data-bs-theme attribute to the doc’s html tag:

<html data-bs-theme="dark">

Using a little JavaScript you could create a light/dark theme switch:

Bootstrap 5.3 Dark Mode Toggle

document.getElementById('btnSwitch').addEventListener('click',()=>{
    if (document.documentElement.getAttribute('data-bs-theme') == 'dark') {
        document.documentElement.setAttribute('data-bs-theme','light')
    }
    else {
        document.documentElement.setAttribute('data-bs-theme','dark')
    }
})

Bootstrap 5 (update 2021)

Although there is still no definitive support for light/dark mode in Bootstrap 5, SASS can be used to create a dark theme

Bootstrap 4 (original answer)

Here are some answers to your question on Bootstrap light or dark mode:

“Am I supposed to replace all occurrences of bg-dark with bg-light
once the “switch” is turned on?”

Yes, but you’d probably also want to switch all -light and -dark classes such as text-dark, navbar-dark, btn-dark, etc..

If I want to slightly modify the colors of bg-light and bg-dark.. I
can’t find any examples to override these variables (via SASS), except
of manually overwrite them in my CSS like .bg-dark…

These are derived from $light and $dark SASS variables so you can change them like this…

$light: #dddddd;
$dark: #011100;

@import "bootstrap";

Demo Bootstrap Light Dark Mode Switch

Also see:
Customizing Bootstrap CSS template
How to extend/modify (customize) Bootstrap with SASS
Create new color scheme for dark-light mode in bootstrap sass

More Related Contents:

  1. Customize Bootstrap 4’s grid-system Breakpoints
  2. how to change bootstrap version 4 button color
  3. What’s the difference between SCSS and Sass?
  4. Import regular CSS file in SCSS file?
  5. Order columns through Bootstrap4
  6. Center an element in Bootstrap Navbar
  7. Bootstrap Center Vertical and Horizontal Alignment
  8. How to create color shades using CSS variables similar to darken() of Sass?
  9. Angular-cli from css to scss
  10. Sass Invalid CSS Error: “expected expression”
  11. Dynamic Sass Variables
  12. Ampersand (&) at the end, and part of, a selector in SASS
  13. What is class=”mb-0″ in Bootstrap 4?
  14. Bootstrap 4 – Navbar items outside the collapse
  15. Have a variable in images path in Sass?
  16. Next.js Global CSS cannot be imported from files other than your Custom
  17. Bootstrap change order of columns
  18. SASS indented syntax on multiple lines?
  19. Offsetting columns is not working (Bootstrap v4.0.0-beta)
  20. Placeholder Mixin SCSS/CSS
  21. How can I change the order of Bootstrap columns?
  22. Centering the image in Bootstrap
  23. Bootstrap 4 custom build generator / download [duplicate]
  24. Why put in front of the file name “_” or “_” in scss/css?
  25. How to control number of items per row using media queries in Flexbox?
  26. Text Stroke (-webkit-text-stroke) css Problem
  27. SASS for loop updating hsla lightness returns error $lightness: “96.77419” is not a number for `hsla’
  28. How do I make card-columns order horizontally?
  29. how to watch changes in whole directory/folder containing many sass files
  30. SASS CSS: Target Parent Class from Child

Leave a Comment