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

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:

Am I supposed to replace all occurrences of bg-dark with bg-light once the "switch" is turned on?
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!

Solution

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