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