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.To make web more accessible, it makes sense to adjust site colors based on user preference.
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
Tip: To reduce the size of CSS, you can split the css files in three parts i.e. all.css, light.css and dark.css. Load light.css or dark.css conditionally based on user preference.
As of June 2020, the
prefers-color-scheme is supported mostly in popular browsers as we can see in the screenshot below - source: caniuse