Turn the lights off: The Dark Theme is here

by João Candeias

Published Dec 07, 2021

Sign up for newsletter ↗

Turn off the lights, relax, and keep your energy up. The dark theme mode is an aesthetic choice and a growing tendency in design. Brands like Microsoft, Apple, Google, or Facebook have already joined the dark mode design trend. To introduce our new “No Secrets” series, in this article, we will address why we use the dark theme, the pros & cons, and recommendations on how to apply it.

We need to understand first what the dark theme, also known as dark mode, is. By the name itself, we can take some clues already. It's a dark color design for the user interface (UI) of websites and apps. To give you an example, imagine the “classic” appearance of a text-based UI, like Microsoft Word or even Google Docs. These types of apps, by default, use dark-colored text on a white background to recreate the appearance of handwritten text on a white sheet. Well, the dark theme is the inverse: is the application of light-colored text on dark surfaces.

But actually, dark mode is not anything new!

It has been around longer than we tend to might imagine. For those who watched Matrix, remember the “digital rain” part — a code raining down on a black background. That happened because first computers used a low-light theme by default.

The back-light technology was not developed to the point of lighting up an entire screen without burning out. This darker look went out of fashion within the 80s in favor of black text on a white background.

So why do people are starting to switch back to the dark theme?

"Darker themes help to extend the device's battery life. This means that your equipment will use less light, so require less electricity, which is helping the planet.”

At Humana our goal, including to get client satisfaction, is always to focus on being a force to create a better world. For that reason, we decided that it was time to turn off the lights! The reason behind this is simple. Studies have concluded that darker themes help to extend the device's battery life.

This means that your equipment will use less light, so require less electricity, which is helping the planet. Based on this fact, we decided that it was time to change and use a black theme in our presentations and website to save energy. But there are more pros to it!

As screen technology has grown and panels got brighter, concerns and complaints about vision health were highlighted. The rising of the Computer Vision Syndrome(CVS) — a syndrome known for causing eye pain, blurred vision, double vision, and more — led, in part, to increase the interest in a night mode design. A dark theme, not only helps against eye strain, but also creates sufficient contrast to make readability easier. We understand that white light and colors tend to user attention, which increases the hardness of a task. But, this can be answered by the application of a dark theme. This way, we can focus the user's attention directly on the content intended. Regarding design, the dark theme has its disadvantages too.

When not applied correctly, the night mode can make text difficult to read, especially with long pieces of content. As dark themes work fantastic in low-light situations, in bright lights, that doesn't happen. It can be challenging since the contrast will force you to strain your eyes to see the text. Another disadvantage is about shrinking the space. In other words, it can make space feel smaller. This might not be ideal if the purpose isn't conveying a simple and spacious design.

As screen technology has grown and panels got brighter, concerns and complaints about vision health were highlighted. The rising of the Computer Vision Syndrome(CVS) — a syndrome known for causing eye pain, blurred vision, double vision, and more — led, in part, to increase the interest in a night mode design. A dark theme, not only helps against eye strain, but also creates sufficient contrast to make readability easier. We understand that white light and colors tend to user attention, which increases the hardness of a task. But, this can be answered by the application of a dark theme. This way, we can focus the user's attention directly on the content intended. Regarding design, the dark theme has its disadvantages too.

When not applied correctly, the night mode can make text difficult to read, especially with long pieces of content. As dark themes work fantastic in low-light situations, in bright lights, that doesn't happen. It can be challenging since the contrast will force you to strain your eyes to see the text. Another disadvantage is about shrinking the space. In other words, it can make space feel smaller. This might not be ideal if the purpose isn't conveying a simple and spacious design.

“Before opting for a lower color choice, we must first consider brand fit, cultural compatibility, and color psychology, as well as the emotional impact.”

A low-light design can work anywhere. From logo design to branding or website, this design trend can help a brand move forward. However, not all projects are appropriate for dark mode. Before opting for a darker color choice, we must first consider brand fit, cultural compatibility, and color psychology, as well as the emotional impact. If a brand wishes to use a wide range of colors, lighter colors work better than deeper shades. It’s easier to pick a range of colors that fits better with a lighter color palette rather than a darker one.

After all, it's a complex balancing act.

When it comes to design with darker colors, the major element is to achieve contrast. A dark surface doesn't mean only applying true black (#000000) on backgrounds. In fact, dark gray can achieve the same look and feel as pure black.

The difference is that the soft contrast between text and surface allows users to focus easier. Dark gray backgrounds also enable the use of a deeper range of colors in a design by achieving greater depth through shadows and elevation. As a result, a dark mode isn't always black and white. It might be distinct and tailored to the company's or client's preferred color scheme.

Life at Image

It's now time to share some of our recommendations that can be helpful to ensure that the dark mode is well applied:

  1. Keep in mind that darker themes don't work with every brand. This means that before spending the time and resources applying a dark theme design, it's needed to study the brand's story, brand character, and color palette. You need to ask yourself if a dark background helps a brand tell its story more effectively? Does it help to highlight product features?
  2. Establish a sense of depth by using tones and colors to create a hierarchy of items within your color palette. Because of the dark background, darker colors will have less visual impact, while brighter colors will have the most.
  3. Stay away from very saturated colors. For those unfamiliar with this term, saturation refers to the color's intensity. The more saturated a color is, the more vibrant it is. The less saturated it is, the grayer it will look.
  4. Depending on the context, colors evoke different feelings. Make sure your color scheme sends the right message to your target audience.
  5. Maximize the use of white(or, in this case, dark) space. It gives elements plenty of room to breathe.
  6. If you are already designing a minimalist project or the design aesthetic is going in a minimalistic path, consider dark mode. When done well, a dark theme design can captivate an audience, it can be remarkable, and communicate your brand's story very well.

Keep in mind that darker themes don't work with every brand. This means that before spending the time and resources applying a dark theme design, it's needed to study the brand's story, brand character, and color palette. You need to ask yourself if a dark background helps a brand tell its story more effectively? Does it help to highlight product features?

“This isn't only about style and personal taste.”

Even though dark themes have been present for quite some time, a “dark revolution” is only now beginning. It's the right time to turn off the lights and let your imagination run wild. But keep in mind that this isn't only about style and personal taste. Some design choices, such as a color palette, can have a tremendous impact on the clients. So nothing is more important than remembering the design basics. Last but not least, attempt to imagine how people would use your product and make sure you're designing for your client's context and wants.

Ready, set, go-dark!