[Feature] Dark mode support

[jloh]

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!

[jgthms]

First time I hear of this media feature. Interesting.

[jloh]

Its pretty cool! Here is an example implementation https://kevinchen.co/blog/support-macos-mojave-dark-mode-on-websites/

[loicpirez]

Any updates about this ? 😄

[iqbalaqaba]

Will contribute if someone made this

[hubbyist]

It seems to need javascript support so will not be suitable for bulma until it gets usable without javascript.

[glenndevenish]

@hubbyist Are you sure it needs JS support?

[jloh]

@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.

[hubbyist]

current situation is as follows. https://caniuse.com/#search=prefers-color-scheme

[hubbyist]

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.

[kasperkamperman]

I think a good resource with already some nice dark themes for Bulma is: https://jenil.github.io/bulmaswatch/

[jloh]

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.

[AdamasFR]

Little Update on this issue : Firefox just shipped the support for prefers-color-scheme in Firefox 67 https://caniuse.com/#search=prefers-color-scheme

[jloh]

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

[nielspeen]

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.

[dannluciano]

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 ?

[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

[dannluciano]

@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?

[Grovkillen]

See my take on it here: #1837

[pioz]

Any update on this?

[Dorson]

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 !

[jgthms]

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

[wangchucheng]

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.

[pertsev]

@jgthms Any updates? Many people wait for this feature. 🙏

[guanzo]

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 😩

[webdev23]

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.

[Dorson]

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.

[payne911]

What is the official stance on whether or not this will eventually be looked into?

It's entirely fine if the Bulma team decides they don't want to support a dark-theme, but it'd be great to communicate it, if that's the case.

There are so many different (incomplete?) approaches presented in this issue, I'm entirely lost.

[meherhowji]

In 2 months' time, this feature request will be 3 4 years old. 🤣 🤣

[payne911]

Maybe for additional context, I may add that this feature is:

• (by far) the most upvoted [quicklink] (and that remains true even if you include closed issues)
• the most commented [quicklink]

[dtrckd]

Hi here,

As I don't see it (directly) mentioned in this issue, I'd like to mention that bulvar kind of wrap bulma with css variables which allows a Bulma dark mode. It really helped me out implementing a dark mode for fractale.

[meherhowji]

I ended up adding a package NextThemes (I use NextJS) that helps with the local storage persistence of the user theme pref and does the prefers-color-scheme bit. In a nutshell, I am doing this in the CSS part.

:root {
  --background: #fafafa;
}

[data-theme='dark'] {
  --background: #14142d;
}

$body-background-color: var(--background);

However, I totally agree with everyone here that it needs to be part of the CSS framework. Themes and modes are totally essential these days. I was reading @jgthms comment on the original PR from @jloh and Jeremy mentions that "most websites won’t or don’t need a dark theme" and "it should exist as an extension".

If this thought still resonates then I think it is better we close this Issue and indicate the resolution, rather than misleading the users.

[extrawitz]

Hmm, still no update on that? As it is solo CSS and everything is almost given in bulma by design, I can't get it :-/

[mohamed--abdel-maksoud]

Yet another try to have dark mode (and more choices for colors directly on CDN):

https://htmlpreview.github.io/?https://github.com/codomatech/bulma50shades/blob/main/demo/index.html

The main repo is here
https://github.com/codomatech/bulma50shades

Feedback is welcome of course!

[392781]

@jgthms can we get a status update on this? It's been 4 years now, what's missing and how can people help to get this across the finish line?

[t1]

To me, it looks like the only option acceptable to all would be to build 3 distributions of Bulma:

1. light: the default with the current colors
2. dark: a theme with dark colors
3. auto: contains light as well as dark, automatically toggled with prefers-color-scheme

Advantages:

• It would not break anything, as the default stays as it is. No surprises!
• It would allow pages to go completely to dark mode.
• It would allow pages to toggle between dark and light via JS.
• It would allow pages to opt in on the system setting, which will probably become the most common approach in the future.

[wayjake]

Would like to follow this!

[shriharip]

Looking forward to something here.

[coderabsolute]

Bulma is many people's favorite! The dark mode is becoming more popular nowadays.

I wonder what is the to implement the dark mode support? This issue was opened almost 4 years back.

[suterma]

There are many dark bulma variants out there, I especially like the bulma-swatch themes by Jenil Gogari.

Then you could do, if you have a light theme by default, and a dark variant by user preference, for example:

// in your existing .css file
@import "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css";
@import url("https://jenil.github.io/bulmaswatch/darkly/bulmaswatch.min.css") (prefers-color-scheme: dark);

[coderabsolute]

We cannot import the bulmawatch, the project is heavily customized and messes up everything. The ideal scenario is to use the dark theme from the sass variables.

[t1]

With 174 open PRs (the 212 open issues don't really count, actually), Bulma seems to not be very active anymore 😢

[shriharip]

With 174 open PRs (the 212 open issues don't really count, actually), Bulma seems to not be very active anymore 😢

I agree. It is sad, however. I think there is still a huge need that bulma tries to provide. A css only framework, not a utility and super good defaults. :(

[wayjake]

lfg

[dhritzkiv]

!!!

[payne911]

Yay! :)

https://bulma.io/documentation/features/dark-mode/

[dannluciano]

Thanks @jgthms