Skip to content

Commit

Permalink
samsung internet
Browse files Browse the repository at this point in the history
  • Loading branch information
klausbreyer committed Apr 22, 2024
1 parent 2a43225 commit 7d946ad
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 0 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
56 changes: 56 additions & 0 deletions content/posts/2024-samsung-internet-dark-mode/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
---
draft: false
categories: ["Code"]
title: "Dear Samsung Internet: Please Fix Your Forced Dark Mode!"
date: 2024-04-22
image: "darkmode-example.png"
---

**TL;DR:** Samsung Internet's dark mode ignores CSS for `prefers-color-scheme: dark`, instead renders light theme CSS and applies a proprietary transformation algorithm to simulate dark mode. This leads to unintended visual outcomes on websites, disrupting carefully designed user interfaces.

## Context

As the Head of Product and Technology at [edding AG](https://edding.com), I manage a team that owns the [easycheck](https://easycheck-by-edding.com/) product. Part of it is a mobile-only frontend for driver's license verification, so the team is used to facing continual challenges with mobile web environments. However, there is a significant issue with the Samsung Internet browser and its forced dark mode.

### Identifying the Problem

Samsung's forced dark mode, intended to facilitate nighttime reading and conserve battery life, automatically alters websites' color schemes without allowing developers to influence them. While well-meaning, this feature can distort the design and usability of web applications, especially when precise visual presentation is critical.

This became problematic when we attempted to place dark text over an animated bright video for a tutorial. The forced dark mode changed the color of the text but to almost no extent the tone of the background, making it nearly invisible against the bright background.

I have reproduced this issue in a detailed example to understand the behavior.

![](darkmode-example.png)

Try it for yourself: [Live](https://klausbreyer.github.io/samsung-internet-dark-mode/) / [Github](https://github.com/klausbreyer/samsung-internet-dark-mode).

The results:

- Everything that is behind `prefers-color-scheme: dark` is ignored.
- Everything that is behind `prefers-color-scheme: light` is rendered.
- Texts and Backgrounds are changed by an unknown algorithm.
- Videos, Images, and SVGs are toned down, which makes sense. Inverted pictures would look really stupid. The funny thing is that even when a CSS class colors an SVG, it still counts as an image resource and behaves like an image, not like text that is colored by a CSS class.

I don't know what algorithm they use, but it is bonkers and unforseable. In general, brighter colors (yellow, orange) seem to be more inverted, but other colors (blues, greens, purples) are just a little bit toned down.

![](darkmode-tailwind.png)

### The Issue of Theme Acceptance

As a heavy dark mode user (mainly on iOS), I don't have a problem with the magic that Samsung applies here. The problem is that Samsung ignores web standards, and it is not possible for developers to override this with [a preferred color scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).

### Seeking Resolution

I hope it is a bug because they mention a (in my opinion, more) correct behavior on  [Samsung Internet's blog](https://developer.samsung.com/internet/blog/en/2020/12/15/dark-mode-in-samsung-internet).

Besides that, nobody on  [Stack Overflow](https://stackoverflow.com/questions/66094087/samsung-internet-forces-dark-mode) can find it out, and  [Hacker News](https://hn.algolia.com/?q=samsung+internet+dark+mode) also lacks an outrage about this topic.

I contacted the lead developer of the forced dark mode feature at Samsung Internet. However, he has not been associated with Samsung for over four years and redirected me to his boss, whom I have now contacted.

This letter calls Samsung to urgently address and rectify their browser's forced dark mode functionality. Developers must be able to control how their sites are displayed to ensure all users, especially in specialized B2B applications like ours, receive the intended experience without compromise.

## Call to Action

I encourage everyone to try this out and visit the product they are responsible for in a Samsung internet browser (it can be downloaded for every Android phone, not just Samsung).

Also, Please challenge my code. Perhaps I have made an error, and there is a way to make it work correctly after all?

0 comments on commit 7d946ad

Please sign in to comment.