How to implement dark mode?

[ghopretz]

How to implement dark mode?
I want to implement auto dark or light mode based on browser or Windows theme.

[Kingside88]

If you don't found anythink in the documentation, then its not implemented.

[ghopretz]

I hope it can be implemented in the next version

[doughballs]

@ghopretz you could create your own dark mode fairly easily - just append a .dark class to the body and then write a bunch of new rules that apply when the class name is present. Use a toggle switch to add or remove the classname.

[ghopretz]

@ghopretz you could create your own dark mode fairly easily - just append a .dark class to the body and then write a bunch of new rules that apply when the class name is present. Use a toggle switch to add or remove the classname.

can you give me an example

[doughballs]

Sure. Let me put a simple example together:

https://codepen.io/doughballs/pen/ExVLarL

This could be expanded to include all components but you get the idea.

[eliannelavoie]

In _variables.scss, default values for all the variables used in the project are defined.

You can create your own .scss file that redefines the necessary variables to create a dark mode.

[godalming123]

Sure. Let me put a simple example together:

https://codepen.io/doughballs/pen/ExVLarL

This could be expanded to include all components but you get the idea.

Really! what about if you want to add a sidebar. thats still white or you want your card to be grey when it is it brakes on light mode or dark mode depending on what lightnes you set EG: class="lightness-4" for light mode that then brakes in dark mode. OK short rant other this may be useful for small prokects where say you just want to display a basic ui to interact with an api EG: here but I think for big projects this could quikly get clumsy and I would opt for a more varsitile solution.

[DanielRuf]

See materializecss#77 and especially the PR at materializecss#113