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

问题描述 投票:0回答:1

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

找到

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

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

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

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

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

firebase next.js colors firebase-hosting replit
1个回答
0
投票

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

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

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

@media (prefers-color-scheme: dark) {
  html {
      color-scheme: dark;
    }
  }
© www.soinside.com 2019 - 2024. All rights reserved.