Repository navigation
How to set dark theme #257
Description
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?
Activity
codeclash commentedon Aug 20, 2020
@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$whiteand$blackand then overriding a couple of other color variables (mostly defined in_variable_material.scssand_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 commentedon Sep 23, 2020
Try this, it's awesome
https://dev.to/dip15739/dark-mode-with-only-1-css-property-17fl
djibe commentedon Nov 9, 2020
Hi, this is a first step to Dark theme: https://djibe.github.io/material/docs/4.5/material/dark-theme/