如何检测元素级CSS color-scheme状态？适配Web组件场景

问题描述 #

我了解存在prefers-color-scheme媒体查询，示例如下：

@media (prefers-color-scheme: dark) {
    ...
}

但它不符合我的需求，因为prefers-color-scheme检测的是操作系统的主题设置。

我的设计里，同一页面的部分元素可能是浅色主题，其他元素是深色主题，而且用户可以选择和系统主题不同的网站主题。因此我希望获取元素CSS color-scheme属性的状态。我可以给每个元素分配自定义属性比如--color-scheme: light，但这属于功能重复。

我不采用以下方案的原因是，大部分样式在Web组件中，该方案无法作用于Shadow DOM：

.light { --color-scheme: light; }
.dark { --color-scheme: dark; }
:host { color-scheme: var(--color-scheme); }

是否存在检测当前元素color-scheme是浅色还是深色并据此调整颜色的方法？比如下面这种无法生效的设想代码：

/* 无法生效的设想代码*/
@media (color-scheme: light) {
   --fg: black;
}
@media (color-scheme: dark) {
   --fg: white;
}

注：我的问题与某Stack Exchange问题类似，但目前尚无解决方案，或许当前根本无法实现。

结论：当前CSS原生不支持直接检测元素级color-scheme的媒体查询 #

你设想的@media (color-scheme: light/dark)目前不存在——color-scheme属性仅用于告知浏览器元素的主题偏好，但没有对应的元素级媒体查询来反向检测它的状态。

可行的替代方案（适配Shadow DOM） #

针对Web组件的Shadow DOM隔离特性，你可以通过以下方式规避重复定义的问题：

• 在Web组件内部绑定color-scheme与自定义属性
  直接在组件的:host规则里同步color-scheme和自定义属性，内部样式即可通过自定义属性判断主题：

  /* 组件内部样式 */
  :host([color-scheme="light"]) {
    color-scheme: light;
    --current-color-scheme: light;
  }
  :host([color-scheme="dark"]) {
    color-scheme: dark;
    --current-color-scheme: dark;
  }
  
  /* 内部元素基于自定义属性调整样式 */
  .component-content {
    --fg: black;
  }
  :host([color-scheme="dark"]) .component-content {
    --fg: white;
  }
  

  使用时直接给组件设置属性：<my-component color-scheme="dark"></my-component>

• 利用CSS变量穿透Shadow DOM
  如果页面根元素已设置全局自定义属性（比如--app-color-scheme），可在组件内部通过:host-context()选择器读取外部上下文的主题状态：

  /* 组件内部样式 */
  :host-context([data-theme="light"]) {
    color-scheme: light;
    --current-color-scheme: light;
  }
  :host-context([data-theme="dark"]) {
    color-scheme: dark;
    --current-color-scheme: dark;
  }
  

  页面根元素设置：<html data-theme="dark">

• 通过JS同步color-scheme与自定义属性
  若需要动态切换主题，可用JS遍历元素（包括Shadow DOM内的元素），同步color-scheme值到自定义属性：

  function syncColorScheme(element) {
    const computedScheme = getComputedStyle(element).colorScheme;
    element.style.setProperty('--current-color-scheme', computedScheme);
    // 递归处理Shadow DOM内的元素
    if (element.shadowRoot) {
      Array.from(element.shadowRoot.querySelectorAll('*')).forEach(syncColorScheme);
    }
  }
  
  // 初始化同步
  syncColorScheme(document.documentElement);
  

  之后CSS即可通过var(--current-color-scheme)判断主题。

补充说明 #

CSS媒体查询是基于视口/系统环境的全局条件，而color-scheme是元素级样式属性，目前没有规范支持元素级的媒体查询逻辑，这也是同类问题至今无完美解决方案的核心原因。

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