Dark Theme: One site, two faces

Temi Light e temi Dark

Increasingly popular, the dark interfaces of operating systems and apps allow in particular not to strain your eyes while using the devices. But is it possible to have two versions of the same site one of which adopts a dark theme? Yes, absolutely yes.

What to do and how to do it

Creating a dark layout graphically requires a lot of effort, even if you already start from the light version as a base. Before proposing the “double face” site to the customer, it is important to know how to move around.

Why is it challenging to create a dark template? If you think that reversing the colours is enough, you are making a mistake.

Here are the key points to follow:

Nothing exceptionally new to the experts, but let's review them, because a well-designed design will benefit the website.

Contrast between text and backgrounds

One of the challenges that the graphic designer faces punctually at each project is the choice of the colour palette. The pages must be beautiful to see, they must be able to communicate, but above all they must be easy to read and with the CTA clearly visible. Otherwise, the user leaves the site in seconds.

The correct contrast between text and background is a requirement of W3 in its accessibility guides. A text to be readable must have a recommended minimum contrast of 3:1. However, not all our eyes are the same. For various reasons (including ageing), several people suffer from loss of contrast and in this case the minimum recommended contrast ratio is 4.5:1. A page that respects this ratio gets double AA.

Who is the target of our site? If we want our pages to be targeted also to those people who use reading support technologies, the AA is not enough. We need to adopt a higher contrast value, which is 7:1. If this value is respected, the page will have AAA.

For those who are interested in going deeper into the subject, I suggest reading the full report.

Optimize the colour game

The right colour superimposition is also important. To explain the concept, I prepared a comparison between four pop-up windows.

Colour difference in an example
  1. The first example shows a pop-up with a light background that stands out well with overlay. This is the version that has been prepared for the main version of the site, the light version;
  2. If we simply used colour inversion, the text would be readable and get a triple AAA. The result, however, is not optimal because the eye would be distracted by the overlay;
  3. The third pop-up is acceptable and the overlay does not create distractions, because depth has been created; it's good but can you do better?;
  4. The fourth pop-up combines the colours of our palette but to get the triple AAA the background of the pop-up has been lightened slightly.

The commitment to creating a quality layout is high, creating two requires an additional dose of effort.

Examples of dark themes

You can test the power of dark themes applied to the web by activating Dark Mode on your OS and using the DuckDuckGo search engine or even browsing this same site.

Compatibility

Compatibility is high (to date with a coverage of about 75% of users) and works on most popular browsers. On recent Apple systems (macOS, iOS, and iPad OS) and on Android 10 the possibility to choose the light or dark look is already present simply by changing a setting. Edge needs to wait for the next Chromium-based version.

FAQ

With dark themes, is it possible to have colour variations even between mobile and desktop?

Yes, you can combine the colour scheme with the resolutions, so you have two different results depending on the device used.

My theme is already dark, can I have a light theme instead?

Yes, the CSS instructions also allow you to use the Light setting.

Development

The implementation of the Dark theme in a site does not require complicated stratagems. With CSS alone you write the necessary instructions and the web pages will adapt to the user's choice (both if he has chosen to use the Dark OS and only the browser).

@media (prefers-color-scheme: dark) {
    // CSS instructions for dark theme
}

@media (prefers-color-scheme: light) {
    // Alternatively, CSS instructions for light theme
}

Once you've written all the instructions, of course you need to do the browser compatibility tests as usual to check that everything works fine.

Dark themes have been added among the optional services that can be requested in the front-end development of projects.