Dark Mode: How It Works and How to Optimize for It

When it comes to dark mode (in emails and beyond), everyone’s already talked about it: there are plenty of tips and guidelines for using images, text, and colors so they look good in both light and dark themes. But let’s take a slightly different perspective.

A bit of theory

We’re used to working with the RGB color model where any color can be represented as a combination of three primary colors: R — red, G — green, and B — blue. In computer graphics, the intensity of each primary color typically ranges from 0 to 255. For example, with the minimum intensity of all three colors (R=0, G=0, B=0), you get black, while at maximum intensity (R=255, G=255, B=255), you get white. This principle forms the basis not only of the mathematical model but also of the displays we’re familiar with. Each pixel consists of three subpixels — red, green, and blue. Depending on their brightness, we perceive a certain color thanks to the effect of spatial mixing, while the absence of brightness appears as black.

When working with code or graphic editors, hexadecimal (Hex) representation of color is most commonly used, written together, for example, as #6812FC. The symbol # always precedes the code, indicating the method of assigning the value. In our example, this results in the color:

R = #68 = 104
G = #12 = 18
B = #FC = 252

In addition to RGB, there are other color models, such as CMYK, which is used for printing images. Here, C — stands for Cyan (Blue), M — stands for Magenta (Purple), Y — stands for Yellow, and K — stands for Black.

This color model also suggests "mixing" several colors to achieve the desired result.

But today we’re interested in a slightly different approach to color representation. Let’s consider another color model — HSL, which includes three components:

• Hue.
• Saturation.
• Lightness.

The tone ranges from 0 to 360 degrees; saturation ranges from 0 to 1; lightness also ranges from 0 to 1.

How dark mode works

Many email clients have an automatic feature that changes the color of the email when the user has dark mode enabled in the app (or system), so the bright email doesn't "hurt the eyes." It looks something like this:

A light background with dark text is transformed into a dark background with light text. In most cases, if the background was originally dark, it remains unchanged. And we don't just see a color inversion, but rather the tone and saturation are preserved: only the lightness is inverted. Sounds familiar, doesn’t it? =)

To solve this in the simplest case, we need to represent the color using the HSL color model and invert the last component — lightness. Lightness ranges from 0 to 1, meaning we subtract the lightness value of our color from 1. This is why black becomes white, and white becomes black. The closer the value is to 0.5, the less noticeable the change.

Let's break it down with an example

We have a button with a background color of #6A66D3 and a text color of #FFFFFF.

First, let's convert the color from hexadecimal to decimal.

#6A66D3 = R 106, G 102, B 211
#FFFFFF = R 255, G 255, B 255

Next, we need to convert the color from RGB to HSL, using the following algorithm:

Dif = Max([R,G,B])-Min([R,G,B]) = 0,4274
Lightness = (Max([R,G,B])+Min([R,G,B]))/2 = 0.6137

Saturation = Dif/(2-Max([R,G,B])-Min([R,G,B])), If Lightness > 0.5
Saturation = Dif/(Max([R,G,B])+Min([R,G,B])), If Lightness < 0.5

Saturation = 0.5527

Hue = 0, if Dif = 0
Hue = ((G - B)/Dif mod 6)/6*360, if Max = R
Hue = ((B - R)/Dif + 2)/6*360, if Max = G
Hue = ((R - G)/Dif + 4)/6*360, if Max = B

Hue = 242

In the end, we get:

#6A66D3 = H 242, S 0.55, L 0.61
#FFFFFF = H 0, S 0, L 1

To get the color for dark mode, we recalculate the lightness value by subtracting the color value from 1:

H 242, S 0.55, L (1-0.61) = 0,39
H 0, S 0, L (1-1) = 0

Converting the colors back to RGB, we get:

#302C9A
#000000

This is what it looks like:

This is roughly how dark mode transformation works in the Gmail app on iOS — by simply inverting the lightness of each color.

Instead of going through all these calculations, you can easily view the color values in RGB and HSL using professional graphic editors like Figma or Photoshop.

What to recolor

To make it work correctly, it's important to figure out what should be transformed and what shouldn’t. In web design, it's easy to identify which color is the background and which is the text. By looking at the lightness value, you can determine if the color is dark or light. So, for example, if we see light text, it would be odd to change it to dark in dark mode — it should stay as it is. The same goes for the background — if it's already dark, leave it alone; if it's light, it should be darkened.

Each developer can choose the values they prefer or experiment with them. From experience, we've found that a lightness value of 0.6 works well. If the background is lighter than this value, it should be changed. Similarly, if the text is darker than 0.6, it should be recolored as well.

In email clients, the process is a bit more complex. A progressive brightness adjustment scale is used (instead of just subtracting from 1): the closer the value is to the threshold (in our case, 0.6), the less the color will change. There's also usually a slight adjustment to the saturation.

Tools

We’ve covered the theory, but where can this actually be applied in practice, and which tools already support it?

TJML Framework and Dark Mode Testing

When professionally coding emails, it's important not only to make sure they display correctly in different email clients but also to check how they look in dark mode.

That’s why the TJML Framework has a tool for testing how emails look in dark mode, including the specific dark mode used by Gmail on iOS:

This tool uses the same algorithm we discussed earlier. What's great is that you can test not only emails created within the framework but also regular email layouts by adding them into the email body (m-body).

Pixcraft Plugin for Figma

This Figma plugin lets you create professional email templates without writing any code. It automatically converts your design into TJML code, which you can then export as a zip file or into an ESP.
Since the TJML framework is built into the tool, you get all the benefits of using it, including the ability to check how your email looks in dark mode:

Dark Me Plugin for Figma

We mentioned HSL earlier when talking about working with colors — it's a super handy approach, and we've incorporated it into the Dark Me plugin.

Using the dark mode creation method we discussed, which adjusts lightness progressively, the plugin lets you apply dark mode to any interface with a single click. For more fine-tuned adjustments, you can manually tweak the hue, saturation, and lightness for the whole layout or specific sections.