How to detect color preference based on user settings?

Most computers and smart devices have the option to adjust system-wide colors. You can switch between light and dark modes using the operating system settings. Browsers too have the option to change site colors, fonts, font sizes, zoom, contrast levels, etc. for a very long time.

You can detect the preferred color scheme either by CSS or using JavaScript.

Detecting preferred color scheme using CSS

The prefers-color-scheme media feature reflects the user’s desire that the page uses a light or dark color theme. It accepts following values:

• no-preference - user has not set any preference
• light - user opted for light theme
• dark - user opted for dark theme

Detecting preferred color scheme using JavaScript

You can even get the preferred color scheme using JavaScript and take necessary action.

Browser support

As of June 2020, the prefers-color-scheme is supported mostly in popular browsers as we can see in the screenshot below - source: caniuse