除caniuse外，如何官方验证Chrome 125对light-dark() CSS函数的支持

除了caniuse，你可以通过以下几种官方途径验证：

• Chrome功能状态仪表盘
  这是Chrome官方跟踪所有功能开发、启用状态的平台。直接搜索“CSS light-dark() function”，就能查看该功能在对应Chrome版本中的状态（是否已进入稳定版、是否需要手动开启开关等），还能看到功能的详细迭代记录和启用条件。

• chrome://flags 手动检查
  在Chrome地址栏输入chrome://flags，搜索“light-dark”或“CSS Color Scheme Functions”相关选项，确认该功能是否处于启用状态。虽然caniuse显示125版本支持，但个别情况下可能存在默认未开启的情况，手动确认能排除这个问题。

• CSS/JS原生支持检测
  用代码直接检测浏览器是否支持该函数：

  • CSS方式：

    @supports (color: light-dark(#fff, #000)) {
      /* 如果支持，这里的样式会生效，可做视觉提示 */
      body::before {
        content: "light-dark() 功能已支持";
        color: green;
      }
    }
    

  • JS方式：

    console.log(CSS.supports('color', 'light-dark(white, black)'));
    // 控制台返回true表示支持，false则不支持
    

另外，针对你遇到的实际使用不生效问题，补充两个排查点：

1. 确认页面的color-scheme设置是否正确：meta标签<meta name="color-scheme" content="light dark">必须存在，同时根元素的CSS要设置color-scheme: light dark;，确保浏览器识别页面支持明暗模式切换。
2. 检查是否有其他CSS规则覆盖了light-dark()的应用，比如更高优先级的样式或者!important声明。

内容的提问来源于stack exchange，提问作者tryingtolearn