Streaming live at 10am (PST)

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
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 13.0.1.64, 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?