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@example.com) asking about the reasoning behind how they implemented Night Mode, but at the time of publication had not received a response.