News & Updates - BY Design

Dark Themes

What are they and how do they work?

Definition: A dark theme is a low-light (user interface) UI that displays mostly dark surfaces.

In basic terms, this means a website that can be switched between a light and dark theme at the click of a button.

When switched on, the background colour becomes black (or very dark) and the text becomes white. Lower contrast colours are also introduced to the palate.

Dark themes reduce the luminance emitted by device screens. They help reduce eye strain and are particularly suited for viewing in dark environments.

 

Example of use

See below for an example of the same content viewed using the light (default) theme (left), and then with the dark theme switched on (right)

Dark Themes - what are they and how do they work

Image reproduced courtesy of material.io/design

 

Principles

Material Design dark themes are defined by the following properties:

  • Contrast: Dark surfaces and 100% white body text have a contrast level of at least 15.8:1
  • Depth: At higher levels of elevation, components express depth by displaying lighter surface colours
  • Desaturation: Primary colours are desaturated so they pass the Web Content Accessibility Guidelines’ (WCAG) AA standard of at least 4.5:1 (when used with body text) at all elevation levels
  • Limited colour: Large surfaces use a dark surface colour, with limited colour accents (light, desaturated and bright, saturated colours)

Further reading: w3.org

 

Application

A dark theme can be developed for almost any website, with a toggle switch added into the upper area of the design to allow for easy switching between light and dark by the user.

Each visitor to the website has independent control of this setting, so if one customer turns on dark mode, it only applies to their device; it doesn't affect the experience for other visitors using the website at the same time.

 

Further Information

For further information relating to dark themes and their application, or to discuss implementing this technology to your website, please use our contact form in the first instance.

Secure reliable website hosting at an affordable price

Secure reliable website hosting