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.”

These are the steps we took to conceptualize “Thoughts”: 1. Choosing the platform; 2. Searching for references; 3. What should we do differently comparing to our references; 4. How we’re going to structure our blog; 5. What thoughts are we going to share; 6. Start writing thoughts!! We had one thing in our minds from the beginning, and it was that we didn’t want “Thoughts” to be just another technical design blog. With that being said, we came up with the idea of creating what we like to call “Series”. Every Series is special to us! It’s an attempt to sharing thoughts about our project experiences, build better futures with creativity & design, and book recommendations. Our ambition is simple: to approach different perspectives and viewpoints about a subject and wishfully, to help you broaden your horizon and be a source of inspiration. But we are not writers; we aren’t used to writing creatively, but to become better writers, all we need to do is to write! Writing can be beneficial to everyone! It’s a creative process and a valuable tool for thinking and for productivity. It becomes a kind of meditation where we make reflections on ourselves. Paul Jun affirms: “as much as writing is about communicating with others, it begins with self-reflection”. The result: We see it as a win-win where both of us (you and us) can learn something from it. As mentioned above, words can be a powerful tool to communicate and spread our message. Knowing that we live in an unfair world, we still believe that we can make a difference. What can we do to change mentalities and create a better world? Well, designers have the skill set to communicate, influence, and motivate people. But to be able to communicate efficiently, good writing is key. For us, good writing means creating context and not content! But what does that mean, you may ask. According to the MasterClass Staff, “context provides meaning and clarity to the intended message“.

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.

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!