Feature Request: Dark Mode

[nh916]

Any chance we can get dark mode for the framework?

[ChildishGiant]

Would this be a css class given to the body or implemented in JS? How do you see this being implemented?

[nh916]

I think there needs to be a JS toggle/switch/button/ or something else that the user interacts with that switches the UI to dark theme. The switch should be easily customizable depending on different websites, so that way every website that is implementing the button/switch/toggle can have something that fits their website theme and doesn't look all the exact same. The html for it should also be syntactically valid for good SEO and accessibility.

I think the change to the dark mode needs to happen on the JS side. The thing to keep in mind with that is that the contrast must still be there in case the developer is using dark gray on white, if we just change the body to black then we no longer have any contrast so we have to also change the brights so they can continue to have good contrast.

Contrast is something that is very important to accessibility and people who have color blindness or just hard of seeing. If we can plan for good accessibility by color blind people here from the start that is all the better, that way our contrast and our accessibility is planned in from the beginning and materializecss gives us perfect UI, UX, accessibility, and as a result good SEO for everyone by just using it. You then have to try to mess it up for it to not go perfectly.

I think if we can also allow developers to override the default dark color to one that they like that would all the better so each website can make their dark mode a bit more custom, so some websites dark mode will be black, others dark navy, others dark gray, etc. I think that would make our framework very flexible and nice to work with but perfect as the default that developers can put something together quick and it just comes out perfectly from UI and UX and easy to add to websites.

[bugy]

Just a note:
I'm using materialize-css and I added such a possibility in my project, using css variables.
For it, I redefined materializecss scss color variables with css variables (see the second half of the file): https://github.com/bugy/script-server/blob/master/web-src/src/assets/css/color_variables.scss

This gives me the opportunity to change the variables in runtime (at least after the compilation).

I'm not sure if this is the best way to solve it, but analyzing all the alternatives I found this way is the clearest and modern. For the old browsers support (aka IE11), there is a polyfill available.

Unfortunately, this doesn't work with the current version of materializecss (not all scss variables are overridable), so I submitted a PR for it #85

[DanielRuf]

Do you want to champion / lead this as one of the big new features @bugy? That would be great. How can we move forward with the PR? How can the other org members help here?

[bugy]

Hi @DanielRuf sure, I can do it if you are fine with the suggested approach using css variables.
If it's ok, I can work on some prototype and submit a draft PR for it, so we can discuss it in more detail on a real example.

The main help which I would need there is your feedback :)

[DanielRuf]

@materializecss/members what do the others think?

Please upvote #77 (comment) if you think that the CSS variables approach is the way to go.

I think the variables approach is a good one. There are a few different ways to implement dark mode, and I'm not crazy about the 2 stylesheets idea (I think it can be a bit slow or cause a flash, from what I've seen). Also we probably need something more complex than just toggling the body class with Javascript.

Here is some good documentation on dark mode from CSS tricks if anyone is curious - https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#toggling-themes

[ChildishGiant]

That would fully drop support for IE though: https://caniuse.com/css-variables

[DanielRuf]

We can probably compile them to normal CSS (two static css files and one with CSS variables). Would this be an option?

Besides this, even Bootstrap 5 dropped IE11 support: https://getbootstrap.com/docs/5.0/getting-started/browsers-devices/

And there are polyfills for CSS variables:
https://stackoverflow.com/questions/46429937/ie11-does-a-polyfill-script-exist-for-css-variables
https://github.com/nuxodin/ie11CustomProperties
https://github.com/aaronbarker/css-variables-polyfill

[doughballs]

The startup theme kind of has this facility. A single body class - light theme, dark theme, should be enough without any flash. Every component would need looking at though, as it a a big task to get this working without throwing a load of !important flags in. Not a fan of css variables mainly because I don’t use them and I write in sass, which suits the current setup of being written in sass.

[bugy]

I suggested css variables over a body classes for 2 main reasons:

• it would be easier for users to overwrite default colors when needed, especially dynamically
• it shouldn't affect selectors priority for users, e.g. if user has .my-project.button style, we'll overwrite it by html.dark button

This might be not do important though

It sounds like either CSS approach could work if done right. I had set up a small project with separate stylesheets but I didn't use !important, just reused a dark-mode class over and over. Maybe not the best way to do it....

Either way I really like the idea of also using a media query to grab the user's settings. I think people would like a button to toggle but as dark mode gains more traction, more people will set their own defaults. It was called gimmicky by some people but as a night owl, I love dark mode.

[doughballs]

Fair point about selectors. Maybe we need to spin up some demos of how the variable method would work then. The IE support is not an issue for me. It’s dead in the water. I do still accomodate it, but a progressive enhancement like dark mode is fine to just ignore IE I think. Honestly, if anyone is using IE they’re probably won’t be flicking dark mode switches 😂