Samsung Internet Browser and Night Mode: beware the dark side!

It all began with a Tweet (since deleted thankfully): "Australian Museum your website design is impossible to read! White words on a white background don’t work!" Clearly something is wrong here.

So what exactly is going on? Our design for the Australian Museum website calls for a very faint weave pattern background on a light grey page with dark text. This user is sending a screenshot of a dark page with white text and - shock horror - a white weave pattern background that of course clashes with the body copy!

Finding the culprit

A quick cross browser check reveals no immediately obvious problems:

From the partial screenshot in the tweet, it looks like the user has some sort of dark mode enabled on their device. But once again, a quick scan of the most popular device/browser combinations in their respective dark modes (or equivalent) does not replicate the reported behaviour (actually, it doesn't change the appearance of the website at all).

Hang on a second, what’s that browser icon for Samsung Android Devices in Browserstack? You know, the one you ignore when developing your site, all while a nagging voice in the back of your head tells you to be more thorough in your testing. Yes, that voice, and that browser: Samsung Internet.

AHA! We have found the culprit: Samsung Internet browser on Samsung Devices running Android 9.0 or higher when navigating with the Night Mode setting switched on. Note: As of Android v10.0 the setting is now called Dark Mode, just in case you weren’t confused enough!

The Night/Dark Mode setting on Samsung Devices is not to be confused with Dark Theme in the Android Developer environment. From the official Samsung website:

So, while Night/Dark Mode does have a similar effect as an Android Dark Theme, it would appear that it still acts independently from any Android themes that may have been applied.

What's the deal with the Samsung Internet Browser I hear you ask? Essentially, as the name implies, it is Samsung’s default browser that comes installed on all of their devices and is based on Google’s Chromium browser engine.

You mean it’s just like Google Chrome? Errr, not quite. While there are a lot of similarities between the two and they share similar levels of HTML/CSS support, in some cases Samsung Internet does it’s own thing. This notably includes how it implements the Night/Dark Mode setting. Let’s take a look at exactly how...

Digging deeper into the behaviour

I originally wanted to include a few paragraphs about what the expected behaviour should be for any Dark/Night Mode setting. But after looking at various implementations across several devices and browser plugins, a couple of paragraphs turned into a couple of pages.

The truth is, there really isn’t any expected behaviour when it comes to Dark/Night mode setting and the issue is fraught with danger which deserves its own separate article. So for this article we will just stick with what is happening on Samsung Internet without getting distracted by the broader picture.

Looking at a side-by-side comparison of the page with and without Night Mode on, we can observe the following behaviour:

• Text has its brightness increased in an inverse proportion to its original value: so any black text becomes white while coloured text becomes a brighter version of said colour. White text - which already has the maximum brightness - remains unchanged.
• Background and border colours have their brightness decreased in an inverse proportion: so anything white becomes black while colours become a darker version of said colour. Anything black - which already has the minimum brightness - remains unchanged.
• Images that are embedded inside <img> tags are left the same.
• Background images served via CSS are left the same.
• SVGs embedded using the <svg> tag have their brightness increased in an inverse proportion, just like text.

The first two points are fairly logical: if I am looking to achieve what most people would consider a dark mode/theme in all instances, then I need to lighten all text while at the same time darken all other colours which could potentially contrast with it. This way, any design that already follows the expected light on dark convention remains relatively the same.

The third point also makes sense. For most people, there is little value in having images turned into negatives, and it probably isn’t what they had in mind when thinking about a dark mode. Best to leave them as they are.

The fourth point is where things get problematic, namely when dealing with background images with text overlaid on top. Any light background images with dark text overlaid on top will fail in Dark/Night Mode on Samsung Internet browser: the text will have its contrast inverted but the background image will stay the same resulting in light text on a light background.

This wasn’t the problem in our case, however the potential is there. Essentially, once you start inverting the contrast of some elements while leaving others the same you open up a Pandora’s box leading to all sorts of pitfalls.

Which leads us to the fifth and final point which was the issue that provoked the angry tweet. Why treat SVGs like text as opposed to images? Well, I’m assuming that it’s because a lot of UI elements, such as icons and symbols, are built using SVGs. In today's world of high-resolution screens coupled with broad browser support, it only makes sense to use them as opposed to other image formats: being vector-based they can scale to any size without loss of quality.

So in this context yes, they should be treated like text when applying a dark/night mode. But of course we at the IC like to do things differently, which is where things started to fall apart.

Note: I reached out to the Samsung Internet Dev Team ([email protected]) asking about the reasoning behind how they implemented Night Mode, but at the time of publication had not received a response.

Why this was a problem in our case and the solution

In the case of the Australian Museum website, we were using a geometric weave pattern in SVG format as a background image on the page. We were embedding it directly inside an <svg> tag so as to be able to easily change the colour fill - it’s a branding thing! In all cases, this colour fill would be just a few shades lighter or darker than the actual background colour, resulting in a subtle watermark effect that did not impact text legibility.

But with Samsung internet darkening the brightness of the page background colour while lightening the background pattern itself, alternating areas of high/low contrast were created. In most cases, this resulted in very poor text legibility and breaking every accessibility rule around colour contrasts.

Of course, once we identified the problem, coming up with a solution was fairly easy. We just needed to ensure that all instances of the background pattern were displayed at low opacities. You can obtain a light grey colour on an off-white background by using black at 3% opacity. A black SVG at 3% opacity becomes a white SVG at 3% opacity in Night Mode on Samsung Internet Browser, which on a dark background does not cause any alternating areas of high/low contrast.

Everything good then, right? Well… not quite. There is one more issue we had to deal with: leaving images with text on transparent backgrounds unchanged. “Text inside an image? Sacrilege!!!” Well, yes, using images to display text is an accessibility no-no and you shouldn’t be doing it under any circumstances. But logos often do contain some text, and often they are also on transparent backgrounds:

Once again, in our case an easy fix: just use an SVG for the logo and voila, the text lightens:

Those of you with a keen eye will have noticed that the brand mark has also had its brightness lightened in proportion to its original values. Any brand guardians will probably be screaming blue murder, but between not using the correct brand colours and having your whole brand name invisible, I’ll take the lesser of two evils.

Another potential issue to point out is using CSS shapes for your icons. Unfortunately, these are likely to become barely visible on Samsung internet Browser in Night Mode. Being composed of background and border colours means they will have their brightness darkened instead of lightened while the background colour that they are displayed on will also be darkened. Dark on dark contrasts don’t work, sorry!

Conclusion

So, what conclusions can we draw from all of this? Taking a step back, I think the logic behind how Samsung Internet Browser behaves in Night Mode has a certain logic to it: most people’s expectations of a “Dark/Night Mode” would be to always have light text on a dark background with images left alone.

And while there are a few issues with this approach, most of them aren’t too onerous to overcome:

• Don’t use embedded SVGs as backgrounds
• Avoid CSS shapes
• Use SVGs for logos with type

But that still leaves us with the issue around using light background images with dark text overlaid on top. Essentially, Samsung Internet in Dark/Night Mode doesn’t allow you to do this, which is somewhat of a deal breaker in my opinion. And while it wasn’t a problem for us in this particular case, I can see myself running afoul of it very easily.

The web has evolved a great deal since the days of just having plain text with accompanying images. The wonderful world of CSS has allowed us to create interlocking designs where images and textual content can merge into each other while SVG support breathed vector-based life into our web pages.

And while I do think the developers at Samsung have their hearts in the right place, their implementation of Dark/Night Mode feels better suited for the web of a more simple era. Treat all images served as backgrounds via CSS just like you would plain background colours perhaps? Well, that just opens up another Pandora’s box best dealt with in another article.

Of course, if every browser behaved this way then this would be the defacto standard to follow but, at the time of writing, only Samsung Internet seems to apply this logic. And while its market share is by no means insignificant, the reality is that it probably doesn’t factor into the decisions many web developers are making.

So if you plan on using light-coloured images or SVGs as backgrounds in your next website, beware the dark side on Samsung Internet Browser!