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

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.
Anyone?

Hey guys, was anyone able to find a solution? version 20.0.0.65 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.

This is the most retarded thing ever. And apparently apple browser does the same, as if we didn’t have enough to deal with, now we have browsers that completely annihilate the designer’s hard work as irrelevant, as if the way a brand chooses to present itself is something arbitrary that a browser can mess with. Yes, you bet I want to control the appearance of my sites. Why would I leave that to chance? Appearance is everything when it comes to brand identity. I have nothing but contempt for the notion that I should respect user preferences when the result is absolute crap and completely random. I have PNG illustrations that are meant to be displayed over a white background. I have dark sections, I have light sections, I have SVGs whose fill colour is defined in CSS for white backgrounds, I have sections that use images as backgrounds, and the dark mode turns everything into a big pile of sh*t. I’m not building a new website to accommodate that, and I have no guarantee that that would work either. If the geniuses that came up with this retarded idea think it’s so great, maybe their users deserve the experience they provide.

@David_Martins - Nice /rant but we can’t do anything about what browser devs implement or how.

You can read up on color-scheme - CSS: Cascading Style Sheets | MDN to leverage some control over the outcomes.

HI. I was able to fix this problem making the text color a gradient.
From the style section, add a gradient to the background of the text (just make all the colors the same if you just want a solid color text) and set the clipping to 'clip background to the text

I hope this can be helpful

I have a solution to this problem.
@Yuma_Heymans @flyingbrokenarrow

Open “Samsung Internet Browser”
Open “Settings” (gear symbol)
Scroll to find “Labs” and open Labs
Enable “Use website dark theme”

Congratulations :confetti_ball: :partying_face:




Kudos to your effort, it really help me. My website got similer issue and you just open some new options for me.