三星浏览器深色模式下React网站文本变白问题求助

以下是针对该问题的实用CSS属性和处理技巧：

• 强制锁定文本颜色优先级
  三星Internet浏览器的深色模式可能会强制覆盖文本样式，可通过更具体的选择器或强制声明来固定颜色：

  body, body * {
    color: var(--font-color, #333) !important;
  }
  

  注：尽量避免滥用!important，如果项目有明确的样式层级，也可以用更高优先级的选择器（比如结合根类名）来替代。

• 禁用浏览器自动颜色调整
  使用color-adjust（及兼容属性print-color-adjust）告诉浏览器不要自动适配系统深色模式调整颜色：

  :root, body {
    color-adjust: exact;
    print-color-adjust: exact;
  }
  

• 针对三星浏览器添加专属样式
  通过特征检测或UA判断，为三星Internet浏览器单独设置样式：

  1. JS检测UA并添加类（React中使用）：

     useEffect(() => {
       if (/SamsungBrowser/i.test(navigator.userAgent)) {
         document.documentElement.classList.add('samsung-browser');
       }
     }, []);
     

  2. 对应CSS样式：

     .samsung-browser {
       color-scheme: light only;
       color: #333;
     }
     /* 若项目有自定义深色主题切换 */
     .samsung-browser[data-theme="dark"] {
       color: #333;
     }
     

• 确保CSS变量正确生效
  若使用CSS变量定义文本颜色，检查样式加载顺序，或通过内联样式强制绑定：

  <div style={{ color: 'var(--font-color, #333)' }} className="app-container">
    {/* 页面内容 */}
  </div>
  

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