如何阻止暗模式破坏我的 CSS答案

【问题标题】：How do I stop dark mode from destroying my css如何阻止暗模式破坏我的 CSS
【发布时间】：2020-02-07 17:19:40
【问题描述】：

我有一个带有 CSS 样式的网站。当我在启用暗模式时在某些浏览器中查看时，css 完全被破坏，并且在我的网站中发生变化的颜色看起来非常可怕。如何防止我的 css/colorschemes 因深色模式而被更改？

当我通过我的 Android 设备上的 whatsapp 上发送的链接打开我的网址时，默认浏览器 - Android 的“互联网”应用程序会自动重新设置 CSS 的样式，因为我启用了暗模式。如果其他用户访问我的页面并启用暗模式，我希望他们看到原始样式而不是暗模式编辑版本。

我发现您可以使用此媒体查询将 css 设置为暗模式：@media (prefers-color-scheme: dark) {。我可以复制我的整个 css 文件，该文件目前有 3000 行长，深色和浅色，括号之间的代码相同，但这似乎很荒谬。有没有其他可行的方法？

【问题讨论】：

我不明白，哪个浏览器在暗模式下会改变网站的颜色？请给出一个重现您的问题的 css 和浏览器（和浏览器设置）的具体示例。通常情况正好相反，网站不会响应暗模式，除非他们特别有 prefers-color-scheme 媒体查询。
当我通过我的 Android 设备上的 whatsapp 上发送的链接打开我的 url 时，默认浏览器 - Android 的“互联网”应用程序会自动重新设置 CSS 样式，因为我启用了暗模式。如果其他用户访问我的页面并启用暗模式，我希望他们看到原始样式而不是暗模式编辑版本。 @dirkgroten
浏览器不应该这样做！这到底是什么浏览器（什么品牌的手机）？ prefers-color-scheme: dark 标志告诉网站整个 OS 设置为暗模式，用户希望看到暗站点。当用户将他们的操作系统切换到深色模式时，如果您没有特定的 CSS，您的网站应该仍然保持不变（浅色）。
@dirkgroten，一些客户会根据自己的完美感觉强制暗模式更新样式。例如。 OSX 邮件。
@nerdychick，我尝试了媒体（prefers-color-scheme：dark）和（prefers-color-scheme：light），它在普通屏幕上完全杀死了我的 css：请尝试@media (prefers-color-scheme: dark) or (prefers-color-scheme: light)。

标签： css

【解决方案1】：

事实证明，Samsung Internet（大量设备上的默认 Web 浏览器，也是您的屏幕截图中的特色之一）在用户启用 @ 时静默应用过滤器，以一种不平凡的方式转换网站上的颜色987654322@ 在他们的设备上。请参阅this blog post 了解更多信息。

其要点是，从三星互联网版本 13.0.1.64 开始，此过滤器无法使用 javascript 或 CSS 检测到。

作为 Web 开发人员，您唯一能做的就是警告用户并敦促他们切换到更好的浏览器：

 <script>
   if (navigator.userAgent.match(/samsung/i)) {
       alert("You are using a defective browser (Samsung Internet) that " + 
             "might not be configured to display this website properly. " +
             "You should consider using a proper standards-compliant " + 
             "browser instead. \n\n"+
             "We recommend using Firefox, Microsoft Edge, or Google Chrome.");
   }
</script>

【讨论】：

呜呜呜呜呜。并为这个答案投票。我刚刚开始深入研究 web/html/css 开发的东西，唯一比浏览器更糟糕的是
一年后并没有改变。花一小时模拟深色模式，不明白为什么我的手机对 CSS 更改没有反应。这个或者我必须（叹气）使用三星互联网夜间模式可访问的颜色。

【解决方案2】：

如果我理解的话，您希望用户看到所谓的浅色版本，即使他们的浏览器设置为更喜欢深色版本。我要建议的远非完美……我的意思是，我不会这样做，但我认为它应该可以工作。只需复制并粘贴您在 @media (prefers-color-scheme: dark) 查询下编写的 CSS，然后手动更改其中不起作用的内容，而无需更改括号外的代码。无论用户在浏览器设置中选择什么，都应该看到您网站的原始、精简版本。 TBH，我不知道您为什么要这样做：恕我直言，理想的方法是同时提供浅色和深色主题以及默认后备。

【讨论】：

其实如果你什么都不做，任何普通的浏览器（Chrome、Safari、Edge、Opera、Firefox）都会显示轻量版。只有当你想要一个黑暗的主题你才需要做点什么。
问题是，如果 OP 看到不同的行为，很可能是浏览器设置为做一些古怪的事情，并且无论如何都不会响应 @media (prefers-color-scheme: dark)。
我从OP那里了解到，他的主题不是光明，也不是黑暗。他担心它会被在浏览器中选择深色主题的用户更改：我称之为浅色，但实际上是他希望在每种模式下都显示的默认主题。如果我错了，请告诉我。我在这里建议的是在未定义时覆盖浏览器默认 CSS 以用于暗模式的警告，但正如我所说，我不会这样做。
但即使您选择暗模式，浏览器也不会更改任何网站，除非该网站有 explicit CSS to support 暗模式。因此，OP 正在观察变化的事实在这里很奇怪，因为这不是浏览器应该如何工作的！
也许是这样，但话又说回来，在这样的浏览器中，我怀疑暗模式的 @media 查询是否有效（因为它应该有助于网站检测暗模式和自己决定是否尊重它），因此我认为 OP 无能为力。

【解决方案3】：

我做了一些测试，我发现的解决方案是在浏览器暗模式打开时您想要拥有的属性值之后使用 !important 声明。

想一想，如果您使用浏览器暗模式并访问一个网站，并且它与亮模式保持相同，您会有什么感觉？就我个人而言，我真的很生气，并立即从这样的网站离开。所以我实际上建议不要改变颜色。用户想要深色模式是有原因的，可能是因为他们不希望明亮多彩的东西伤害他们的眼睛。如果他们想使用浏览器暗模式，他们就知道网站的颜色会发生什么变化。

我能看到的唯一改变事物的用例是元素因暗模式而消失。

话虽如此，如果您的元素因为这种暗模式而消失，请首先查找根本原因。在拍打 !important 之前了解他们为什么会改变。这很懒惰，不适合作为开发人员。

【讨论】：

我有一个网站已经是深色的，但是由于 Firefox 中的新深色模式，一些颜色发生了变化，这破坏了整体风格。我该如何摆脱那些意想不到的变化？

【解决方案4】：

在你做这一切之前，请检查如果你没有做错，我做的 - 我们在这里谈论的是移动设备上的强制黑暗主题，您认为您的浏览器（很可能是 Chrome）正在强制每个网站使其背景为黑色，文本为白色。

我有一个手动设置的 chrome 标志，用于强制暗模式。

转到 Chrome 并输入地址 chrome://flags 然后搜索“dark” 您会发现“Web 内容的强制黑暗模式”标志。如果还没有 - 将 if 设置为“默认”。

希望它可以节省任何人的时间，我已经为此浪费了 1 小时。

【讨论】：

【解决方案5】：

您只会在三星互联网浏览器中遇到此问题。如果用户启用了暗模式在“三星互联网浏览器（移动）”中，浏览器会自动更改网站的 css 以适应暗模式。无论您是否应用了与 @media (prefers-color-scheme: dark){} 中的灯光模式/默认值相同的 CSS

因此，如果您想让您的网站在三星互联网浏览器中看起来更好，您可以使用这条 javascript 行 navigator.userAgent.match(/samsung/i) 检测三星浏览器，并为三星浏览器应用单独的 CSS 类。

【讨论】：