CSS's light-dark function

Before CSS's light-dark function, we had to use tricks like adding a .dark class to overwrite color variables. This led to code duplication, and I've always hated that.

CSS’s light-dark function lets you specify which color to use based on the user’s color scheme preference (light or dark mode).

So, instead of:

:root {
    --color-fg: #000;
        
    /* when html tag have the .dark class, overwrite colors */
    &.dark {
        --color-fg: #fff;
    }
}

We could just do:

:root {
    --color-fg: light-dark(#000, #fff);
}

Here it’s just one color variable, but I think you got the point. You can learn more on MDN.

But here’s something cool you can do with it: I’m currently using it on this website to change the code highlight theme when the color scheme changes, no extra JavaScript or complicated setup needed. You can try it out by clicking the little circle icon in the top right.