Dark mode and corporate design: challenge and opportunity
You probably know this: You're using Google Maps and enter a tunnel. Suddenly, it gets dark around you. The previously bright view of the maps on your phone display changes. The application switches to dark mode or Dark Mode. A big advantage: Your display remains pleasantly dimmed, without dazzling you with bright light. Many people prefer this view, as they find the contrast more comfortable.
Many development environments also operate in Dark Mode, as their users spend long hours in front of screens every day, and this view helps reduce eye strain. Users who are on the go with their phones or are mindful of their digital footprint want to save power or extend their battery life. Dark Mode helps here as well, as displaying dark pixels on OLED or AMOLED screens consumes less power.
All major browsers have supported Dark Mode for some time now. But only with the widespread support of Custom Properties has implementation become easier and more usable. Therefore, it makes sense for website operators to offer their site in Dark Mode as well. However, this means that the corporate design needs to be reconsidered and expanded with a color spectrum.
Dark Mode: Corporate Design in transition
A good corporate design develops a strong visual identity. Companies and organizations should be recognizable through the use of design elements such as - color, form, or typography. Values and brand messages should be clearly communicated through the choice of design elements. Brand identity is particularly dependent on the choice of colors used.
From now on, designers need to rethink because Dark Mode should be considered from the start when developing corporate design. Certainly, not all designers are thrilled about this, as it means additional design work:
- because choosing corporate design colors doesn't get any easier (black/white is not the same as Dark Mode).
- because a new color scheme is needed for Dark Mode, ensuring readability and aesthetics.
- because old visual habits need to be broken, and one must be open to new perspectives.
- because a very good color concept is needed so that implementation works with fewer color variables.
- because all visual elements and graphics must be checked to ensure they are also clearly visible and have sufficient contrast in Dark Mode.
- because logos and icons must be saved as svg to allow easy color adjustment.
- because my creative freedom might be restricted, and I may have to use colors I don’t like (Design is never about me!).
The counterargument that many users expect bright interfaces is only partially valid, as Dark Mode has to be consciously activated in the browser settings. Users who enable Dark Mode know exactly why they're doing it.
Dark Mode: More accessible and sustainable
Socially responsible
For people with visual impairments, such as color blindness or limited vision, strong contrast or darker color choices help make text more readable and graphical elements clearer. But even people without impairments often find this view more comfortable. Users can activate Dark Mode themselves in their browser. As long as they don't, they won't see the alternative view.
By offering Dark Mode, you increase the usability of your website. Your users feel more comfortable, improving their interaction with your site. Satisfied users tend to be more loyal and are more likely to speak positively about your website.
Energy-efficient and sustainable
The Dark Mode saves energy, especially on devices with OLED displays, as dark pixels consume less power. A company that supports an eco-friendly approach will be perceived as responsible and sustainable. This ecological aspect is likely to become increasingly important in the future.
The Dark Mode is not just a feature, but a part of a modern corporate identity. It enhances the user experience, promotes sustainability, and demonstrates that a company or organization uses modern technology and is flexible in responding to user preferences.
Dark Mode: Here's how – briefly
The implementation of Dark Mode has been greatly simplified by the use of CSS Custom Properties (CSS variables). This method allows developers to use centralized color definitions that can easily switch between light and dark mode based on system preferences.
Here’s a code snippet:
:root {
--background-color: white;
--text-color: black;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: black;
--text-color: white;
}
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
In this code example, using a media query (@media (prefers-color-scheme: dark)), the color scheme is adjusted when Dark Mode is active. The use of CSS variables simplifies this switch, as all color values are centrally defined and dynamically adjusted through the media query.
Dark Mode in practice
As always, the cobbler's children have the worst shoes. I still need to optimize my own website. However, when looking for inspiration or examples, many successful implementations can be found at major online media outlets, such as well-known news portals or at action medeor.