As far as I know, there is no sign that Bootstrap 5 is officially supporting dark mode anytime soon.
My first suggestion is to add more ‘dark’ components to the existing 3 in BSS, but that will still limit the website to only one theme. If this is not the only feasible option, please read below.
If it’s possible for BSS devs to create just one component that converts everything added into it a hybrid (dark/light preferred), that would be excellent. This should not require a toggle switch (see Bootstrap 4 readme link at the end). Or a New Page option, maybe?
If both options are not feasible, perhaps a new premium(?) template inspired by the existing Grayscale could be considered. When creating a new page, instead of a blank black Body, maybe a cheatsheet like this one - Bootstrap 5 Dark - Cheatsheet
“Dark mode”, IMO, is a fad, and at least for now, being implemented not because it provides a better/more comfortable UX, but because it saves energy on mobile devices. Once the battery nut is cracked, dark mode will fade off into the sunset, like animated gifs and other “breakthroughs” in web development.
Think about it… would you rather read a book that had black pages, and white text, or white pages and black text? Which do your eyes find more pleasing, less tiring? We are evolved to function in the daylight, so in simple, biological terms, dark images on light backgrounds are more suited to our vision, than the opposite.
Of course, there will always be a place/use for both types of dark/light contrast. For example, current screen technology makes a dark website with white text somewhat easier to see in bright sunlight than the opposite. At the same time, a glass screen with a black website will produce more reflections of surrounding lighted objects, which can make it harder to view when you’re in a place with lots of surrounding lights (think Time’s Square at night, or an amusement park)
But the screen thing will eventually be solved as well.
At some point, perhaps not in my lifetime, I predict we won’t even look at devices, but rather the images will simply be projected on to our retinas with “smart” contact lenses, and probably decades after I’m dead, they’ll be generated directly in the visual cortex of our brains. You’ll simply “think” about what you want to know/see/learn and it will download into your brain (ala “The Matrix”.) Laugh if you want, but it’s coming. The fusion of biology and technology is inevitable.
Dark mode is purely visual and somewhat optional. It’s simply an added feature for accessibility but IMO it’s not quite like the color-blindness type of accessibility. It should not be noticeable for people who do not find a need for it nor do they have other softwares/apps also in dark mode.
Human habits also don’t easily change even with an improved screen technology. Some look for stuff before going to bed and after waking up. Having light-theme anything, be it Facebook or a shopping website flashbanging the face everyday is not a wonderful experience, even with the blue light filter turned on with the current screen technology.
The normalization of implanted chip will not be happening, if it does, until tens of years in the future, like you said. By then, Bootstrap could very well be replaced along with all the current standard of web layout. That is sadly out of this post’s and forum’s context .
Personally, I prefer reading my web novels with light coloured letters on a dark background, both during the day and night. It’s somehow easier on my eyes and the letters don’t blur out after staring at the screen for too long, unlike the light mode counterpart. Maybe like you said, it’s a fad. But to me it’s real.
While I understand your suggestion, I personally don’t think that changing the app for one single location (top title bar of app) is really a necessity. We hardly ever look at that bar once we start working on something, everything below it is what is needed. It’s not intrusive, and I truly think the dev’s time spent would be best on something truly affecting the use of the app.
Now they might find it’s something easy to do and do it anyways then, kudos to them if they do.
I personally like reading white text on dark background as well, I find it much easier on the eyes most of the time too. That said that’s pretty much how the app is already set up so I’m ok with it as it is.
Yea if that’s simple to do that would be nice but I think you’re mistaking this post as my other one - Darken the top bar
This post is more about you and me developing websites that have light and dark modes coexisting, but without the official Bootstrap support. The aim is to make the process easy to perform with BSS. At the very least I’m hoping for more BSS components that are already on dark mode so we can just drag and drop them without tinkering with CSS, if we ever want to play around with a dark mode / dual mode website.
Ahh I see, and yes you’re right I did get this one mixed up with the top bar post, sorry bout that.
It’s not hard to do this with the settings in BSS for most things, but yeah, I think there’s quite a few components that may not play nice with the setup and have to make us mess with the CSS. I too would like to see an easier way to do this, with or without Bootstrap.
I’m sure there’s probably more to this than I know about for changing things to dark mode, but I’ve only played around with a handful of those settings since so far most of my clients want colorful or just white and gray. Go figure lol.
Yes that could just be how the last couple updates of Windows OS and your browser connect between themselves with the prefers-color-scheme media query, or something of similar effect. I was already using that feature when I posted this topic.
But regarding your example, that only appears to work after you published / exported your design. Try using BSS’ Preview in browser option, or even in BSS itself.
The aim of this post is to have BSS’ own support of dark mode, so we can actually see the effect while we are developing our website.
Okay so are we agreeing on my 3 suggestions and you’re just adding one more to bring to the devs’ attention? Or is the adding CSS file method supposed to solve my issues (idea)? If it’s the former, can you tell me where I can get that Light Dark / Dark Light CSS file? Thank you.
Create a new design and choose your new Bootstrap Dark theme from the settings and you are ready to go.
That will solve your issues and nothing for the devs to look into
I’ll still have to emphasize again though, that this post’s aim is to make the usage of BSS achieve the dark mode effect easy/easier - in other words its own version of support for dark mode. How the BSS devs want to do it, or if they even want to look for ways to do it, is up to them. It is not an issue per se that I’m having. Even if I can’t build a dark website via BSS right now it’s not something I need to bother the devs about. Like the forum tag says, it’s an Idea (in this case I brought forward 3 ideas).
Since the CSS file works with the current templates, that is really good as a start and I thank you again for pointing it out. But that still doesn’t take away from my ideas making the job easier for us. I believe that’s one of the core reasons we all bought the app in the first place.
.