Today I learned to use a combination of CSS color-scheme: light dark;
and the light-dark()
CSS function to set web pages’ light and dark modes from Sara Joys article about it on CSS-Tricks, and began to use this method on my own websites, including my Cassette Beasts shrine and fanlisting collective, replacing the prefers-color-scheme
media query method I previously used.
Using light-dark()
instead of prefers-color-scheme
allows me to save multiple lines of code because I no longer have to duplicate some lines of code just to change the colour values for different modes.