DEV Community

Dev Bhamaria
Dev Bhamaria

Posted on AI-assisted

Samsung Internet's dark mode turned my orange buttons dark red. My fix is only partial.

#webdev #css #android #debugging

My portfolio uses one accent colour: orange, #ff5714, which is RGB 255, 87, 20. On a friend's phone the orange buttons showed up dark red.

I first noticed it when a friend sent me a screenshot. Then I tested it on my own phone and saw the same thing.

Friend's phone in Samsung Internet: the orange buttons on my old site are dark red

The cause was Samsung Internet's dark mode for web pages (that is the name I know it by). I only saw it in Samsung Internet on phones. I did not see it on PC browsers. My page already says it is dark (color-scheme: dark in the CSS and a color-scheme meta tag), and the browser still changed the colours.

What I tested

I made a test page that paints the same orange eight ways and opened it on my phone (Samsung Internet 30.0, which reports Chromium 143). I measured the colours from screenshots.

Test page on my phone: the same orange painted eight ways; only the small image tile, the text and the canvas stay orange

How the orange was painted Intended Seen on my phone
Plain CSS fill 255, 87, 20 143, 0, 2 (dark red)
CSS gradient 255, 87, 20 72, 0, 2
Inline SVG 255, 87, 20 183, 12, 3
Box shadow or border 255, 87, 20 204, 34, 1
Image stretched to fit 255, 87, 20 91, 10, 4 up to 129, 43, 13
Small image tile at natural size 255, 87, 20 255, 110, 42
Canvas 255, 87, 20 255, 86, 21
Orange text 255, 87, 20 255, 119, 53

Chart of the measured colours compared with the intended orange

Only the canvas came out right. A small, unscaled image tile came out close.

Things I tried that did nothing: color-scheme: light on the element, forced-color-adjust: none, isolation: isolate with will-change: transform, print-color-adjust: exact, a color-scheme meta tag with both values, and prefers-color-scheme media queries. The phone also told the page that dark mode was not on, and still changed the colours.

I don't know Samsung's actual algorithm and couldn't find documentation for it. The table is a pattern from my tests, not a proof.

I also tried Chromium's own forced dark mode on desktop (Edge with WebContentsForceDark). It did not reproduce the problem: plain fills stayed correct. So Samsung's behaviour is different, and desktop Chrome is not a good stand-in for it.

The fix

Since a small unscaled image survived, I paint the orange as a 10 by 10 pixel SVG that repeats at its own size, instead of as a CSS colour:

--acc-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect width='10' height='10' fill='%23ff5714'/%3E%3C/svg%3E");
--acc-fill: var(--acc-tile) repeat border-box;
Enter fullscreen mode Exit fullscreen mode

Then 25 rules that said background: var(--acc) now say background: var(--acc-fill), with border-color: transparent so no dark red outline appears. A few other things had to change too:

  • The email underline was a gradient. It is now a separate strip, and the hover effect uses clip-path instead of resizing, because resizing would scale the image.
  • The play triangle in the Auto-scroll button was a CSS border triangle. It is now a filled box cropped with clip-path.
  • The university logo is a white PNG on a white CSS plate, and the phone turned both grey. A small script now draws the plate and logo on a canvas, with an aria-label for screen readers.

On desktop browsers the orange still measures exactly 255, 87, 20, so normal visitors see no difference. On my phone, after the fix:

My phone after the fix: the buttons are orange again, but a lighter orange than intended

What the fix does not solve

This is much better, not solved.

  • The orange is lighter. The buttons now measure 255, 110, 42, a bit peachy. I tried darker tiles (seven different oranges) and all of them came out at almost the same colour, so I can't compensate that way.
  • Orange text is still lighter (255, 119, 53). I didn't fix it.
  • The page background is still darkened, from 12, 12, 11 to about 2, 2, 0.
  • Some plain orange is still used for borders, outlines and hover states. I haven't checked each of them on the phone.
  • The light resume sheet can't stay light. A white sheet became dark grey, and nothing I tried stopped it. So the resume page now shows a short note to Samsung Internet users, based on the browser's user agent string. If Samsung changes that string, the note disappears. I tested the note on my own phone in Samsung Internet and it shows there.
  • Chrome's own forced dark mode would make the fix darker. In the desktop simulation, my tile became 217, 51, 0.
  • The code is harder to read. The orange is now an image behind two CSS variables, and the logo needs JavaScript.

What I haven't tested

Chrome on Android with its auto dark mode flag, Firefox, Safari, and Samsung Internet on desktop. I also haven't checked whether the dark mode alters the project screenshots.

If it happens to you

Try your site in different browsers before you ship it. I only found this because a friend happened to use Samsung Internet.

The fix is in the commit history of my portfolio repo: https://github.com/Burthcer/portfolio

If you know how Samsung Internet decides what to darken, I'd like to hear it.

Top comments (0)