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

Question

我有一个带有 css 样式的网站。当我在启用深色模式的某些浏览器中查看时，CSS 绝对被破坏，并且我的网站中更改的颜色看起来绝对丑陋。如何防止我的 css/colorschemes 由于黑暗模式而被更改？

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

我发现你可以使用这个媒体查询来设置暗模式的CSS @media (prefers-color-scheme: dark) {：。我可以复制我的整个 css 文件，该文件目前有 3000 行长，其中包含深色和浅色，括号之间使用相同的代码，但这似乎毫无意义。还有其他可行的方法吗？

Answer 1

事实证明，Samsung Internet \xe2\x80\x94 是大量设备的默认 Web 浏览器，并且您的屏幕截图中的 \xe2\x80\x94 默默地应用了一种过滤器，该过滤器可以以非特定方式转换网站上的颜色。当用户dark mode在其设备上启用时，这是一种简单的方式。请参阅这篇博文了解更多信息。

\n

其要点是，从 Samsung Internet 版本 13.0.1.64 开始，使用 javascript 或 CSS 无法检测到此过滤器。

\n

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

\n

 <script>\n   if (navigator.userAgent.match(/samsung/i)) {\n       alert("Your browser (Samsung Internet) may not show this website" + \n             "correctly. Please consider using a standards-compliant" + \n             "browser instead. \\n\\n" +\n             "We recommend Firefox, Microsoft Edge, or Google Chrome.");\n   }\n</script>\n

\n

Answer 2

有同样的问题。这是我发现的。

我将此元标记添加到标题标记中：

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

上面的meta标签表示该配色方案仅受浅色模式支持。

另一种选择是浅色模式下首选的方案，但它也支持深色模式：

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

在 Safari、Chrome、Samsung、Facebook 应用内浏览器和 Firefox 上进行了测试。

另一种方法是使用 CSS：

:root {
     color-scheme: light only;
}

以上表明该造型仅使用轻型版本。

Answer 3

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

\n