Dark mode in Samsung browser changes website color scheme

I’ve noticed that when I access Webflow sites through the Samsung Browser with the phone’s dark mode turned on, the browser changes the color scheme of the site except for images. Found this to be annoying since I never used Samsung’s browser before I got their phone, so I was not aware of this dark mode problem. Other browsers are not affected even if phone’s dark mode is turned on. I wish I could just ignore this, but since it is the default browser in all Samsung devices, it is one of the most popular browsers out there.

Got some info about it here: Everything you need to know about Night mode in Samsung Internet | Ctrl blog
Apparently, “It(Samsung Browser) doesn’t support the standard prefer-color-scheme CSS media query. However, it does have its own take on dark mode called “night mode”, however. In night mode, introduced in Samsung Internet version 6.2, the browser applies a set of color filters to webpages, bitmap images, and scalable vector graphics (SVG). Samsung has not published any information on how night mode works in its browser.”

Tried looking for a fix for it, like maybe something that disables the browser from enabling the dark mode filters, but there’s almost nothing in Webflow chatter about this or maybe I haven’t searched deep enough.

Found this though:

"As it turns out, Samsung Internet — the default web browser on a very large number of devices — silently applies a filter that transforms colors on websites in a non-trivial way when the user enables dark mode on their device.

The gist of it is that, as of Samsung Internet version, this filter is undetectable with javascript or CSS.

The only thing you can do as a web developer is to warn users and urge them to switch to a better browser:

if (navigator.userAgent.match(/samsung/i)) {
alert("You are using a defective browser (Samsung Internet) that " +
"might not be configured to display this website properly. " +
"You should consider using a proper standards-compliant " +
“browser instead. \n\n”+
“We recommend using Firefox, Microsoft Edge, or Google Chrome.”);

I might just use it if I don’t find any other solution. LOL! :crazy_face:
Is Webflow aware of this? Anyone else aware of this?

1 Like

Hi, I have the same problem with all my websites. At this moment, I don’t have solution.

This is a disastrous thing Samsung has done. It ruins all the carefully picked colors i selected for my own dark mode website. Why would they decide they can change the colors in a non-standard way… hard fail on this one!

Same issue here.
I’m sure there must be a solution to this.

Hey guys, was anyone able to find a solution? version still has this issue.

Hello, I’m having the same issue while viewing the page in preview mode in a Samsung s20+.
Does anyone know if I can adapt some sections of the page, so the elements look visible, in case it turns the dark mode on for Samsung users?

Same issue. Also looking for solution.