

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:
