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

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.

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.

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;

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:

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.