Dark mode has been one of the features most requested by users since 2019, especially after Android and iOS introduced the dark mode. Beyond its visual appeal, it provides a more comfortable viewing experience, especially for people with visual impairment who may be sensitive to bright colors, while also in general contributing to reduced eye strain.

At Njuškalo, the decision to introduce a dark mode design was a natural choice, especially as we observed that an increasing 50% of all of our app users preferred using their smartphones in dark mode. This trend was consistently on the rise, making the introduction of dark mode a clear and logical step for us.

Designing the dark mode required an effort from both the design and the development team. We learned a lot on this journey, so here are some key principles we applied in designing the dark mode and notes on the impact of dark mode on our users.

Dark Mode Design Best Practices

Dark mode aims to simplify interface colors, favoring darker hues in order to enhance accessibility, particularly for users with visual impairment. It aids in reducing eye strain, preserving the mobile device’s battery life, and optimizing the interface for low-light conditions.

Our implementation of Njuškalo’s dark mode aligns with industry-leading principles, inspired by Google and Apple:

1. Dark mode is not achieved through inversion of light mode

This means that creating a dark mode for the user interface is not simply a matter of taking the existing light mode and inverting the colors. In other words, it’s not just about switching all the bright colors to dark and vice versa.

Instead, developing the dark mode involves thoughtful design and the use of a carefully curated color palette that is specifically tailored for a dark background. It takes into consideration factors like contrast, readability, aesthetics, and user experience. Dark mode is intended to provide a visually pleasing and comfortable experience in low-light or dark environments, without causing eye strain or making the interface difficult to use.

In contrast, simple color inversion might result in poor readability, unattractive design, and other usability issues. So, the statement emphasizes the need for a dedicated and well-thought-out approach to designing dark mode interfaces, rather than opting for a mere color swap.

2. Elevation in dark mode involves a harmonious blend of darker and lighter shades of gray

This refers to the visual technique used in designing user interfaces for dark mode to create the appearance of elevation, depth, and layers.

In dark mode, just as in any other interface design, elements need to be visually distinct from one another to provide a sense of hierarchy and depth. To achieve this, designers use a combination of darker and lighter shades of gray. This is important because using a single uniform color for all elements could result in a flat and uninteresting interface.

The “harmonious blend” means that these shades of gray are chosen carefully to create a visually pleasing and cohesive design. Darker shades are typically used for elements that need to appear closer or at a lower elevation, while lighter shades are used for elements that should appear further away or at a higher elevation.

For example, a raised button may have a slightly lighter shade to create the illusion of it being on top of a surface, while a sunken or inset element might have a slightly darker shade to give the impression of it being below the surface. This interplay of darker and lighter shades of gray creates a sense of depth and dimension in the dark mode interface, making it visually appealing and helping users understand the spatial relationships between different elements.

3. Avoid excessive use of bright colors on large surfaces, ensuring a comfortable viewing experience

This means refraining from saturating the design with colors that are vivid, intense, or overly vibrant. These colors can be visually overwhelming and may cause discomfort to the viewer, especially when they are widely used.

The focus is on sizable or prominent areas within the design, such as backgrounds, panels, or elements that cover a significant portion of the screen. This can also refer to notice boxes, bottom sheets and snackbars. Even though Google Material recommends using a dark snackbar with the light theme, and a light snackbar with the dark theme, we made our snackbars dark with our dark theme since they use a large portion of the screen.

The ultimate goal is to prioritize the user’s comfort and visual well-being. By using colors thoughtfully and avoiding excessive brightness in large areas, designers aim to create a design that is easy on the eyes and doesn’t cause discomfort, glare, or eye strain for the viewer. This contributes to a more user-friendly and enjoyable visual experience.

4. Limit the use of attention-grabbing call-to-action (CTA) colors, especially on dark backgrounds, to prevent eye strain

This concept refers to maintaining user focus on essential elements and avoiding cognitive overload from an abundance of buttons. It’s related to Hick’s Law, which suggests that more choices, like CTA buttons, increase decision-making time. Therefore, to adhere to Hick’s Law, don’t overemphasize recommended options so as not to overwhelm users.

5. Illustrations and other assets should be adapted for dark mode

To create a cohesive and visually pleasing experience, it’s essential that all visual elements within the design are adjusted in order to be harmonized with the dark background. This adaptation can involve altering the color palette, contrast, and brightness levels of the assets.

The reasons for adapting these assets for dark mode are as follows:

• Visual consistency: Adapting visual elements ensures that they blend well with the overall dark theme, maintaining a consistent and unified design.
• User experience: This adaptation aims to enhance the user experience by ensuring that images and assets are not too bright or visually jarring against the dark background, which can cause discomfort.
• Aesthetic appeal: Optimizing these assets for dark mode can contribute to a more aesthetically pleasing design, as they complement the dark color scheme and create a visually balanced composition.

Njuškalo Dark Mode Design & UI Standardization

For the Njuškalo app, creating the dark mode also entailed extensive UI standardization. The standardization also helped developers to have a cleaner code and enabled easier color implementation in the code.

By creating tokens and design for the dark mode, we also revamped the light mode, creating an overall more modern look. One of the most distinguishable things was eliminating the use of the CTA color blue. Instead, we adopted containers to signify interactive elements, reserving the CTA blue exclusively for primary actions such as sending messages, sending PayProtect offers, and so on.

Old design example:

We mentioned tokens a couple of times throughout the text because we primarily designed the dark mode by employing color tokens – predefined color definitions. These tokens were key in achieving UI standardization. This involved simplifying numerous shades of the same color and removing any undesirable colors, while retaining only those that contributed to a consistent and uncluttered UI.

Color tokens are semantic labels that indicate the color’s function, providing greater flexibility in color usage and system scalability.

We have defined 5 categories of tokens:

• Container
• Icon
• Text
• Border

Each token is assigned different values depending on whether the light or the dark mode is selected.

Example of a color token:

Token names should help in understanding how or when the token should be used. The suffix in the token name indicates the function of the element being colored.

Our color tokens include the type of UI element, function, or level of emphasis.

In the case of text and icon colors in dark mode, it is essential for them to be distinct enough from the color of the container in which they are placed to ensure sufficient contrast for readability.

Impact of Dark Mode on Android Users

Fast forward to nearly 3 months after launching the dark mode on our Android app, we have some new results:

• 4% of Njuškalo users use the app in the default system mode
• Around 38% of users have dark mode on their Androids as the default system mode
• After the launch, 2,000 Njuškalo users set their smartphones to dark mode
• In the first month post-launch, nearly 1,000 users actively selected the dark theme within the Njuškalo app settings

Conclusion

The introduction of dark mode on the Njuškalo platform brought about a profound transformation. It wasn’t merely about designing the dark mode; we also reimagined the light mode and embarked on a journey to standardize the entire app’s user interface, including color tokens.

All of this resulted in a more consistent and clear UI which brings its own UX optimizations. When the UI is more clear, the users can easily find what they are looking for and decide which action to take.