Automatic Dark Mode CSS Media Query

After went to an all dark-mode interface, I received some feedback from users saying they preferred the “light mode” version. To accommodate this, I kept some elements in the header and footer as “dark mode” but have the body of the website automatically display in light or dark depending on how the user has configured their operating system’s preference.

I customized my default CSS to display this site in “light mode” and then surrounded my dark-mode-specific CSS with the following media query:

@media (prefers-color-scheme: dark) {
enter CSS code here

Boom, now everyone can be happy! This was a much easier fix than having to code a toggle switch. 🙂

Related Articles

Leave a Reply

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

Back to top button