@media (prefers-color-scheme: dark) {
* {filter:invert(1);}
}
The result won't be perfect (in fact, it'll probably look downright awful), but it gives you a great starting point to then pull out individual colours and rebuild the CSS how you want!
The @media (prefers-color-scheme:dark){ ... }
is all you need to automatically trigger dark mode styling on your site if the user has set their browser to dark mode.
This is how I created the new dark mode on my blog. Started with the filter:invert(1);
trick, picked out the colours manually in the inspector that worked, and slowly tweaked the rest. You can see the final result here: https://flipsphere.net/
Top comments (1)
Probably a
:not(img)
is a nice addition.