search

mdn / browser-compat-data

This repository contains compatibility data for Web technologies as displayed on MDN
https://developer.mozilla.org
Creative Commons Zero v1.0 Universal
4.96k stars 1.99k forks source link

(@media prefers-)color-scheme - doesn't work by default on Samsung Internet #17408

Open kubajmarek opened 2 years ago

kubajmarek commented 2 years ago

What type of issue is this?

Browser bug (a bug with a feature that may impact site compatibility)

What information was incorrect, unhelpful, or incomplete?

By default in Samsung Internet neither color-scheme nor @media prefers-color-scheme do anything. Instead Samsung takes the default styling and uses their own version of "Dark theme", inverting the colors automatically. To get "intended" CSS behaviour you need to change settings in experimental options Labs -> Use website dark theme - which seems a bit out of reach for regular users.

What browsers does this problem apply to, if applicable?

Chromium (Chrome, Edge 79+, Opera, Samsung Internet)

What did you expect to see?

Samsung applying automated dark mode only as a fallback - if there is no dark theme listed in color-scheme property.

Did you test this? If so, how?

Reproduction example in CodePen

Results: Default Samsung Internet settings, when using System Dark theme Chrome, when using Chrome's Dark theme

Tested on Android phone with Samsung Internet, using all combinations of color-scheme (both as css and meta) and @media prefers-color-scheme value I could think of.

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

Samsung announcement: https://developer.samsung.com/internet/blog/en-us/2020/12/15/dark-mode-in-samsung-internet

Keeping in line with the WebView implementation, Samsung Internet now provides the ‘Force Dark Behavior’ options as an experimental feature under internet://flags.

Despite being from 2020, it still seems to apply.

Do you have anything more you want to share?

Not official, but this blog has a well written description on Samsung Internet's behaviour: https://www.ctrl.blog/entry/samsung-internet-night-mode.html

MDN URL

No response

MDN metadata

No response

arusak commented 1 year ago

I have similar experience. We have both light and dark themes in our app. Which one applies is determined by the code: window.matchMedia('(prefers-color-scheme: light)').matches. Works fine in all modern browsers. However, when Samsung Internet has its 'Dark theme sites' feature enabled, this expression still returns true and applies its own algo to change colors.

It's obviously a bug in the browser. Tested in v. 19.

saprahits commented 6 months ago

Correct, this issue is specific to Samsung Internet App(Browser). I confirmed it using a Samsung Galaxy A34, Samsung Galaxy A55, and OnePlus 10T. When visiting https://www.w3schools.com/, the HTML text color displays as follows:

Tested with the below list of Browsers.

Please review the attached video for more details. https://github.com/mdn/browser-compat-data/assets/29329098/f82f283e-fb31-462a-a10a-fedd9b8a46fb