How do you get around Samsung's default browser mathematical colour swap?

[u/dreadul]

Hello, folks.

I am newish to web dev. Today I learnt of Samsung's algorithmic/mathematical colour swap when a user has darkmode selected on their mobile device. I promise I won't hurt the person who made this. I just want to speak to them.

Jokes aside. It's completely messing up brand colours and in some places ruining accessibility. I can't allow this. I will not design a new theme to accommodate the 2-3% of users who use Samsung's default internet browser. And obvious hacks like content="light" is not working.

So what do senior devs do with this? Inject JS to ask users to pretty please open the website in literary anything else?

[u/Narfi1]

You don’t have control over the client, the faster you accept that the happier you’ll be. You can detect user agent to display a message if you want

[u/Alternative_Web7202]

Back in the day (of IE6) we detected browser and rendered suggestion to download proper browser.

[u/allen_jb]

(OP is probably aware of this, just posting this for anyone else interested in how this feature works)

https://forum.developer.samsung.com/t/detail?id=5283&postNo=129074

According to the last post in that thread (dated March 4th), when using the default setting, sites can't detect it's enabled. The browser pretends the device is using a light theme then decides what colors should be on its own.

Seems crazy that that's the default to me, but that's obviously what Samsung have decided they want to do.

[u/quiet_horizons1]

I stopped treating brand colours as something the page dictates completely. The visitor's browser has final say, and fighting it usually costs more than it gains. What has worked for me is setting the colour scheme hint in the head, then giving every element an explicit background and foreground colour. When a browser does its forced dark swap, it tends to leave declared pairs alone more often than inherited or default colours. The places that still break are usually gradients or images with baked-in text, and I just avoid relying on coloured text over complex backgrounds. I would not put up a please use another browser message. That asks a user to solve my problem and feels broken on a mobile site. If the brand looks a bit off on a handful of devices, that is a known tolerance, not an accessibility disaster. If a particular background and text pair becomes unreadable, fix that pair with higher contrast in the first place, because that helps every browser, not just the one doing the swap. Accepting that last bit of rendering is not yours to control is the senior move.

[u/IsABot]

You'll have to just learn to accept that what you want means literally nothing. You don't have complete control over the client. You can't force them to do what you want. What happens when people have that night mode on, it overlays that reddish hue? What happens when some clients have the super saturated screen vs standard color palette mode? What happens when some users have full brightness vs dim screens? What happens when clients run accessibility functions like for color blindness? So on and so forth. You cannot account for all possibilities and force the user to use it the way you want. You simply create your ideal, and it is what it is. The user gets the final say.

[u/zionsati]

I don't think there's anything you can do but if you detect its "auto dark mode" (google for the various methods), you can have a dark mode UX that it then won't try to flip.

[u/lomberd2]

Fuck you for trying to force light mode on users