logo标签列表

如何防止暗黑模式破坏我的CSS

css
23

我有一个带CSS样式的网站。当我在某些浏览器上启用暗黑模式时，CSS被完全破坏，我的网站中更改的颜色看起来非常丑陋。如何防止我的CSS/颜色方案因暗黑模式而改变？

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

我发现可以使用这个媒体查询来设置暗黑模式下的CSS：@media (prefers-color-scheme: dark) {。我可以复制我的整个CSS文件，它目前有3000行，其中包括相同的代码，但这似乎毫无意义。还有其他方法可以解决这个问题吗？

输入图像描述

2
我不明白，哪个浏览器会在暗模式下更改网站的颜色？请给出一个具体的CSS和浏览器示例（以及浏览器设置），以重现您的问题。通常情况下，除非网站具有“prefers-color-scheme”媒体查询，否则网站不会响应暗模式。 - dirkgroten
1
当我在我的安卓设备上通过WhatsApp收到的链接打开我的URL时，Android的默认浏览器“Internet”应用程序会自动重新设计CSS，因为我启用了深色模式。如果其他用户访问我的页面并启用了深色模式，我希望他们看到的是原始样式而不是深色模式编辑版本。@dirkgroten - nerdychick
2
浏览器不应该这样做！这是什么浏览器（手机品牌）？prefers-color-scheme: dark 标志告诉网站整个操作系统已设置为暗模式，用户希望看到一个暗色网站。当用户将其操作系统切换到暗模式时，如果您没有特定的 CSS，您的网站应该仍然保持不变（亮色）。 - dirkgroten
2
@nerdychick，我尝试了(prefers-color-scheme: dark)和(prefers-color-scheme: light)，结果在正常屏幕上完全破坏了我的CSS。请尝试使用@media (prefers-color-scheme: dark) or (prefers-color-scheme: light)。 - Kosh
1
嘿，我相信这是与三星操作系统浏览器相关的。即使没有特定的暗模式样式，浏览器也会使图像、文本、输入字段等颜色变暗。实际上，我正在寻找一种消除这种行为的方法，但迄今为止还没有找到，有人能帮忙吗？ - Mace Antoine
显示剩余13条评论
6个回答
28

事实证明，三星互联网浏览器是许多设备的默认浏览器，也是你截图中使用的浏览器。当用户在其设备上启用 暗色模式 时，该浏览器会静默应用一种过滤器，以一种非常复杂的方式转换网站上的颜色。有关更多信息，请参见 这篇博客文章。

概括来说，自三星互联网版本13.0.1.64起，此过滤器无法通过javascript或CSS检测到。

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

 <script>
   if (navigator.userAgent.match(/samsung/i)) {
       alert("Your browser (Samsung Internet) may not show this website" + 
             "correctly. Please consider using a standards-compliant" + 
             "browser instead. \n\n" +
             "We recommend Firefox, Microsoft Edge, or Google Chrome.");
   }
</script>
5
我正在深入了解Web/HTML/CSS开发，唯一比浏览器更糟糕的是< style="font-family:creepy-dripping-green-shit" >电子邮件客户端... 呃呃呃呃呃。请点赞支持我的回答。 - Isaac Reefman
1
一年过去了，但仍然没有改变。花了一个小时模拟Chrome的暗模式，但不明白为什么我的手机没有响应CSS的更改。这样的话，我只能（叹气）使用三星互联网夜间模式可访问颜色。 - Goufalite
16

我遇到了同样的问题。这是我找到的方法。

我在头标签中添加了这个meta标签：

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

上面的元标记指示仅支持亮色模式的颜色方案。
另一种选择是首选亮色模式下的方案，但也支持暗黑模式：
<meta name="color-scheme" content="light dark">

已在Safari、Chrome、三星、Facebook应用内浏览器和Firefox上进行测试。

另一种方法是使用CSS：

:root {
     color-scheme: light only;
}

上述内容表明样式仅使用了浅色版本。
4
根据我所看到的情况，这并不能防止三星浏览器应用其奇怪的色彩调整。 - tipa
3
我尝试使用这个，但它不起作用。在最新版本的Chrome（107.0.5304.107）上进行了测试。 - Shiin Zu
1
这个本身对我没用，但是<meta name="color-scheme" content="dark only">有用。 - XamarinDev
2
颜色方案：仅限浅色；这对我在Edge、Chrome和Firefox上都有效，并且可以用于针对特定元素，例如我的品牌标志。 - Jan
0

如果我理解正确，您希望用户即使将浏览器设置为偏好深色主题，也能看到所谓的轻量级版本。我要建议的远非完美...我的意思是，我不会这样做，但我认为它应该可以工作。只需在@media (prefers-color-scheme: dark)查询下复制并粘贴您编写的CSS，并手动更改其中不起作用的部分，而不更改其括号外的代码。无论用户在浏览器设置中选择什么，他们都应该看到您网站的原始轻量级版本。说实话，我不知道您为什么要这样做：在我看来，理想的方法是提供一个默认回退的浅色和深色主题。

1
实际上，如果您什么都不做，任何正常的浏览器（Chrome、Safari、Edge、Opera、Firefox）都会显示浅色版本。只有当您想要使用深色主题时才需要采取措施。 - dirkgroten
2
问题是，如果 OP 看到了不同的行为，很可能是浏览器设置了一些奇怪的东西，并且无论如何都不会响应 @media (prefers-color-scheme: dark)。 - dirkgroten
我理解 OP 的意思是他有一个主题，既不是明亮的也不是黑暗的。他担心用户选择浏览器中的黑暗主题会更改它：我称它为明亮，但实际上它是他希望在每种模式下显示的默认主题。如果我错了，请告诉我。我在这里建议覆盖浏览器默认CSS黑暗模式的注意事项，但是正如我所说，我不会这样做。 - Federico Moretti
但是即使您选择了暗模式，浏览器也不会更改任何网站，除非该网站具有显式的CSS来支持暗模式。因此，OP观察到的变化是奇怪的，因为这不是浏览器应该工作的方式！ - dirkgroten
我知道，但也许一些 Android 修改版（他说测试浏览器是 Internet 而不是 _Chrome_）现在会覆盖网站的样式。例如 OxygenOS 现在有一个禅模式，可以禁用一些服务。其他平台是否有类似的行为呢？ - Federico Moretti
1
也许是这样，但在这种浏览器中，我怀疑 @media 查询是否能够起作用（因为它应该帮助网站检测暗模式并自行决定是否支持它），因此我认为 OP 无法做任何事情。 - dirkgroten
0

我进行了一些测试，发现解决方案是在需要在浏览器暗模式下使用的属性值后面使用! important声明。

不过请考虑一下，如果您正在使用浏览器暗模式并进入一个网站，但它仍然像亮模式一样，您会有什么感受？个人而言，我会非常生气，并立即离开这样的网站。因此，我实际上建议不要更改颜色。用户之所以想要暗模式，可能是因为他们不希望明亮而丰富多彩的事物伤害他们的眼睛。如果他们想要使用浏览器暗模式，他们会理解网站颜色会发生什么。

唯一的用例，我能看到修改颜色是为了防止元素由于暗模式而消失。

话虽如此，如果您的元素因此暗模式而消失，请首先查找根本原因。了解它们为何变化，再在所有内容上打上! important显得懒惰，也不利于你作为开发者的形象。

1
我有一个已经是暗色主题的网站，但由于Firefox中的新暗色模式，一些颜色发生了变化，破坏了整体风格。我该如何消除这些意外的变化？ - rubo77
-1
在你执行以上操作之前，请检查一下是否像我一样犯了错误——我们谈论的是移动设备上强制暗黑主题，你认为你的浏览器（很可能是Chrome）强制对每个网站施加暗黑主题，使其背景变成黑色，文本变成白色。

我的情况是手动设置了Chrome标记来强制启用暗模式。

打开Chrome并输入地址chrome://flags，然后搜索“dark”。您会找到“强制Web内容的暗模式”标志。如果还没有，则将其设置为“默认”。

希望这能帮助节省一些时间，我因此浪费了1小时。

-1

你只会在三星互联网浏览器中遇到这个问题。如果用户启用了“三星互联网浏览器（移动版）”的深色模式，则浏览器会自动更改网站的CSS以适应深色模式，无论您是否在@media (prefers-color-scheme: dark){}中应用了相同的CSS，以供浅色模式/默认使用。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接