CSS dark-mode on websites
I saw a nice lightning talk at the inovex office about new css features (back in the good old days without corona) - one of them was a new media query to detect light or dark mode preferences - and this is already pretty well supported
Long story short: i tested this on my website
@media (prefers-color-scheme: dark) {
/* swap colors */
}Or just with a small sass mixin
@mixin darkmode {
@media (prefers-color-scheme: dark) {
@content
}
}And if you want to know something about the preferences from javascript, this is also possible
if(window.matchMedia("(prefers-color-scheme: dark)").matches) {
// do some dark stuff
}
Bonus
light is also working :)
@media (prefers-color-scheme: light) {
/* yeah! light mode! */
}