Dark Mode: how to come over to the dark side

We share our experience of adding a dark mode to an app to save you time and effort.

Image designed by alconost.com

This article has been written by Redmadrobot Design Lab. Translated and reposted with permission by Alconost Inc., professional translation and localization company.

Late last year iOS and Android 10 were released with support for automatic dark theme switching. We decided to add a dark mode to the Rostelecom Key app we were then working on. The process was not without its hiccups. Here we share our experience to save you time and frustration, should you find yourself in our shoes.

Why create a dark theme?

You might be inclined to think that this is just another fad. But there’s more to it than that.

A dark theme is a functional improvement. It is necessary for apps that are used in low-light conditions. To understand why let’s take a closer look at how our vision works.

If we leave a dark room and enter a brightly lighted one, we are momentarily blinded, but within 4–6 minutes, our eyes acclimate to the new lighting. When we go from a brightly lighted place to a dark one, however, that process takes more time — 30–45 minutes on average.

If a person has to constantly shift his gaze from a bright app to dark surroundings, he will swiftly acclimate to the bright display, but acclimating back to the darkness will take longer.

For this reason, certain apps, such as a GPS, launched dark themes even before operating systems did, with support for automatic switching. When a person is driving at night, it’s important that the GPS screen does not distract them from what’s happening on the road.

In our case, the RT Key app is a cross-platform service for smart home device control — apartment buzzers, driveway gates, outdoor, and entryway security cameras. Residents employ it both in the daytime and at night.

It’s worth noting that the dark theme also helps conserve battery (for certain types of screens — OLED/AMOLED, but not LCD). And in the long term, it may even delay the onset of nearsightedness.

Coming over to the dark side: a step-by-step guide

If you are just hearing about dark themes for the first time, you can start out by reading the articles in the Human Interface Guidelines for iOS and in the Material Design guide for Android. The articles break down in detail on how colors and layers interact with each other in night mode. Now let’s take a look at our tips:

1. Prepare your mockups and put together a UI kit

A UI kit significantly speeds up the work of the designer and developers. Ordinarily, we put one together immediately after approval of the visual concept, using the example of several primary app screens. The UI kit includes:

• A color guide of styles for the usual state of elements, hovers, and color for inactive elements, inputs in focus, and so on
• Text styles
• All interface elements (buttons, text fields, list elements, header blocks, etc.) in various states and situations in the form of master components
• A black icon set
• Illustrations

You can view the UI kit for our app on Figma.

All subsequent screens are then compiled using ready-made components. But when exporting drafts from Sketch to Figma our UI kit took a serious hit: we ended up having to update it, re-specify the color style for each element, and recompile the screens from the components.

2. Agree on the names of colors

To make it easier for designers and iOS and Android developers to communicate, we decided to have universal color names for both platforms. In the previous version of the UI kit, we used no-frills naming conventions for the color styles, numbering them C1, C2, C3, etc. This proved less than convenient: in discussions, everyone referred to the colors not by number, but by hue: purple, orange, black, etc.

With the advent of the dark theme, however, it became impossible to use hues in the color names. For example, white background color in the light theme would be replaced with a dark one. A new naming convention, therefore, had to be adopted.

After several meetings involving the whole team we determined that the color name had to depend on its purpose, and should consist of the following parts:

• Purpose of the color, or of the element in which it is used
• Degree of priority of use (optional)
• State of the element, if applicable (optional)

At left are the names of button colors in their normal state, when pressed in iOS, the ripple color in Android, and for inactive buttons on both platforms. At right are the names for texts on various surfaces.

Basically, if your project does not yet have a UI kit, and ordinary colors are specified instead of color styles, it’s time to tidy up your drafts.

3. Select colors for the dark theme

To avoid wasting precious time, we did not work through all the drafts with the dark theme, instead selecting only a few screens with fundamentally different components. Using them we selected suitable colors and added them to the palette.

Then the developers updated the colors in the app code and created a test build for us, and we examined how the theme looked when live. If errors were discovered, the drafts and palette were adjusted.

Katya Rokityan, Redmadrobot designerю

3.1. Background color

Redrafting should begin with the background color, as it takes up most of the screen. The Material Design guide recommends selecting a neutral dark gray (#121212) as the base for the background color. Unlike black, it leaves space for creating screen depth.

The neutral dark grey did not look good with the purple brand color, so we followed the Material Design guidelines. The authors recommend overlaying the grey #121212 background with the brand color at 8% transparency.

Neutral and branded background colors in the dark theme

In addition to the primary background, we have cards that are slightly “raised” above the surface. For dark themes the Material Design recommends creating the effect of elevated elements by lightening the background: the closer the card to the user, the lighter.

Suitable colors can be selected by overlaying a semitransparent white layer on the background color. We did just that.

3.2. Creating a basic palette

When creating a branded dark theme, Material design recommends replacing colors with less saturated ones of a similar hue. For RT Key we use purple as the trademark color.

When we attempted to lighten it following the Material Design formula, the hue was rendered pinkish. The original trademark color appeared “bluer,” so we altered its hue manually.

The hue that resulted when we applied a white overlay was too pink, shifting the overall effect toward blue.

In the light theme, we used a single purple color for large buttons, line icons, and the navbar. When selecting the colors for the dark theme we were unable to find a purple hue that looked equally pleasing in all these forms.

The navbar and large buttons in the lightened purple version proved especially distracting from the content. But if we decreased the brightness, the line icons were lost against the dark background.

In the initial light theme, the saturated purple color looked equally pleasing on large blocks with white text and on subtle line icons against a light background. But with the dark background, everything is thrown off.

In both dark and light themes, we ended up having to replace the initial color with three colors: one for contour icons, a second for large icons with background, and a third for the “corner space” on the home screen and the navbar on the others.

We replaced one purple hue with three different ones — a major improvement.

In addition to purple, we also used orange, yellow, turquoise, and red: orange for call-to-action elements, yellow for notifications, turquoise for operation confirmations, and red for errors.

When we lightened these four colors, following the Material Design advice, the app’s contrast changed radically compared to the light theme. We had to diverge from the guidelines: instead of lightening the orange, turquoise, and red we darkened them. The yellow was left unchanged, as it took on a “dirty” look when darkened.

3.3. Peculiarities of the iOS palette

In iOS, you can set a tint that is applied to all interactive elements: buttons, icons, switches, etc. For example, the iPhone settings are blue, while the Clock app is orange.

In our light theme, the tint coincides with the large button color, but in the dark theme, we made it slightly lighter so that the line icons would be easily distinguishable against the dark background.

A tint in the dark theme

iOS includes the ability to change the color of interactive elements when pressed. This is useful, as it is immediately clear to the user whether or not the app has reacted to his or her action.

By default, when pressed the color becomes semitransparent. It occurred to us that it would look more interesting if the button appeared to recede — that is, grew darker — when pressed.

3.4. Peculiarities of the Android palette

In Android, when an interactive element is pressed, a ripple effect is produced, starting at the point of contact. By default, the ripple slightly darkens the initial element; we however wanted to make it lighter.

The ripple effect in the Android app.

Android also has its own way of rendering the status bar and navbar. The status bar is where notifications, signal strength, remaining battery life, and the time are displayed. The navbar is a panel where the buttons for “back,” “home,” and “recent apps” are located.

Since the advent of smartphones with large displays stretching to the borders of the device, containing camera notches and pinholes, Material Design has introduced the “edge to edge” concept. The basic idea is that design service elements should not encroach on useful screen real estate and that as much of the screen as possible should be allotted to useful content.

For this purpose, Android has developed support for a transparent status bar and navigation bar. The reason is that these small panels are of different heights on different phones. Before edge-to-edge support was a thing, if we assigned them a transparent background they would end up unattractively overlapping the screen content on certain devices.

Today material components contain system-defined offsets: developers can designate the size of the status bar and navigation bar and set a corresponding offset for the content. This is why Material Design formerly recommended selecting a non-transparent background for the status bar and navbar, but now recommends the reverse.

It’s important to bear in mind, however, that not all supported versions of Android allow you to set icon colors in system components:

• Prior to 6.0, icons in the status bar and nav bar are always white.
• 6.0 and above allow you to set whether status bar icons are white or black, but the navbar will behave as in earlier versions.
• From version 8.1 and on you can select icon colors for both the status bar and the navbar.

To avoid odd-looking overlapping onto content in the Key, we did the following:

• In older versions of Android prior to 6.0, for both panels we set a black background with 50% transparency — white icons look good against it.
• In 6.0 through 8.1 the navbar retains the semitransparent black background, while the status bar is completely transparent.
• From version 8.1 on the background of both panels is completely transparent.

If for some reason you’re not prepared for this kind of edge-to-edge support, it’s best to make the status bar and navbar universal. With edge-to-edge support:

3.5. Check element contrast

Before confirming the dark mode color scheme and moving on, check whether there is sufficient contrast. The fact is, many people, especially those with less than ideal vision or a poor screen, or if they’re using the app in bright sunlight, will have a hard time making out elements that only weakly contrast with the background. This is especially true if these elements consist of thin lines, such as text and line icons.

It is best to check contrast by testing: open the interface on a smartphone, using Figma Mirror or similar software, and go out into bright sunlight (the dark theme is intended to be used in the dark, but there’s nothing to prevent people from using it in bright light).

It is also helpful to have your app checked by people with vision problems (nearsightedness, farsightedness, color blindness). If this is not possible, you can test the contrast on the website contrast-ratio.com or using a Figma plugin.

3.6. Illustrations and animation

If your app employs illustrations, for the dark theme they will need to be re-colored. Saturated colors that look great on light surfaces can appear jarring on dark ones, making them hard to interpret. Use less saturated hues.

The dark theme needs its own versions of illustrations and animations, using dark colors.

How to submit for development

In our work, we employed a combination of Figma + Zeplin. This may seem strange, but our whole company had switched to Figma from Sketch in late summer of 2019, just before starting to work on the dark theme. To speed up the developers’ adaptation to the new tool, we continued using Zeplin, which resulted in several surprises.

Zeplin’s palette does not allow you to create color styles with identical HEX values. This meant that we had to slightly, almost imperceptibly, alter the purple HEX value for the light theme.

It turned out that not a single designer tool, including Zeplin, supports dark themes, meaning that they do not allow using multiple color palettes in a single project. So we had to find a workaround. For example, we created two projects: one with a light palette, the other with a dark one.

Daniil Subbotin, Redmadrobot iOS developer.

1. Peculiarities of iOS dev

The next surprise Zeplin had in store for us was this: it only allows you to export a single palette to an Xcode project. It’s either light or dark — not both. When attempting to export colors from the dark palette, Zeplin simply replaced all the light colors with them. We began importing colors by hand, copying the HEX values, and did the same for images.

After considerable headaches I finally wrote a utility that uploads both color palettes directly to the Xcode project, using the Zeplin API. This vastly simplified things. The designer notifies that a new color has been added or an old one modified, I launch the script, and all the changes are automatically pulled into the project.

Daniil Subbotin, Redmadrobot iOS developer.

2. Peculiarities of Android dev

In Android, the dark theme is accessible on all OS versions (we tested them starting with version 5). But switching to it in the system is possible only in Android 10, so it makes sense to add the ability to switch to it manually in the app.

We added the following theme options: always light, always dark, auto-select depending on power saving settings (Android 9 and below), and auto-switch depending on system settings (Android 10 and above).

It’s important to bear in mind that the app theme selected by the user will not be saved in the system. It must be remembered internally and activated each time the app is launched.

Vladislav Shipugin, Redmadrobot Android developer.

Android has its own system of colors for material components (buttons, app bar, text fields, etc.). Material Design color guidelines.

It’s important to compile your palette from the Material using the app theme description. Here is an article that will help your Android developers figure out how to do this. But even after this, the problem of incorrect colors may remain. To fix this you can describe the style of a specific component.

Maintenance and continuing development

Since we developed the dark theme we’ve added several new features, the app has acquired tablet users, and Rostelecom’s product office has started thinking about releasing the RT Key app as a white label for developers — using the trademark colors.

We realized that the current design version developed for the MVP launch needed to be reconceived both structurally and visually. We completely reworked the app structure with an eye to the features set to appear over the next two years, added a dashboard for quick access to the most popular functions, and got rid of eye-catching trademark visual elements (such as the home screen corner and the colored navbar).

Here the thorough work invested in the color system made it possible to preserve it almost entirely during this total redesign of the app.

Olya Sartakova, Redmadrobot art director

Second app design version using the same color palette:

By the time the second version was launched, we had painlessly switched to Figma. The utility I had originally written for Zeplin I adapted to Figma. We now update the colors, icons, and pictures in Xcode and Android Studio in a single click. You can download our utility here.

Daniil Subbotin, Redmadrobot iOS developer

Conclusion: like us, only better

If your app needs a dark theme, it’s best to incorporate it from the start, immediately after approval of the visual concept. This will help you avoid nearly all the problems we encountered. Here’s how:

• Put together a UI kit.
• Work out a color naming system or use ours.
• Select a branded background color.
• Select hues for the primary and secondary trademark colors.
• If yours is a cross-platform app, compile a list of differences between the iOS and Android color schemes. Also, check whether manual dark theme settings will need to be added to the Android app.
• Check the contrast of the colors selected.
• Prepare illustrations and animations for the dark theme.
• Update the UI kit.
• Use our utility to submit elements for development.

Useful resources

To learn more about dark themes:

• For more on the theory of color: Johannes Itten, The Art of Color
• For more on how different colors interact: Josef Albers, Interaction of Color
• A quick introduction for those with no time to read up on theory: Material Design guidelines for creating dark themes
• The same guidelines for iOS
• Session with WWDC 2019 on dark theme design for iOS

And a few useful tidbits for developers:

• Session with WWDC 2019 on dark themes for iOS
• Working with material components in Android

Alconost is a global provider of localization services for apps, games, videos, and websites into 70+ languages. We also make advertising and educational videos.