如何修复被暗模式破坏的CSS（微软边缘）

Question

我正在 Wix 中构建一个网站，无论我尝试什么，移动菜单图标颜色都会被浏览器更改。

我的网站默认有一个深色主题，但出于某种神奇的原因，Edge 决定采用白色图标，并在我已经黑色的背景上将其设置为深灰色，使其很难看到。

其他浏览器中也可能会发生这种情况，但到目前为止我只发现 Microsoft Edge 存在此问题。

网站是Atozy(dot)tv

这是我已经尝试过的：

• 使用

  !important

  更改线条的背景颜色
• 元标签：

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

• 针对暗模式的媒体查询

这是我添加的自定义 CSS：

.UBzAay {
  background-color: white !important;
}

@media (prefers-color-scheme: dark) {
  .UBzAay {
    background-color: white !important;
  }
}

Answer 1

我最终使用 Chat GPT 编写了一个解决它的脚本。它并不完美，但它是一个临时解决方案：

document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        var isEdge = /edg/i.test(navigator.userAgent);
        var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

        var spans = document.querySelectorAll('.UBzAay');

        if (isEdge && isMobile) {
            spans.forEach(function(span) {
                span.style.backgroundColor = 'red';
            });
        } else {
            spans.forEach(function(span) {
                span.style.backgroundColor = 'white';
            });
        }
    }, 1000);
});