how to determine if light-dark() css is supported officially?

Question

Is there an official way to know if light-dark() is supported in google chrome (Version 125.0.6422.142 (Official Build) (64-bit)) besides caniuse...

According to caniuse it is supported but I cannot seem to get it to work. (Works fine in edge)

I used the example code straight from mdn web docs

:root {
  /* this has to be set to switch between light or dark */
  color-scheme: light dark;
  --light-bg: ghostwhite;
  --light-color: darkslategray;
  --light-code: tomato;
  --dark-bg: darkslategray;
  --dark-color: ghostwhite;
  --dark-code: gold;
}

* {
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  color: light-dark(var(--light-color), var(--dark-color));
}

code {
  color: light-dark(var(--light-code), var(--dark-code));
}

<h1><code>light-dark()</code> CSS function</h1>
<section>
  <h2>Automatic</h2>
  <p>This section will react to the users system or user agent setting.</p>
</section>
<section class="light">
  <h2>Light</h2>
  <p>
    This section will be light due to the <code>color-scheme: light;</code>.
  </p>
</section>
<section class="dark">
  <h2>Dark</h2>
  <p>This section will be dark due to the <code>color-scheme: dark;</code>.</p>
</section>

even tried the meta tag <meta name="color-scheme" content="light dark">

in chrome it only displays the light version even if I have dark mode selected in settings. (Using edge the result changes depending on light or dark mode selected)

In using the dev tools emulator it works but I believes that is because the emulator uses the @media which is what I thought light-dark() was supposed to avoid.

Answer 1

So I believe I got to the bottom of it .

To get the Prefers-Color-Scheme header to change (which allows all the color CSS parts to function) in Chrome, you need to adjust the Windows settings under Personalization > Colors, not the appearance settings in the browser. It doesn't make much sense to me why they would implement it this way, but that's how it works.

In edge, it responds to the appearance setting in the browser.

two wasted days but at least I know now.