DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for How to automatically add dark mode to your site in 3 lines

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/

Top comments (1)

Collapse
 
0xwdg profile image
Wesley de Groot

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

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.