iOS端Microsoft Edge深色模式异常问题求助

方案1：强制锁定浅色模式（终极解决） #

针对iOS端Edge直接强制应用浅色样式，无视系统主题和隐私模式的错误判断：

JS代码 #

document.addEventListener('DOMContentLoaded', function() {
  const isEdgiOS = /EdgiOS/i.test(navigator.userAgent);
  if (!isEdgiOS) return;

  // 强制设置根元素为浅色模式
  const rootEl = document.documentElement;
  rootEl.classList.add('force-light');
  rootEl.style.setProperty('color-scheme', 'only light');

  // 监听主题变化，防止后续切换时被覆盖
  if (window.matchMedia) {
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
      rootEl.classList.add('force-light');
      rootEl.style.setProperty('color-scheme', 'only light');
    });
  }
});

配套CSS #

.force-light {
  color-scheme: only light !important;
  /* 覆盖全局背景和文字颜色，根据你的页面调整 */
  background-color: #ffffff !important;
  color: #1a1a1a !important;

  /* 针对你页面中的特定元素修复样式 */
  .hero-type-2 .feature-icon {
    filter: none !important; /* 替换为你浅色模式下的正常滤镜值 */
  }

  /* 其他深色模式下的自定义样式都在这里覆盖 */
}

方案2：修复隐私模式下的主题判断错误 #

如果需要保留跟随系统主题的逻辑，仅修复iOS Edge隐私模式下的matchMedia错误判断：

JS代码 #

document.addEventListener('DOMContentLoaded', function() {
  const isEdgiOS = /EdgiOS/i.test(navigator.userAgent);
  if (!isEdgiOS) return;

  // 通过系统默认颜色检测实际主题，绕过matchMedia的错误返回
  function getActualTheme() {
    const testEl = document.createElement('div');
    testEl.style.color = 'CanvasText'; // 使用系统默认文本颜色变量
    document.body.appendChild(testEl);
    const textColor = getComputedStyle(testEl).color;
    document.body.removeChild(testEl);
    // 浅色模式下CanvasText为深灰/黑色，深色模式为白色/浅灰
    return textColor.includes('0, 0, 0') ? 'light' : 'dark';
  }

  // 初始化主题
  updateTheme();

  // 监听主题变化
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme);

  function updateTheme() {
    const actualTheme = getActualTheme();
    const bodyEl = document.body;
    
    if (actualTheme === 'dark') {
      bodyEl.classList.add('ios-edge-dark');
      bodyEl.classList.remove('force-light');
    } else {
      bodyEl.classList.remove('ios-edge-dark');
      bodyEl.classList.add('force-light');
    }
  }
});

配套CSS #

保留你原有的.ios-edge-dark样式，同时添加force-light的基础覆盖样式：

.force-light {
  color-scheme: light !important;
  background-color: #ffffff !important;
  color: #1a1a1a !important;
}

.ios-edge-dark .hero-type-2 .feature-icon {
  filter: $main-filter-neg;
}

说明 #

iOS端Edge基于WebKit内核，在隐私模式下存在prefers-color-scheme判断异常的bug，会强制返回dark，同时忽略页面设置的color-scheme属性。上述方案通过直接强制样式或绕过错误的媒体查询判断，解决该问题。

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