How to Support Light and Dark Mode with CSS Variables
· 6 min read
A page can follow the light or dark setting of the visitor's computer without a line of JavaScript. Define each color once as a CSS variable, give the variables dark values inside a prefers-color-scheme media query, and use only the variables in the rest of your CSS. One more line, color-scheme, makes form fields and scroll bars follow too.
