Bootstrap 5 - White background in dark mode, Why?

Written by Lyoneel on in bootstrap
 1 min

Bootstrap 5 - White background in dark mode, Why?

Upgrading from boostrap v5.0.3alpha to v5.3.0 broke my background color

I was working on changes inside this site, I upgraded from bootstrap v5.0.3-alpha1 to v5.3.0. After the upgrade, the background becomes white, Why? IDK.

To allow easy upgrade between versions, I follow these rules:

  • I do not change anything from Bootstrap SASS source code.
  • Any customization ideally should be done via CSSVariables or overrides (CSS after bootstrap is loaded)

To give context, dark mode was implemented using:

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

Was working correctly before the update, I compared both versions; the difference I found in the HTML tag was:

&amp;ldquo;TBD&amp;rdquo;

If I uncheck color-scheme color went black as it was before, I didn’t find the way to manipulate that value. After many tries, I found a solution:

html {
    background: var(--bs-body-bg); 
}

I was very happy to make it work with CSS Variable, this will allow me to adapt quickly the colors if I set a different one later.


Thanks for reading!

Namaste.