如何防止暗色模式/夜晚模式毁了你的页面

我有一个使用 css 定型的网站。当我在某些浏览器上查看时，如果启用了暗色模式，css 就会被完全破坏，我网站上已经改变的颜色看起来非常难看。我怎样才能防止我的 css/colourschemes 因暗色模式而改变？

当我在安卓设备上通过 Whatsapp 上发送的链接打开我的网址时，默认浏览器–安卓的 “互联网 “应用程序会自动调整 CSS 的样式，因为我已启用了暗色模式。如果其他用户访问我的网页并启用了暗模式，我希望他们看到的是原始样式，而不是暗模式编辑过的版本。

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

遇到了同样的问题。我的发现是这样的。

我在页眉标签中添加了这个元标签：

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

上面的元标签表示该配色方案只支持浅色模式。

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

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

已在 Safari、Chrome 浏览器、三星浏览器、Facebook 应用程序内浏览器和火狐浏览器上进行了测试。

另一种方法是使用 CSS：

:root {
     color-scheme: light only;
}

上述内容表明，该造型只使用了轻型版本。

:root { color-scheme: light only !important; } 使它更强大。