Dark theme for Bootstrap v5

[sysvert]

Nowadays, dark theme is very important and is beneficial to your vision (quoted from rxoptical.com)

Dark mode can reduce eye strain in low-light conditions. 100% contrast (white on a black background) can be harder to read and cause more eye strain. It can be harder to read long chunks of text with a light-on-dark theme

So I was thinking, why not have an option for dark theme? I know this is possible already with just changing the variables file or using Bootswatch, but other frameworks support an actual dark theme option. It could be as easy as adding darktheme="true" to the tag, etc. I would love to see this supported in Bootstrap 5.

[isteiger]

copy of #27514

[k96white]

yeah, pretty nice feature it would be, also a button class along with it for toggling will be nice.

[techboyg5]

You can already use bg-dark + text-light BTW

[mdo]

Duplicate of #27514.

[jeroenvanrensen]

It would be nice if you just can add the dark-mode class on the body tag.

[ghost]

I was tinkering with this if anyone's interested...
https://github.com/xcartmods/bootstrap-5-dark-mode

[sysvert]

I was tinkering with this if anyone's interested...
https://github.com/xcartmods/bootstrap-5-dark-mode

That looks amazing!

[fireplex]

I was tinkering with this if anyone's interested...
https://github.com/xcartmods/bootstrap-5-dark-mode

Super helpful bit of code there, thanks!

[vinorodrigues]

Dark mode is not easy ... I discussed (and POC'ed) this at length back in May 2020 in my quasi-white-paper The Definitive Guide to Dark Mode and Bootstrap 4 (Also on GitHub.) And subsequently also churned the Bootstrap 5β1 variant (Also on GitHub.)

There are huge contentions around how to make "dark mode" available. For example:

• Toggle button (with all it's JS, persistence issues and the FOUC that goes with it)
• vs. leverage a pure prefers-color-scheme implementation.

and

• does each UI concept have it's own @media (prefers-... line, thus creating a larger-than-needs-to-be CSS (like prefers-reduced-motion does in 5β1)
• vs. inject all the @media (prefers-... at the end of the CSS, thus forcing the coders to maintain two sets of SCSS, leading to maintenance nightmares

My gut tells me most want the toggle button over the pure OS-does-the-choice - because they've seen some other site that does that and want the same... even though prefers-color-scheme was built to follow the OS preference. (You don't see toggle buttons for prefers-contrast, prefers-reduced-motion & prefers-reduced-transparency -- but I'm stirring the pot here, and it's an opinion, not necessarily a fact.)

I guess it comes down to time ... both to decide on how to do this and then churn the code, then test it.

[iatek]

Implementing dark mode would be easier if Bootstrap was less "light mode" in the first place. For example card, pagination, popover, modal body -bg all default to $white. It would be cool to have a variable like $component-bg for all of them as a default. Then we wouldn't need to reset all the $white stuff like here: https://codeply.com/p/hIBpkZNA2U

[HosMercury]

https://github.com/xcartmods/bootstrap-5-dark-mode

404