Shining the light on HTML Emails Dark Modes

<picture>
   <source srcset="logo-dark.png" media="(prefers-color-scheme:dark)" />
   <img src="logo-light.png" alt="DuckDuckGo" />
</picture>

Our base code looks like this:

<div style="color:#fff; background:#4d86eb;">
Get A Reward Cards
</div>

(Don’t use <div>s for buttons. This was a bad example for the sake of having less on screen.)

Gmail in dark mode turns it into the following:

<div style="color:#000; background:#007740;">
Get A Reward Cards
</div>

But this formula made things clearer. The result is the absolute value of the difference between our source color (Cs) and our backdrop color (Cb).

B(Cb, Cs) = |Cb - Cs|

The white text becomes…

B(Cb, Cs) = |Cb - Cs| = |#000 - #fff| = #fff

White!

The black background becomes…

B(Cb, Cs) = |Cb - Cs| = |#000 - #000| = #000

Black!

The black text becomes…

B(Cb, Cs) = |Cb - Cs| = |#fff - #000|

White!

The white background becomes…

B(Cb, Cs) = |Cb - Cs| = |#fff - #fff| = #000

Black!

But again, the mathematical formula made it a bit clearer.

B(Cb, Cs) = 1 - [(1 - Cb) * (1 - Cs)]

Which we can develop into the following:

B(Cb, Cs) = 1 - [(1 - Cb) * (1 - Cs)]
          = Cb + Cs - (Cb * Cs)

The white text becomes…

B(Cb, Cs) = Cb + Cs - (Cb * Cs) = #4d86eb + #fff - (#4d86eb)

The black background becomes…

B(Cb, Cs) = Cb + Cs - (Cb * Cs) = #4d86eb + #000 - (#000)