58

I use Bootstrap 4.5 and use bg-dark in my HTML template. I would like to implement a "light/dark" switch.

So, Bootstrap has a bg-light css class, but I am not sure what the current approach how to use it. Let me clarify my confusion:

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

  2. If I want to slightly modify the colors of bg-light and bg-dark, is "Theming" the right approach? I can't find any examples to override these variables (via SASS), except of manually overwrite them in my CSS like .bg-dark { ... }

Thank you very much!

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Daniel Stephens
  • 2,371
  • 8
  • 34
  • 86
  • 8
    Have a look at https://github.com/vinorodrigues/bootstrap-dark. Example `test-nightfall.html` and `test-nightshade.html` has a class switch for dark/light that you can modify to change the `bg-*` class instead. –  Jul 25 '20 at 12:41
  • Thanks vino, I found this but didn't know if this was the right way to go for me. I was wondering if that limits me to use this specific bootstrap version since I use `v4.5` and might switch to `v5` soon – Daniel Stephens Jul 25 '20 at 13:14
  • 2
    I'd +1000 vino's work here if that was an option. By far, the most comprehensive treatment on the subject, and the 'option 4' stuff is, quite frankly, awesome. – Allan Bazinet Aug 03 '20 at 00:59
  • For Bootstrap 5 a comprehensive guide is here: https://github.com/vinorodrigues/bootstrap-dark-5 – Erik Kalkoken May 27 '21 at 18:52
  • Bootstrap now supports a dark theme! – Someone Aug 14 '23 at 18:33

6 Answers6

52

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Hopping for official support in 5.3.0: https://github.com/twbs/bootstrap/pull/35857 – NiKiZe Apr 24 '22 at 18:33
  • It is worth mentioning that the CSS classes that automatically correspond to the selected color mode are `bg-body`, `bg-body-secondary` and `bg-body-tertiary`. – wscourge May 24 '23 at 03:31
23

Bootstrap 4 and 5 do not support Dark Mode. Maybe they will in Bootstrap 6.

Dark Mode is a confusing name in this context because Bootstrap does support a color, $dark: $gray-900, and, it does support several dark-tinted classes, like .bg-dark. But none of these are actual Dark Mode, which is OS-driven, passed-to-browser, website rendering switching based on:

@media (prefers-color-scheme: dark) {

Worse, things like bg-dark imply you would switch to Dark Mode by going around swapping class names out, probably via Javascript. That's a lot of CPU usage to perform a browser built-in, all because the Bootstrap authors ignored an important feature of the Web. Don't do this!

All of this is detailed in a much longer way here.

That will leave you with a lot of options, but in short for Bootstrap 4 and 5 the best, simplest, least-effort way to handle proper prefers-color-scheme: dark is to introduce an indirection into Bootstrap colors by reassigning the Bootstrap color SASS variables you're using to color CSS variables, in your _variables.scss. CSS Variables have been supported for years, are perfect for Dark Mode, and largely overlooked. For example:

:root {
    --body-bg: #fff;
    --body-color: #000;
}

$white: var(--body-bg);
$black: var(--body-color);
$body-color: var(--body-color);

So far all you've done is create indirection - $white still renders as #fff just like in the default Bootstrap. But now you can flip it when the OS flips:

@media (prefers-color-scheme: dark) {
    --body-bg: #000;
    --body-color: #fff;
}

Now when the OS gets set to Dark Mode, the browser sees it and flips that media query, and your CSS variables flip. Since you've spread those variables into the compiled Bootstrap SASS via your _variables overrides, you'll see the result in rendered Bootstrap.

I did say simplest and least-effort, but you've probably noticed this is still going to be a lot of work. Bootstrap 4 and 5 just completely missed the boat on this, so, the legwork is on you. You'll need to override every color in Bootstrap you use and introduce CSS variables for them, and you'll then need to test to find colors that aren't keyed off of any variables, and go override those with a follow-up global stylesheet.

Chris Moschini
  • 36,764
  • 19
  • 160
  • 190
  • One clarification, since this post was written: Bootstrap 5 does now support dark mode. Support exists in the v5.3 alpha as mentioned in another answer. https://getbootstrap.com/docs/5.3/customize/color-modes/ – Taylor D. Edmiston Mar 29 '23 at 01:52
14

Bootstrap 5.3.0

Bootstrap now supports color modes, or themes, as of v5.3.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template.

Starting from v5.3 (currently in alpha), color modes are supported! Now you can add data-bs-theme attributes to change the theme (light/dark) of elements. Applying this to the html element will result in the entire page matching the style. You can learn more about that on the documentation page.

But if you want to change the theme based on the user's preferences (aka prefers-color-scheme), you need to toggle the theme attribute using javascript.

Here's a working example:

// Set theme to the user's preferred color scheme
function updateTheme() {
  const colorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ?
    "dark" :
    "light";
  document.querySelector("html").setAttribute("data-bs-theme", colorMode);
}

// Set theme on load
updateTheme()

// Update theme when the preferred scheme changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
<html>

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="p-3">
    <h1>Dark Mode for Bootstrap</h1>
    <p>from Bootstrap v5.3.0, dark color modes are supported.</p>
  </div>
</body>

</html>
Jongwoo Lee
  • 774
  • 7
  • 20
  • I like this method. I tried it and was not able to be the paragraphs to switch colors. Have you had similar experiences? My [question is here.](https://stackoverflow.com/q/75586525/5091720) – Shane S Feb 28 '23 at 05:40
2
/* Enable darkmode in a Bootstrap Page */
@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--bs-dark);
        color: var(--bs-light);
    }
}
DEV Tiago França
  • 1,271
  • 9
  • 9
0

Check this: https://getbootstrap.com/docs/4.5/getting-started/theming

"Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes."

Once you want apply the changes by Sass this looks like be the right path

And by their documentation the variables for change this is on "scss/_variables.scss" file

Here is another topic with some additional info how to achieve this: Customizing Bootstrap CSS template

Guilherme Mascarenhas
  • 63
  • 1
  • 1
  • 8
0

Bootstrap now supports color modes, starting with dark mode. On version 5.3.0 you can implement your own color mode toggler and apply the different color modes as you see fit. They support a light mode (default) and now dark mode preset theme. Color modes can be toggled globally on the element, or on specific components and elements, thanks to the data-bs-theme attribute. https://getbootstrap.com/docs/5.3/customize/color-modes/

data-bs-theme="light"
data-bs-theme="dark"
data-bs-theme="auto"
Maycow Carrara
  • 1
  • 2