color:light-dark(blue,lightblue) is now available in all modern browsers - switch text/background/etc. colors automatically depending on whether the user's device is in light mode or dark mode
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:
<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.