How to set dark theme

[codeclash]

I'd like to use a dark theme (eg. dark body background, light text colors) and I assume there's some simple way to define this in a custom sass, but I can't figure out how.

I was able to override variables, eg. override $body-bg in my custom.scss (also modifying package.json and docs.scss to use/import my custom.scss so I could also see the rebuilt docs reflect my color changes, but of course this is just cherry-picking $body-bg...

Am I wrong assuming there is an easy way to swich from light to dark easily?

[codeclash]

@codeclash

For the record: After doing a bit trial, it seems there's no real "one-liner" for that.

I wen't down the path of just overriding and swapping (in my custom.scss) the color definitions for $white and $black and then overriding a couple of other color variables (mostly defined in _variable_material.scss and _colors.scss) aswell (eg. for borders, shadows etc.) and fixing some color transparency values to adjust for the different contrast.

Not too much of a hassle honestly.

[djibe]

Try this, it's awesome

https://dev.to/dip15739/dark-mode-with-only-1-css-property-17fl

[djibe]

Hi, this is a first step to Dark theme: https://djibe.github.io/material/docs/4.5/material/dark-theme/