Question

我已经设计了一个网站（以深色主题显示），并且像“深色阅读器”和奇异鸟浏览器（移动设备）的内置夜间模式之类的插件正在更改某些元素的颜色（从而使其不可见）并消除渐变效果。

有什么办法可以避免这些变化？

Answer 1

这仅仅是推测性的，需要我做进一步的研究，但是您可以尝试使用一些已知由插件更改的CSS规则，并通过JS检查它是否被更改。如果您检测到该更改，则可以礼貌地警告用户禁用已检测到的插件。 Dark Reader具有白名单功能，可在某些网站中将其禁用，大多数插件都具有此功能。如前所述，这是未经检验的建议。

对于Kiwi浏览器，您还可以检测用户代理，并特别警告该浏览器的用户。

Answer 2

在现代的浏览器中，有一个内置的CSS media selector slector可以实现这一功能：

@media (prefers-color-scheme: dark) {
  .invisible-in-dark {
    background:#fff !important;
  }
}

我不知道它在插件中的表现如何，但我认为值得尝试。

Answer 3

所以我意识到暗模式插件将属性添加到脚本的现有配色方案中，以便将浅色主题转换为暗色。

现在，如果要防止某些属性被插件更改，可以将其标记为！important。这样，您的媒体资源将覆盖所有进一步的更改。