CSS ROOT styling color schemes

How to Cater to People's Color Preferences>

The prefers-color-scheme media feature can be queried to serve up your user’s color scheme of choice. The light option is the go-to version if no active preference is set, and it has decent support across modern browsers.

Additionally, users reading on certain devices can also set light and dark color themes based on a schedule. For example, my phone uses light colors throughout its UI during the daytime, and dark colors at night. You can make your website follow suit.

Avoid repeating a lot of CSS by setting custom properties for your color themes on your :root pseudo-class. Create a version for each theme you wish to support. Here’s a quick example you can build on:

:root { color-scheme: light dark; } @media (prefers-color-scheme: light) { :root { --text-primary: #24292e; --background: white; --shadow: rgba(0, 0, 0, 0.15) 0px 2px 5px 0px; } } @media (prefers-color-scheme: dark) { :root { --text-primary: white; --background: #24292e; --shadow: rgba(0, 0, 0, 0.35) 0px 2px 5px 0px; } }