Dark mode: necessity or trend

Dark mode is now found across every type of interface. Originally, it was an option. Today, it feels like it's become a requirement. Let's separate myth from technical reality and good design practice.

Dark mode is supposed to use less energy. But is that really true? Well, it depends on the screen.

On LCD screens (still very common), the backlight is always on. Whether your interface is white or black, consumption barely changes.

On OLED screens, however, each pixel emits its own light. A black pixel is an off pixel, which means near-zero consumption. So yes, on an OLED screen, a mostly dark interface can reduce energy consumption.

One caveat: if your dark mode relies heavily on dark grays rather than true black (#000000), the savings shrink. Also, if the user has their brightness turned down low, the difference becomes marginal.

The idea that dark mode saves energy isn't entirely false, but it's mostly been popularized as a marketing or communication argument.

This is probably the most repeated argument. The truth? It's mainly a matter of contrast and context of use.

Indoors in a dark environment, dark mode is often more comfortable because it reduces the sharp gap between screen brightness and ambient light: a bright background in a dimly lit room acts like an intense light source, causing glare, repeated pupil contraction, and visual fatigue.

Conversely, in a bright space, ambient light is so strong that a dark background loses perceived contrast: reflections on the screen "wash out" the dark areas, making text harder to read.

A good example: the SNCF's new app, designed exclusively in dark mode, faced heavy criticism at launch. Many users were using it on train platforms and couldn't see much because of light reflections in direct sunlight. A good bad example that once again proves that just because a big brand does something doesn't mean it's necessarily right.

So, as you can see, dark mode is considered "better" when the context of use involves low ambient light.

White text on a black background tends to create a "halo" effect around the letters, especially at small sizes. This makes reading less pleasant and more tiring over time. To avoid this effect, you need to reduce the contrast between text and its background.

For extended reading, several studies show that light mode generally performs better for speed and comprehension. This is because our visual system is historically adapted to reading dark text on a light background (paper is, after all, a lot older than screens).

Dark mode only shows better performance in dimly lit spaces.

Some users prefer dark mode purely for aesthetic reasons. Personally, I prefer YouTube or Figma in dark mode, even though I often use them in well-lit places. Maybe because I've always dreamed of being a ninja.

Creating a dark interface can also be a branding choice. If tomorrow you're redesigning a "dining in the dark" restaurant's website (yes, my example is a cliché), you'll probably go for dark tones, even though the site will often be viewed in well-lit environments. You won't spend hours reading on that site anyway, so it's fine.

If your interface offers multiple modes, which one should be the default? Ideally, defer to the user's operating system. That way, their personal preferences are respected (which often depend on the time of day and, therefore, natural light).

Of course, still offer them the option to switch manually if they want to.

There are several subtleties to consider when building a solid color system. Let's go through them.

If you assign "primitive" colors directly to your elements, you'll have to change them one by one when switching to dark mode. By adding a layer called "semantic," you assign roles to colors instead of just colors themselves. Thanks to this systematization, you'll only ever need to switch one mode.

Start by creating a "Primitives" collection. These are your base colors.

Then create a "Semantic" collection. These variables represent roles, which reference colors from the "Primitives" collection.

Define two modes, and assign the correct primitives. This is where it's less straightforward than it looks. It's not enough to simply invert the colors. A card on a background needs a lighter shade to feel closer and stand out. If you just invert colors, in dark mode the card ends up darker than the background. So you need to plan for this and adapt.

You're no longer designing a system of "simple colors" but a system of roles. This method has other benefits too: better maintainability, more flexibility, and a shared language with your developer friends. It takes a bit longer to set up, but it pays off in efficiency afterward.

In dark mode, colors often appear more intense. It's a good idea to adjust them to achieve a perception similar to light mode.

Also remember to re-check that your contrast ratios are sufficient between each text and its background, for accessibility reasons.

In dark mode, shadows are much less visible. It's therefore essential to establish hierarchy rules that don't rely solely on shadows. Otherwise, you risk ending up with this problem:

Favor background changes or borders to define areas that need to be delimited. That way, the boundaries between elements stay clear regardless of the mode:

It depends on your product and your context of use. Questions to ask yourself:

Dark mode isn't a marketing bonus. It's an experience choice.