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. 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. Which leads us to the fifth and final point which was the issue that provoked the angry tweet. 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. This wasn’t the problem in our case, however the potential is there. 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. The fourth point is where things get problematic, namely when dealing with background images with text overlaid on top. 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. This way, any design that already follows the expected light on dark convention remains relatively the same. 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. SVGs embedded using the tag have their brightness increased in an inverse proportion, just like text.Background images served via CSS are left the same.Images that are embedded inside tags are left the same. Anything black - which already has the minimum 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.White text - which already has the maximum brightness - remains unchanged. 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.Looking at a side-by-side comparison of the page with and without Night Mode on, we can observe the following behaviour:
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |