After RK.md 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. 🙂

Write A Comment