Dark Mode in Samsung Internet
Daniel Appelquist
Web Developer Advocate
NB: This article is contributed by Samsung Internet lead engineer Varun Paturi
Status Quo
The existing dark mode feature of Samsung Internet has gained a fair bit of popularity amongst the browser’s users since its introduction. The browser applies its own transformations upon the colors provided by the web developers, in order to convert the webpage into a dark theme. Much thought has been put into these transformations in order to give the user a pleasant experience while trying to preserve the ‘essence’ of the web developer’s original colors.
Problems with the Status Quo
That said, this way of applying browser transformations to the content without the web developer’s consent has its own pitfalls. For example, it’s difficult for the browser to know if text is placed upon an image. Since most images remain unchanged in dark mode, modifying the text could lead to visibility issues. Same goes for small images often used as icons and logos which tend to get merged with the darker background. A heuristic based image classification has been implemented to apply filters to certain images but it has limitations such as causing rendering delays and the classification itself is not 100% accurate.
New Solutions
The aforementioned issues have been mitigated with the introduction (in 13.2 Beta) of the prefers-color-scheme media query and the color-scheme meta-tag CSS property. These features give the control back to the web developers and enable them to identify the user’s preference and provide alternate styles to the content to achieve the desired theme.
Co-Existence?
It generally takes a significant amount of time for new specifications to get considerable adoption. A large number of webpages will never use these specs to provide alternate styles for a dark theme and some websites might provide alternate styles only for certain elements of the page. This makes the existing dark mode feature in Samsung Internet (or the aptly named ‘Force Dark Mode’ feature in Chrome) extremely relevant even after the introduction of the new specifications.
The Way Forward
The new specifications and the force dark mode feature will have to co-exist and the browsers will have to decide how. Android WebView provides three options to the app developers to specify how they want the force dark feature to work with the new specifications. The options are as follows:
- Force Dark Only
- Media Query Only
- Prefer Media Query Over Force Dark.
Keeping in line with the WebView implementation, Samsung Internet now provides the ‘Force Dark Behavior’ options as an experimental feature under internet://flags.
The third option ‘Prefer Media Query Over Force Dark’ is the option which will let the existing dark mode feature co-exist with the new specifications. With this option, the browser will apply the alternate styles provided by the web developer if they exist, otherwise will apply its own transformations to modify the content (Force Dark).
It is important to note that the third option will only work as expected when the web developer specifies the supported color schemes for the page via the color-scheme meta tag or CSS property (<meta name="color-scheme" content="light dark">).
Examples of the three different Dark Mode options
Tell Us What You Think!
We think this is an important feature which is going to solve several problems for browsers, empower web developers and most importantly, improve the user experience significantly. We hope to hear your thoughts, suggestions and concerns about this feature. Please test it out in our Beta and feel free to reach out to me @ (v.paturi@samsung.com).
