Chrome后台服务工作线程中prefers-color-scheme检测替代方案问询

服务工作线程的全局上下文是self而非window，直接用self.matchMedia即可替代原有逻辑，完全兼容配色方案检测：

• 基础检测示例：

// 在Service Worker代码中
const isDarkMode = self.matchMedia('(prefers-color-scheme: dark)').matches;
// 根据结果执行对应业务逻辑

• 监听配色方案变化：
  如果需要实时响应系统配色切换，同样可以通过self.matchMedia添加监听：

const darkModeQuery = self.matchMedia('(prefers-color-scheme: dark)');

darkModeQuery.addEventListener('change', (event) => {
  const currentIsDark = event.matches;
  // 处理模式切换后的逻辑
});

若遇到特殊兼容性场景，也可通过客户端页面传递配色偏好：

1. 页面侧检测后发送消息：

// 网页主脚本中
const scheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
navigator.serviceWorker.controller?.postMessage({ type: 'SYNC_COLOR_SCHEME', scheme });

2. Service Worker侧接收并处理：

// Service Worker中
self.addEventListener('message', (event) => {
  if (event.data.type === 'SYNC_COLOR_SCHEME') {
    const isDarkMode = event.data.scheme === 'dark';
    // 存储或使用该偏好值
  }
});

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