启用深色模式后，三星互联网上的文本颜色变为白色

Question

我正在使用 ReactJS 开发一个网站，并且遇到了三星互联网浏览器特有的问题。我的设计在其他浏览器上看起来很完美，但是当我在启用深色模式的三星互联网上查看该网站时，文本颜色变为白色。

此外，我已经尝试过以下提到的方法，但对我来说没有任何作用。

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

 :root{
 color-scheme: light;
 }

@media (prefers-color-scheme: dark) {
:root {
--font-color: black;
}}

• 有没有推荐的 CSS 属性或技术来处理这个问题？

Answer 1

所以，截至今天，我认为没有一个干净的方法来解决这个问题。

这并不是真正的答案，但就我而言，到目前为止，我唯一能做的就是检测我们何时处于混乱模式。在 React 中，你可以这样做：

    const [simulatedDarkMode, setSimulatedDarkMode] = useState(false);
  
    useEffect(
      () => {
        const img = new Image();
  
        img.onload = function checkMode() {
          const canvas = document.createElement('canvas');
          canvas.width = 1;
          canvas.height = 1;
          const ctx = canvas.getContext('2d');
          ctx.drawImage(img, 0, 0);
          const [r] = ctx.getImageData(0, 0, 1, 1).data;
  
          // Test if that white image got turned into grey by a dark mode module
          setSimulatedDarkMode(r < 200);
        };
  
        img.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IndoaXRlIi8+PC9zdmc+';
      },
      [],
    );

这是基于这个答案。

但即使您知道三星互联网处于黑暗模式，您也无法做到这一点。即使您采用深色主题调色板，该浏览器仍然会出现并弄乱它，使内容变得不可读。 我想如果你只有文本内容，他们的算法工作正常，但如果你有图形、彩色 svg、颜色渐变等，并且你的调色板与他们的思路不匹配，那么你现在运气不好：- (

最糟糕的是，如果他们愿意，他们可以禁用这个“功能”。只需转到“设置”>“实验室”>“使用网站深色主题”，您就会看到他们正在考虑这一点。 但现在，您可以：

• 当您检测到“功能”打开时，请您的用户激活此实验室设置（笑）
• 或者弄乱你的调色板，直到你找到三星没有完全消灭的颜色

看到三星对这个问题充耳不闻，真是令人难过。