No JavaScript Required: Adding Dark Mode to Your Website with CSS

ยท

1 min read

Dark mode has become an essential accessibility feature for websites, providing a visually comfortable experience for users in low-light environments. In this article, we will guide you on how to add dark mode to your website using CSS without the need for JavaScript. Follow these simple steps to make your website more accessible and user-friendly.

TLDR;

The article explains how to add dark mode to a website using CSS without the need for JavaScript. It suggests using the @media (prefers-color-scheme: dark){} property in CSS to implement dark mode. The article provides a few lines of code to help implement this feature.

To add dark mode to a website, we need the use of @media (prefers-color-scheme: dark){} property in CSS.

Here are a few lines of code to implement dark mode:

@media (prefers-color-scheme: dark) {
  body {
    filter: invert(100%);
    background-color: rgb(25, 25, 25) !important;
  }
  img,
  iframe /* for recaptcha or web embed */ {
    filter: invert(100%) !important;
  }
}

You have successfully added dark mode to your website, wasn't that so simple?

Note: In order to work dark mode on the website, you must enable dark mode on your device. You may refer to The Verge's article on enabling dark mode on your device.

I hope this article was helpful to you. Thanks for reading!

ย