无父页面代码权限时，如何让iframe自动识别深色模式？

完全可以实现iframe自动识别父页面的深色/浅色模式，核心思路是通过采样父页面的背景色亮度来判断主题，不需要修改父页面代码，且兼容跨域场景。

实现步骤 #

1. 准备颜色亮度计算逻辑

使用WCAG标准的相对亮度公式判断颜色是否属于深色，该公式能准确反映人眼对不同颜色的感知亮度：

// 计算颜色相对亮度（0=纯黑，1=纯白）
function getLuminance(r, g, b) {
  const [lr, lg, lb] = [r, g, b].map(val => {
    val /= 255;
    return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * lr + 0.7152 * lg + 0.0722 * lb;
}

2. 编写主题检测函数

创建一个隐藏的采样元素，利用inherit继承父页面的背景色，再通过计算亮度判断主题：

function detectParentTheme() {
  // 创建或获取采样元素
  let sampler = document.querySelector('.theme-sampler');
  if (!sampler) {
    sampler = document.createElement('div');
    sampler.className = 'theme-sampler';
    // 固定在角落，不干扰页面交互
    sampler.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      width: 1px;
      height: 1px;
      pointer-events: none;
      background: inherit;
      z-index: -9999;
    `;
    document.body.appendChild(sampler);
  }

  // 获取父页面背景色
  const bgColor = getComputedStyle(sampler).backgroundColor;
  // 解析RGB值（兼容rgba格式，忽略透明度）
  const rgbMatch = bgColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
  if (!rgbMatch) return;

  const r = parseInt(rgbMatch[1], 10);
  const g = parseInt(rgbMatch[2], 10);
  const b = parseInt(rgbMatch[3], 10);
  const luminance = getLuminance(r, g, b);

  // 根据亮度切换主题
  const targetTheme = luminance < 0.5 ? 'dark' : 'light';
  document.documentElement.setAttribute('data-theme', targetTheme);
}

3. 启动自动检测

页面加载时执行一次检测，并设置轮询监听父页面主题变化（因为无法直接监听父页面的DOM变化）：

// 初始化检测
detectParentTheme();
// 每1秒检测一次，可根据需求调整间隔
setInterval(detectParentTheme, 1000);

4. 确保iframe背景透明

在iframe的CSS中设置body背景为透明，让采样元素能正确继承父页面背景：

body {
  background-color: transparent !important;
}

保留手动切换（可选） #

可以保留原有的手动切换开关作为 fallback，当自动检测失效时，用户仍可手动控制：

<div class="theme-switch-wrapper">
  <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="slider round"></div>
  </label>
  <em>Enable Dark Mode</em><br>
</div>

const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');

function switchTheme(e) {
  const targetTheme = e.target.checked ? 'dark' : 'light';
  document.documentElement.setAttribute('data-theme', targetTheme);
}

toggleSwitch.addEventListener('change', switchTheme, false);

注意事项 #

• 该方法无需访问父页面DOM，完全在iframe内部实现，兼容跨域场景；
• 轮询间隔可根据需求调整，间隔越小响应越及时，但会增加少量性能消耗；
• 如果父页面使用渐变背景或动态背景，采样结果可能存在偏差，可适当增大采样元素的尺寸（比如10x10px）取平均颜色优化准确性。

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