CODEWITHSUNDEEP
androidhtmlcssreactjssamsung-mobile
Rashmi Rekha
Rashmi Rekha

Reputation: 219

Text Color Changes to White on Samsung Internet When Dark Mode is Enabled

I’m developing a website using ReactJS and have encountered an issue specifically with Samsung Internet browser. My design looks perfect on other browsers, but when I view the site on Samsung Internet with dark mode enabled, the text color changes to white.

Additionally, I have tried the below-mentioned things, but nothing works for me.

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

 :root{
 color-scheme: light;
 }

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

Upvotes: 0

Views: 605

Answers (1)

Will59
Will59

Reputation: 1893

So, as of today, I don't think there is a clean way to work around this.

Ths is not really an answer, but on my side, so far, the only thing I was able to do is detect when we are in that messed up mode. In React, you can do something like this:

    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+';
      },
      [],
    );

This is based on this answer.

But even when you know that samsung Internet is in dark mode, there is no easy thing you can do. Even if you adopt a dark themed palette, that browser still comes in and messes it up, making things unreadable. I guess that if you have text only content, their algorithm works ok, but if you have graphics, colored svg, colors gradients, etc. and your palette does not match their line of thoughts, you're out of luck for now :-(

The worst thing being that they could disable this "feature" if they wanted to. Just go to Settings > Labs > Use website dark theme, and you'll see they are thinking about it. But for now, you can either:

  • ask your users to activate this lab setting when you detect the "feature" is on (lol)
  • or mess up your color palette until you find one that Samsung doesn't completely kill

Quite sad to see how deaf Samsung is to this issue.

Edit: So I ended up working around this "feature" as much as possible by:

  • detecting this mode
  • changing all my light colors with dark colors when in this mode
  • fine tuning the colors using Chrome debugger on a PC

When playing with colors in real time, it becomes apprent for instance that it is impossible to have a light grey background on anything. So any lighter accent will be colored. And your site will most likely end up ugly, but at least readable :-)

Upvotes: 0

Related Questions