移动端Brave浏览器中NextJS网站颜色反转问题

可能原因 #

• Brave移动端自带的自动颜色反转机制：Brave的深色模式增强功能会在系统深色模式启用、但网站未明确适配深色模式时，自动反转页面颜色，以此强制适配深色环境。
• 用户开启了高对比度模式：Brave的辅助功能里有高对比度设置，开启后会强制反转页面颜色提升可读性，用户可能误开启了该选项。
• color-scheme属性未明确设置：如果网站没有指定color-scheme，浏览器可能会根据自身规则自动切换配色，Brave在这方面的逻辑和Safari存在差异。
• 第三方组件/依赖的隐式样式：虽然你自己的CSS没设置反转，但引入的第三方UI组件、NextJS的默认样式或某些插件可能带有filter: invert()之类的属性，在Brave环境下被触发。

解决思路 #

• 明确声明color-scheme：在全局CSS中添加以下代码，告诉浏览器网站支持的配色方案，避免自动反转：

  html {
    color-scheme: light; /* 或 light dark，根据需求选择 */
  }
  

• 指导用户检查Brave设置：让用户进入Brave的「设置→外观」，确认深色模式设置为「跟随系统」或「关闭」；同时检查「设置→辅助功能」里的高对比度选项是否关闭。
• 主动适配深色模式：如果想支持深色模式，编写对应的CSS规则，比如：

  @media (prefers-color-scheme: dark) {
    body {
      background-color: #1a1a1a;
      color: #ffffff;
    }
    /* 其他元素的深色样式 */
  }
  

  主动适配后，浏览器就不会强制反转颜色。
• 排查样式继承：用Brave的开发者工具检查页面元素的computed样式，确认是否有filter: invert(1)或类似属性被意外应用，追踪来源是否为第三方依赖或NextJS的默认配置。
• 切换渲染模式测试：如果当前用的是SSR（服务端渲染），尝试生成静态页面（SSG）部署，排除服务端渲染过程中可能出现的浏览器样式解析差异。

内容的提问来源于stack exchange，提问作者lukeryandev