通过暗模式设置和插件禁用更改答案

【问题标题】：Disabling changes by dark mode settings and plugins通过暗模式设置和插件禁用更改
【发布时间】：2020-10-05 23:44:43
【问题描述】：

我设计了一个网站（深色主题），并且像“深色阅读器”这样的插件和 kiwi 浏览器（移动）的内置夜间模式正在更改某些元素的颜色（从而使它们不可见），并删除渐变效果。

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

【问题讨论】：

欢迎来到 SO！请为您的问题提供minimal reproducible example。例如，您能否提供有/没有暗模式的网站截图，并说明正在修改哪些元素？

【解决方案1】：

这只是推测，需要我留给你进一步研究，但你可以尝试挂钩一些已知被插件更改的 CSS 规则，并通过 JS 检查它是否被更改。如果您检测到该更改，您可以礼貌地警告您的用户禁用您检测到的插件。 Dark Reader 有一个白名单功能，可以在某些网站上禁用它，大多数插件都有这个功能。如前所述，这是一个未经测试的建议。

对于 Kiwi 浏览器，你不妨检测一下用户代理，并专门警告这个浏览器的用户。

【讨论】：

【解决方案2】：

在现代浏览器中，有一个内置的CSS media selector 选择器用于那个确切的东西：

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

我不知道插件的效果如何，但我认为值得一试。

【讨论】：

感谢您的建议。我意识到，通过将 css 属性标记为 !important，外部插件添加的所有更改都将被覆盖。

【解决方案3】：

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

现在，如果您想防止某些属性被插件更改，您可以将其标记为 !important。这样，您的属性将覆盖任何进一步的更改。

【讨论】：