Update: Bootstrap 5.3 is in alpha and is starting to support Dark Mode. There are major bugs as of my last testing (for example in color interpolation), but, unless you need Dark Mode support this minute, it's probably better to either wait for Bootstrap 5.3 to get to production release, or, even better, go help it get there.
Bootstrap 4 and 5.2 do not support Dark Mode.
If you must have Dark Mode support while you wait on Bootstrap, you can get a long way by just setting your text and bg color to flip:
@media (prefers-color-scheme: dark) {
color: #fff;
background: #000;
}
Then test and tweak this; I suggest doing so in a special SASS file you plan to throw away when Bootstrap is ready.
Old Answer:
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.
test-nightfall.htmlandtest-nightshade.htmlhas a class switch for dark/light that you can modify to change thebg-*class instead. – Muttonv4.5and might switch tov5soon – Spice