Detecting The User's Color Scheme Preference With CSS If you’re a developer, chances are that you use dark mode on your machine and code editor. If not, what are you waiting for? Join the dark side! Jokes apart, it is common nowadays to allow users to select a different theme when visiting a website. Now you can do this with CSS only, not the theme selection itself, for that you still need JS but with CSS you can now detect the user’s machine color scheme (light or dark) and display the correct colors on your website immediately. To do this we need to use the CSS variables. According to the website Can I use , the “CSS variables” feature is available on 95% of the currently used browsers around the world. We also need to use the prefers-color-scheme media query, which according to Can I use is supported by about 90% of the currently used browsers. In this article, I will show you how to use the CSS variables and the prefers-color-scheme to setup the default colors of the web