Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark theme for Bootstrap v5 #31175

Closed
sysvert opened this issue Jun 25, 2020 · 11 comments · Fixed by #35857
Closed

Dark theme for Bootstrap v5 #31175

sysvert opened this issue Jun 25, 2020 · 11 comments · Fixed by #35857
Labels

Comments

@sysvert
Copy link

sysvert commented Jun 25, 2020

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 link

copy of #27514

@k96white
Copy link

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

@techboyg5
Copy link

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

@mdo
Copy link
Member

mdo commented Aug 17, 2020

Duplicate of #27514.

@mdo mdo closed this as completed Aug 17, 2020
@jeroenvanrensen
Copy link

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

@ghost
Copy link

ghost commented Dec 18, 2020

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

@sysvert
Copy link
Author

sysvert commented Dec 21, 2020

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

That looks amazing!

@fireplex
Copy link

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
Copy link
Contributor

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
Copy link
Contributor

iatek commented Aug 5, 2021

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
Copy link

@mdo mdo mentioned this issue Mar 10, 2022
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

10 participants