bulma
bulma copied to clipboard
jgthms
[Feature] Dark mode support
It'd be awesome if Bulma supported the @media (prefers-color-scheme: dark) media-query out of the box!
I'm aware this would require two whole colour pallet/themes so understand if this is more suited for a theme/port of Bulma!
Its pretty cool! Here is an example implementation https://kevinchen.co/blog/support-macos-mojave-dark-mode-on-websites/
It seems to need javascript support so will not be suitable for bulma until it gets usable without javascript.
@hubbyist this uses CSS media-query's so no JS required. Not all browsers support it quite yet but Safari and Chrome have support in their beta channels.
current situation is as follows. https://caniuse.com/#search=prefers-color-scheme
But a dark variant of bulma with be variables bound color scheme support may be better. It can be transformed to use prefers-color-scheme later when browser support is more common.
I think a good resource with already some nice dark themes for Bulma is: https://jenil.github.io/bulmaswatch/
I've started a PR over on #2425 however thinking about it more perhaps this is better suited as an extension to Bulma? As I'm currently doing it it forces it upon anyone who uses Bulma with users that ask for dark mode.
Little Update on this issue : Firefox just shipped the support for prefers-color-scheme in Firefox 67 https://caniuse.com/#search=prefers-color-scheme
I ended up creating an extension for Bulma as the discussion in #2425 concluded that having it as part of base Bulma could be confusing. I need to update it for the latest version but it works! https://github.com/jloh/bulma-prefers-dark
Perhaps this technique is an option: https://medium.com/@katiemctigue/how-to-create-a-dark-mode-in-sass-609f131a3995
If I understand it correctly Bulma could ship with a light theme only, eliminating the objections in this thread, while offering the flexibility to easily add a dark-mode or other additional themes for those who want it.
With the release 0.8.0 I try implement a ligth-dark-mode button toggle.
But add CSS class dark on all elements is not cool.
I think that with CSS variables feature is much more easy.
I made a little sample https://jsfiddle.net/vrbq1gf3/1/
What you think @jgthms ?
Yeah CSS variables is the way. But it's not easy to add CSS variables to Bulma while maintaining backwards compatibility with all current Bulma setups. I'm currently working on it but it's harder than it sounds. See #1837
@jgthms What you think about this path?
.is-primary{
color: x
}
html[dark] .is-primary{
color: y
}
Is it complicated to generate this CSS with SASS?
Did code a working solution for the Dark Mode.
Try demo in here: https://dorson.github.io/CSS-Dark-Mode-and-color-switch/
Works with basic CSS variables + short JavaScript.
Can be used inside existing CSS style file. Can be used to define multiple color themes in one CSS file. No user logins or profiles required.
Will save our eyesight at night :-)
Have fun using my code !
I've been working on an advanced CSS Variables for Bulma. It's not the simplest option but it's the most flexible one. See: https://twitter.com/jgthms/status/1248169933843898370
I've been working on an advanced CSS Variables for Bulma. It's not the simplest option but it's the most flexible one. See: https://twitter.com/jgthms/status/1248169933843898370
@jgthms Hope to use this amazing feature in the further release. 😆 Quite need this feature.
Can't wait for this. I've been "maintaining" my own dark theme and it's becoming unmaintainable, cuz i've no idea how to properly implement and maintain 2 different themes 😩
This is definetly possible using pure css only, as shown here https://codepen.io/oahehc/pen/OJPjZXB but it require some deep rework to be implemented nicely.
This is definitely possible using pure CCS only, as shown here https://codepen.io/oahehc/pen/OJPjZXB but it require some deep rework to be implemented nicely.
OK, if the pages do not reload and there are no links between visits.
Otherwise the CSS rule for prefers-color-scheme :dark might be more OK as a static option with almost dark or dark grey colors.
CSS really needs rules for the night time, but they do not exist.
Hi everyone,
I've updated to 0.9 and I'm still struggling to understand how to have the dark theme activate when on a Dark OS. Do you have any reading or tips for me to set this up? thanks
Hey @jgthms, firstly, thank you for maintaining such a great library, it's really fantastic. I also wanted to ask if you can give any status update on this highly desirable feature?
After reading the discussion I don't understand what the status is. The only objection I can find is on the PR indicating that it might be confusing if a developers customizes the light colors without realising they also need to customizes the dark colors. I personally would not consider this a dealbreaker.
All major browsers have supported the media query for over a year.
Is this functionality welcome in bulma or not? Will a PR be merged or is this not in line with bulma's scope?
If one were to implement something, any tips on how to go about that - what are the architectural guidelines here?
At the moment I guess we could use this extension I found in the Internet: https://github.com/jloh/bulma-prefers-dark
Just stumbled across this I think there isn't a dark mode since bulma isn't a material based design so you can use whatever you want
There's a bunch of themes here some of which are dark https://jenil.github.io/bulmaswatch/
@grbd That resource has already been posted in this thread: https://github.com/jgthms/bulma/issues/2342#issuecomment-473949001
This issue is about adding support for the media query @media (prefers-color-scheme: dark) in order to allow a site to have a dark theme and a light theme at the same time.
I added @media (prefers-color-scheme: dark) for fun inside bulma v0.9.2 to see how it is going ...
It is really nice to have a solution that turns the website into dark mode without a front-end toggle switch nor JS. But I see the point that you need to "maintain/consider" two themes at once. Especially, when working with variables and the inverted color the result can be pretty odd.
Check out the repo at https://github.com/Manuel-Steinberg/bulma/tree/dark-mode.
What do you think?
P.S. within the root directory you can find a demo with the Admin (Light) Bulma template or check my codepen (https://codepen.io/Manuel-Steinberg/full/QWvGpNN)
P.S. within the root directory you can find a demo with the Admin (Light) Bulma template.
Have you considered providing the demo as a deployed GitHub Pages so it's easier to check out?
Have you considered providing the demo as a deployed GitHub Pages so it's easier to check out?
TBH, No 🙄😀 But, here is a link to codepen: https://codepen.io/Manuel-Steinberg/full/QWvGpNN
I’ve been implementing it like this
@charset "utf-8";
@import "~bulma/bulma.sass";
@media (prefers-color-scheme: dark) {
@import "./styles/dark-styles.scss";
}
Where I override the base styles in the dark styles file, is this method the wrong way to go about it? https://github.com/weirdyang/movie-therapy-angular/blob/main/src/styles/dark-styles.scss
Does anyone have an example of dark mode toggle with just HTML/CSS/Js?
Do you mean a button? I implemented dark mode with Bulma on https://heicdrop.kasperkamperman.com/ but you can just toggle in your OS.
Does anyone have an example of dark mode toggle with just HTML/CSS/Js?
The easiest way is a button, which sets a global class on body. You can then load the dark styles if the class is set on body, or if the user has preference for dark mode.
