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


Please enter your comment!
Please enter your name here

Try EchoTools - my free, iOS ultrasonography reference application!

Latest Articles