DEV Community

Cover image for How to automatically add dark mode to your site in 3 lines
𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝
𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝

Posted on • Originally published at flipsphere.net

How to automatically add dark mode to your site in 3 lines

@media (prefers-color-scheme: dark) {
    * {filter:invert(1);}
}
Enter fullscreen mode Exit fullscreen mode

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/

Discussion (1)

Collapse
wdg profile image
Wesley De Groot

Probably a :not(img) is a nice addition.