Automatic Dark Mode CSS Media Query

After went to an all dark-mode interface, I had some feedback from users saying that 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 his or her 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 *

Check Also
Back to top button