DEV Community

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

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/

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (1)

Collapse
 
0xwdg profile image
Wesley de Groot β€’

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

Sentry image

See why 4M developers consider Sentry, β€œnot bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more