使用 firebase 部署 next.js 项目后，移动版网站上显示错误的颜色

Question

我为一家名为 Monse's Crochet Creations 的钩针编织企业创建了一个登陆页面，可以在此处

找到

我正在用replit编码。我在我的项目中使用 next.js 和 tailwind css。

最终通过 Firebase 部署我的网站后，我认为一切都很好，因为我的网站在我的桌面上看起来与预期一致。但后来我尝试在手机上打开该网站，令我惊讶的是，该网站一团糟。我缺少轮播标签的文本。我的轮播背景是黑色的。我的 3 个平铺网格产品也有黑色背景。

我的控制台中没有收到任何错误。当我使用桌面上的开发工具查看网站的移动视图时，它看起来也很好。

我不确定是什么原因导致了这个问题。我是一个相当新的开发人员，所以我真的需要一些建议。

我尝试使用各种移动设备和移动模拟器导航到该网站。我还尝试摆弄顺风类和全局 CSS 声明。我什至在我的 iPad 上尝试过，它也缺少背景颜色。

Answer 1

我已经解决了我自己的问题。

该错误是由寻找用户明/暗设置的 CSS 片段引起的。如果用户启用了“深色”，则某些元素的背景将更改为黑色，文本将更改为白色。由于这是无意的，因此颜色与其他元素发生冲突。

这是在我的 global.css 文件中声明的代码片段。

@media (prefers-color-scheme: dark) {
  html {
      color-scheme: dark;
    }
  }