Using the light-dark() CSS function
State of the Browser conference took place yesterday. Whilst I was unfortunately wasn't able to attend in person, I still watched on the live stream. All of the speakers were brilliant, with engaging, thoughtful and informative talks. One in particular came at a good time for me. Niya Dobazova (who you could not tell was relatively new to public speaking) gave a talk on using the CSS light-dark() function.
I've recently being making some UI tweaks to this site, including some little brand tweaks provided by the brilliant Angela Bradley. One thing that I wanted to add was colours that would update based on the users OS light/dark/auto theme preferences.
In the past I've had a toggle on this site for it. This used a toggle button and some JavaScript to detect the OS preference, set the theme, and then users could toggle this if they wished. Whilst I was very happy with the solution and interaction of the button, you don't need JavaScript to do this though.
Implementation
Firstly, support for the function must be added. This is typically done on the :root. The light-dark() color function then requires two comma separated values; the color when the theme is light and then color when it's dark.
:root {
color-scheme: light dark;
}
body {
background-color: light-dark(#fff, #000);
color: light-dark(#000, #fff);
}Support
The light-dark() color function is still relatively new. Therefore consideration for older browser versions may be needed if you support this. You can find the support list on the caniuse site.
Advantages
Niya highlighted A number of ways that supported both light and dark colour schemes could help:
- Accessibility
- Sustainability
- Preference consideration/adaption