Dark theme shows images in negative color

[naman]

I was checking out the light and dark themes until I realized that in one of the mail, the image was looking very weird. The image was actually the complement (negative) of the original image. This is a major bug in my opinion. See the difference

What OS do you use?

[naman]

Windows 10

This is how it looks for me, also Windows 10.

Hovering over interface icons makes them white in dark theme mode.

[naman]

This is pretty weird. This breaks many images which are actually meant for a white background. The colors are messed up too. Why not just change the color to dark only in text?
I can forward that mail to you. Can you check?

I don't doubt that it will look the same on my computer dear @naman. And yes, this is very weird indeed!

[bengotow]

Hey @naman — this is caused by the email using a background-image for that hero image instead of an img tag. We use a series of two CSS filters to optimize the content of emails for the dark theme:

1. The entire email body is inverted and hue-rotated 180º (which roughly preserves colors)
2. <img> tags are inverted and hue-rotated 180º again. Because the entire email was inverted, inverting these inside the email actually changes them /back/ to their original colors.

The end result is that the email background, body, text, etc... goes from black on white to white on black, without significant color alteration. Anything with an <img> tag remains the original color. For most emails this works well (like in @artailicous's example) and avoids a "giant white block" in dark mode. But it does depend on the email using <img> tags for critical image content.

Here's the relevant source if you want to try improving it!

https://github.com/nylas/N1/blob/master/internal_packages/ui-dark/styles/email-frame.less#L7

[naman]

Thanks, ill try to reset the background-image's hue back to original one.

[invalidCards]

Also happens with Twitter's video previews:

[bengotow]

Closing as dup of #579