how we made a dark theme in the app from scratch

To make a really useful feature, we spent dozens of hours and tested 2.5 thousand layouts on hundreds of devices. What we worked with in the process and what came out of it, I will tell under the cut.

Step 1. Select a color profile

To do this, we conducted research into what purposes people use the app for and how long they work in it. Then we launched a series of A/B tests and analyzed the results. Then we developed several interface options and selected shades that should be used for different situations.

What we did in the first stage:

1. The depth rule was established. Dark elements in an application should be placed further in perspective than light ones.

2. They abandoned pure black and white colors. Bright white on rich black creates a great contrast that can be very tiring for the eyes.

3. Muted the colors to reduce contrast. To do this, we reduced the brightness of colors from the light theme by six points, which were transferred to the dark theme. Then we checked that the changes made did not spoil the perception of interface elements: buttons, bars, etc.

4. Set the initial colors of the background and elements. At this stage, we defined the colors for the three states of the divider strips. We also set the color for the placeholders and hints. We took into account the relative position of the elements and looked at how these colors combine.

5. We installed two shades of color from the white palette. In the dark theme, colors are controlled by decreasing transparency. The higher it is, the grayer the color of the element becomes, because the dark background begins to shine through. If we leave this logic, then during layout the layers will overlap each other.

We selected pure shades – analogs of white with transparency turned down. We did this so that developers would not waste time and not determine colors with an eyedropper during the layout process.

Then they agreed on the concept, the color profile of the dark theme, and began to collect the messenger layouts. At that time, it was necessary to change more than 2.5 thousand screen states for three versions of the application: desktop, Android and iOS.

Step 2. Developed a dark theme for the mobile version of the application

We divided the application into several parts:

• system and regular chats;

• side menu;

• user card;

• statistics screens;

• chatbots;

• comments;

• threads;

• small elements like pop-ups, settings, error screens, placeholders, etc.

Then, according to the classification, we made a development process schedule and got to work. The video below shows a small fragment of all screen states in Figma.

The work was carried out in iterations:

1. The designers prepared the locations in dark colors – all elements received several color scheme options.

2. The design department held a call and checked the prototypes in Figma. The guys found errors, made edits and ran the tests again.

3. After working out the errors, the designers sent the layouts to engineers for layout, and they themselves took a new batch of locations.

4. When the engineers finished the layout and uploaded the locations to TestFlight, the entire team joined in screen testing. They tested the product for several days under different lighting conditions. If they found any flaws, they immediately made improvements and finalized the interfaces.

When bugs and artifacts were discovered, the team returned the application build to designers and developers to make corrections. Such iterations were carried out until they were sure that all locations were of perfect quality.

Tests for Android devices were conducted separately due to color rendering — it differed from smartphones on iOS. It was important for us that the dark theme was equally good on different screens: from IPS to OLED.

Here's how we changed the background and text colors based on the tests we ran:

1. Increased the brightness of text in chat. At first we set the brightness to 70% of pure white, but we realized that this way the text merges with the interface – it is hard to read. So we gradually increased the parameter and finally set it at 85%.

2. Made names in chat brighter. Only during the testing stage and when comparing one version of the screen with others, we realized that we needed to increase the brightness of the names to 100%. This way, we managed to balance the accents in the dark theme.

3. We didn't change the brightness of the text in the side menu. We also came to this decision during testing: we left 70% opacity for chat names and 30% for message texts.

   There are several reasons for this decision. First: the side menu is a lower layer in the hierarchy than the chat. It should not distract attention, so it is better to make it less bright.

   Second: the side menu has a higher concentration of similar elements – chat names and user names. Because of this, white looks brighter, and the contrast of the background and text is more intense.

4. Set the background color of the side menu and chat to a common black color: 1C1C1C. Although there are no impurity colors, there seems to be a slight shade of brown in the background. This optical effect makes the interface softer and calmer.

5. Approved the hierarchy of opacity and saturation of elements. We have set the following rules for the mobile version of the dark theme:

   • brightness of the main text – from 70 to 100%;

   • brightness of low priority text, such as footnotes or tooltips, from 30 to 50%;

   • Text brightness for inactive states – from 15 to 20%.

6. Reduced formatting saturationDuring testing, we found that the text highlight color from the light theme was too bright and intense to use without changes.

Swipe Features

In the light theme, we used different colors for the chat and the side menu. When you swipe, the chat is layered above the menu — so the light is layered on top of the dark. This hierarchy feels natural.

In the dark theme of the messenger for phones, the side menu and chat have the same background color – when swiping, they merge. We tried applying shadows and adding colors – both solutions looked bad.

This is what we came up with:

• When the user has the side menu open, a lighter piece of the chat window is visible on the right. Its own brightness is 3% of pure white. We put another layer on top of it with an opacity of 2%. This small element provides contrast that visually separates the chat background from the side menu.

• When the user swipes from the menu to the chat, the extra layer disappears and only the main, “normal” background remains. This way, we managed to convey the right sense of depth and hierarchy of layers.

Links, Mentions and Badges

In the light theme of the app, links, mentions, and comments have a common color — blue. But it was completely unsuitable for the dark theme — it was unclear where everything was. To maintain the hierarchy, the colors of mentions and links were made less bright.

Unlike the other elements, the badges' color didn't have to be changed – it suited the dark theme. All that was left was to change the black badge and the group badge, because their colors didn't suit.

Pop-up window obscuration

When the pop-up was called in the light theme, it became the brightest on the screen and attracted attention. This effect was achieved by darkening the main area.

In the dark theme, darkening works the same way, but it needs to be done more intensively. Therefore, we used pure black color 000000 for darkening and raised its level from 50% to 80%. This way, we achieved a harmonious display of dark on dark and were able to preserve the necessary accents.

So, in small iterations, we finalized the color scheme of the dark theme for mobile devices. And in 30 days, we completed 1200+ screen states of the dark theme Compass.

Step 3. Developed a dark theme for the desktop version of the application

First of all, we prepared two color schemes at once.

At first, we used the same patterns as for phones. The work was structured in the same way: we worked on the screen with the side menu and the main chat, then tested it in different lighting conditions. In parallel, we studied other applications in search of successful color solutions.

As a result, we made the dark theme background warm, with the addition of brown — color #1С1С1С. But then we thought it would be interesting to look at it in cold tones, and made an alternative — we added a little blue to the main color and got color #1C1E20.

Change the color of texts

As a result, we chose a cold theme and started to configure elements in it. First, we took on the texts:

1. Made the text in the chat less bright compared to the mobile version. There its opacity was 85%, here it was reduced to 70%. This was done because the computer screen is larger than the phone screen. Consequently, the flow of white light into the eyes is stronger, and they are more strained.

2. To reduce the strain on the eyes, we also lowered the opacity of names in chat from 100% to 80%.

3. Increased the brightness of chat names in the side menu from 70% to 80%. The color of the message text was not touched — it remained at 30%. Thanks to such changes, we managed to balance the shades of the elements. The chat turned out brighter than the side menu: we visually separated them.

4. The background of the side menu and chat in the desktop versions was made the same, but for contrast they were separated by a dark stripe.

When we finished working on the menu and chat in the cold version of the theme, we developed other locations for the application. And then we tested them on different screens – from Retina displays of MacBooks to LCD panels from the office. Below in the video is a piece of the testing process.

We noticed that the side menu and chat merged with each other, making it harder for the user to understand the hierarchy of elements. There was not enough contrast between these parts.

In addition, the blue shade put more strain on the eyes – some of the children noted this after several days of testing.

In the end, we decided to try out the warm version of the dark theme. But before that, we made some changes:

1. Made the background non-uniform. For the chat, we left the color #1С1С1С, and made the side menu lighter – repainted it in color #212121. This way, we managed to maintain the necessary accents: now the user focused on the darker chat.

2. Increased text opacity in chat from 70% to 75%.

3. Reduced the brightness of names in chat from 80% to 75%.

Pop-ups and hovers

We made the shading under pop-up windows denser and more saturated. Thanks to this, we were able to better emphasize the hierarchy of elements. We did the same in the mobile version of the dark theme.

But hovers are only found in the desktop version. When working in the light version of the application, when you hover over an element, the element changes color. But this did not work at all in the dark theme — it was harder to perceive the color change. Therefore, we abandoned the standard hover and developed another solution: we highlighted the icons and text of the elements in blue.

Step 4. Changed onboarding screens

Along with the dark theme, we created onboarding screens—splashes that we show to new users before they register on a smartphone.

The designers created a couple of screen mockups in Figma. We chose the one with more subdued tones and brighter layouts.

Step 5: Implemented variables and developed the final palette

When the app only had one theme, colors could be simply written into the code. But as soon as the dark theme appeared, there was a need to quickly change colors.

The designers suggested putting them into variables — assigning a common designation to two colors of one element, and switching them depending on the installed theme. Let's say we need to change the chat background color from #FFFFFF to #1C1C1C. We can write a variable for these two values. Then, when switching the theme, the variable will automatically be assigned the desired color.

The advantage of variables is that they simplify application support. If there is a sudden need to change something, developers will not have to go through multiple files and make point edits. It is enough to go to a single file that stores data on all variables and change the necessary elements in it.

Yes, it is difficult to switch to variables, but in the future it will save the team time and effort.

A similar solution, by the way, is used in iOS and MacOS. Apple developers also use dynamic colors that are tied to variables. By choosing their values, users change the color scheme of the operating system.

What inspired you when you made the dark theme?

Of course, the dark theme has been invented long before us. Some ideas or design solutions were spied on in other applications and articles, reworked and adapted for ourselves. I am sharing a list of useful things if you ever decide to make a dark theme yourself:

1. Dark theme in the application KakaoTalkIt is quite well thought out, and I spied some of the design solutions there.

2. Blog article SuperHuman. There is useful information there that is worth studying, with cases and examples. It will help you to delve deeper into the topic before starting development.

3. Collection of web interfaces in a dark color scheme. Will help you get inspired and find suitable solutions.

4. Apple's GuidelineThere is little text, so you will have to click through several links to read more.

Conclusion

Creating a dark theme is not as simple as inverting a light theme. It involves painstakingly studying the user experience: how customers interact with the app and under what conditions. Then comes a long process of analysis, multi-stage testing, and gradual adjustment of dozens of elements so that they fit together.

References are crucial – they help to find best practices, analyze them and revise them.

Thank you for reading to the end! I would be glad if you share your opinion and your own experience in the comments.