Designing for Dark Mode

In the communication era, visuals are everything. Colors and design define the internet-driven interactions of our modern age. Whether for aesthetic or physiological reasons, all our devices and social media now come with a distinctive option that presents a challenge for web designers: Dark or Light Mode.

When computers became available to the general public and entered our classrooms and daily lives, dark mode was the default. The first programmable computer, the Manchester Baby, used technology similar to that used in radars. That early technology, used in the 1970s and 1980s, sported black backgrounds with green text (sometimes the text was amber or white). Sounds Matrix-like? It actually was.

In the early days of information technology, the term "dark mode" did not exist. The technology available then could not light the whole monitor, so the screens were dark. Later, the idea of making our monitors look more like paper prevailed, and the screen became light.

In the last few years, however, the "dark mode" or "night mode" has become increasingly popular, especially when technology moguls like Google or Apple made it available on their devices. Apps such as Instagram, Facebook, and Twitter are now compatible with dark mode.

What is "Dark Mode"?

In Apple's words, "Dark Mode" makes foreground colors stand out against darker backgrounds. It is simply the ability to change your screen to black rather than white, depending on the time of day or the user's preferences. 

Whether you are an iPhone or Android user, your phone settings can be dark or light, as do almost all social media platforms and most online software, like Skype or Slack. It is not just a passing trend but a meaningful evolution in design.

Using Dark Mode Has Practical Benefits

Working or reading with a dark background design presents benefits other than being cool or trendy. The darker background reduces eye strain, particularly in poorly lit conditions or after long hours of reading. There are more profound physiological repercussions since prolonged exposure to bright screens impacts the secretion of melatonin, the hormone that induces sleep. That is why avoiding reading on your phone or turning off the screens in your bedroom before sleep is recommended.

Dark mode can help your battery life since a darker setting on your screen requires less energy.

Light Mode is not as Trendy, but it has its Perks

While these days it seems all the hype goes to dark mode, light mode has its advantages. For starters, light mode is easier to read during the day when there is plenty of sunlight. 

The strongest contrast setting improves the visibility of text and makes it easier for people with visual impairments, such as low vision or color blindness, to distinguish between text and background elements.

Adding Dark Mode to your Interface

There are several factors to consider when designing in dark mode. If you choose to offer it, follow these tips and tricks to ensure your users enjoy all its benefits.

Tips for a Design that Works in Dark Mode and Light Mode

Implementing a dark mode environment will make your design look sleek, sophisticated, and stylish and, under some conditions, will reduce eye strain. However, there is more to it than just inverting the colors in the palette. You must pay particular attention to layout consistency, contrast, hierarchy, and readability. The trick is to use modified contrast based on your existing branding. Defining primary and secondary colors and colors for surfaces, including page backgrounds and components, is an excellent place to start.

Pick your Color Palette

It all starts with the colors. While dark mode deals primarily with darker shades, picking a suitable set of contrasting colors for text, links, buttons, and other design elements is essential. 

Consider the Whole System

You must consider every component, including the color palette. You also need to rethink how fonts, icons, and other graphical elements will appear against a dark background. 

Use desaturated colors

Saturated colors are dense and vibrant and don't contain any gray. However, desaturated colors are more comfortable against the dark background for the eyes.

Always keep the brand in mind

Dark mode requires dark colors. Even if your brand colors are predominantly lighter, you can still use them in key elements such as the logo or branded buttons to stay on brand.

Pure black is not a great idea

It might come as a surprise, but dark mode almost never uses true black since it can affect readability. In designing dark mode, it's best to use dark grey as the background. This choice allows for the further use of shadows, adding depth to your design.

Pay attention to Text Contrast

Be very careful with the contrast of your text against the background, or you might risk producing an unreadable design. WebAIM or Coolors are effective contrast checkers that can determine whether the color contrast ratio is sufficient.

Use Shadows Correctly

In light mode, designers use shadows to convey elevation. However, it is difficult to get the shadow effect in dark mode since the whole environment is dark. Elevation is an effective tool. The higher a surface's elevation, the lighter the surface gets. If you still want shadows, use dark gray as a background color.

Users love having options. Make sure you include the option to shift between dark and light modes, and give your users the chance to use the one they feel more comfortable with at any time of the day.