Support light-dark - Githubissues

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark

The light-dark function allows you to either pick the left color if the current theme of the element is light, or the right color if the current theme of the element is dark.

With the existing CSS, there is no alternative for this on the browsers that do not support this yet, so we need to do a fallback

Having the following input css:

.element {
    background-color: light-dark(white-black);
    color: light-dark(black, white);
}

I would expect the following output:


.element {
    background-color: white;
        color: black;
}
@media (prefers-color-scheme: dark) {
.element {
    background-color: black;
        color: white;
}
}
.element {
    background-color: light-dark(white-black);
        color: light-dark(black, white);
}

for a goodish output, (instead of checking the elements theme, it checks the browser theme) or


.element {
    background-color: white;
    background-color: light-dark(white-black);
        color: black;
        color: light-dark(black, white);
}

for an okayish output. (just falling back to always using the white theme)

Note that both of those solutions do not work with changing the theme by adding color-scheme: dark or color-scheme: light on the current element. This is not something that would be possible to add using an autoprefixer, so it is out of scope for this project.

The light-dark function is fully supported under Firefox

postcss / autoprefixer

Support light-dark #1509