Microsoft Edge 失控：iOS 上的深色模式

Question

Microsoft Edge 的“深色模式”似乎在 iOS 上失控了。在 Chrome/Safari/Firefox (iOS) 和 Chrome/Safari/Firefox/Edge (OSX/Windows) 上，一切按预期运行。

理想情况下，我希望 Edge 根本不使用深色模式。接下来最好的办法是专门针对 iOS 上的 Edge 深色模式，并添加一些 CSS 覆盖。最有趣的是，我在使用后者时遇到了麻烦，iOS 上的 Edge 似乎也不听“prefers-color-scheme: dark”。

首先，我添加了这个元标记：

<meta name="color-scheme" content="only light">

在我使用这个之前：

<meta name="color-scheme" content="light">

其次，我添加了以下 CSS（根据 Chromium 规范：https://developer.chrome.com/blog/auto-dark-theme）：

:root {
    color-scheme: only light;
}

这非常适合列出的环境，只有 Edge iOS 不起作用。

因此，我尝试使用以下代码通过 JS 添加 css 目标来覆盖它。

$(document).ready(function(){
    if (
        window.matchMedia &&
        window.matchMedia('(prefers-color-scheme: dark)').matches &&
        /EdgiOS/.test(navigator.userAgent)
    ) {
        document.body.classList.add('ios-edge-dark');
    }
});

与 CSS 结合，如下所示：

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

这才是真正的“乐趣”开始的地方：Edge iOS 的目标是正确的，但不知何故，第二个条件 (window.matchMedia('(prefers-color-scheme: dark)').matches) 在浅色模式下也成立。

所以我决定测试 Edge iOS 是否会监听 CSS 中的媒体查询：

@media (prefers-color-scheme: dark) {
    .ios-edge-dark {
        .hero-type-2 {
            .feature-icon {
                filter: $main-filter-neg;
            }
        }
    }
}

你猜对了。没有什么。 Edge认为天很黑。几时。事实并非如此。

此时我已经没有想法了（并且经历了 IE 的闪回）。

我确实发现最近的一篇文章暗示其他人也遇到同样的问题，但没有列出真正的解决方案： https://learn.microsoft.com/en-us/answers/questions/1644468/inconcient-dark-mode-behavior-in-edge-on-ios

希望大家能有解决办法！此时，我渴望让它发挥作用，即使它包含一种肮脏的基于 JS 的解决方法，就像我已经尝试过的那样。预先感谢您！

P.S.：我试图尽可能详细地概述这个问题，希望将来能帮助其他人。如果您遇到同样的问题，请随时分享您的修复尝试。我也很高兴添加这些。

Answer 1

您是否在 Edge 设置中启用了深色模式？我使用 Edge iOS 进行测试，

prefers-color-scheme

会检测 Edge 中的深色模式设置，而不是 iOS 系统。

您可以在 Edge 中找到该设置：单击 Edge 右下角的 ☰ 按钮，然后单击深色模式。仅当您选择系统默认时，

prefers-color-scheme

的值才会与系统相同。实际上，对于 Edge iOS，

prefers-color-scheme

反映的是 Edge 设置中的暗/亮模式，而不是系统。