时间戳

首页 > 解决方案 > 如何阻止暗模式破坏我的 CSS

css - 如何阻止暗模式破坏我的 CSS

问题描述

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

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

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

在此处输入图像描述

标签： css

解决方案

事实证明，三星互联网——大量设备上的默认网络浏览器，也是你截图中的特色——默默地应用了一个过滤器，当用户dark mode在他们的设备上启用时，它会以一种不平凡的方式改变网站上的颜色。有关更多信息，请参阅此博客文章。

它的要点是，从三星 Internet 版本 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>

推荐阅读