Thursday, November 4, 2021

Creating Light and Dark Themes for Websites The Right Way Using prefers-color-scheme

You’re likely already familiar with media queries. They’re in widespread use for making websites responsive. The width and height properties contain the viewport’s dimensions. We then use CSS to render different layouts at different dimensions.

The prefers-color-scheme media query works the same way. The user can configure their operating system to use a light or dark theme. prefers-color-scheme contains that value. The value is either light or dark, though the W3C spec states that it might support future values like sepia. We specify different values of CSS variables for both modes and let the user’s OS decide.



from DZone.com Feed https://ift.tt/3CLckeQ

No comments:

Post a Comment