About CSS Color Scheme and Safari

The CSS color-scheme property and the associated light-dark() function can significantly ease the creation of light and dark color schemes for your website.

That is, if you don't care about the Safari browser.

Not only has Safari not yet implemented support for the light-dark() function, but using it in certain ways can break Safari. Here's one example:

:root {
  color-scheme: light dark;
  --background: light-dark(pink, black);
}
body {
  background-color: var(--background, pink);
}

This seems to be a logical approach to implementing light and dark modes for a design while specifying a fallback color for browsers that don't support the light-dark() function.I tested this in Codepen and it worked in Firefox and Chrome. It also seems to work in Opera and Edge (even though the internet claims there isn't support for it yet). But this completely fails in Safari. Not only does Safari not understand the light-dark() function, but it fails to apply the fallback color pink. In fact, trying to use light-dark() in any way seems to upset Safari. I tried the following approach to providing a fallback:

:root {
  color-scheme: light dark;
  --background: pink;
  --background: light-dark(pink, black);
}
body {
  background-color: var(--background);
}

But Safari will not show a pink background. I also tried:

:root {
  color-scheme: light dark;
  --background: light-dark(pink, black);
}
body {
  background-color: pink;
  background-color: var(--background);
}

Still no joy. This is really annoying.

The specific problem seems in using the light-dark function with a CSS custom property. Even changing where I use the light-dark() function will break Safari if using custom properties. So the following code will not work:

:root {
  color-scheme: light dark;
  --background-light: pink;
  --background-dark: black;
}
body {
  background-color: pink;
  background-color: light-dark(pink, black);
}

But if I rewrite the same code without the custom properties, the fallback pink appears in Safari:

:root {
  color-scheme: light dark;
  --background-light: pink;
  --background-dark: black;
}
body {
  background-color: var(--background-light);
  background-color: light-dark(pink, black);
}

This is so frustrating. I've tried multiple variations of use of custom properties in the light-dark() function with different fallbacks or using the @supports query, but I can get nothing to work in other browsers while also providing the proper fallback in Safari.

So there it is: a great approach to light and dark mode for a website cannot be used because of Safari.