Enable Dark mode in a website using CSS

In the latest iOS and Android versions now use can enable dark mode on their phones. To make sure your site is compatible with it just do this small change in your CSS:

@media (prefers-color-scheme: dark) {
body {
background-color: #444;
color: #e4e4e4;
}
a {
color: #e39777;
}
img {
filter: grayscale(30%);
}
}

 

This works in Firefox, Safari, and Chrome among other browsers.

Try it out and let me know if any issues.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.