It basically allows you to specify to different colors - one for if the user’s device is in light mode, and the other if they’re in dark mode. Here’s an example gen showing how to use it:
https://perchance.org/css-light-dark-test#edit
<style>
html { color-scheme: light dark; } /* this line is important! otherwise the code below won't work */
body {
background: light-dark(lightgrey, black);
}
</style>
<p style=" color:light-dark(blue,lime); ">this text will be blue in light mode and lime in dark mode</p>
Note that this is a very new browser feature, and a lot of people are on older browser versions, so for at least the next few months you should probably still add a default color before your light-dark color like color:blue; color:light-dark(blue,lime);
. That way the older browsers will still get the right colors, but in the newer browsers the light-dark color will override the default color.
You must log in or register to comment.