Turn the lights off: The Dark Theme is here

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.

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.

“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!

Originally published at humanastudio.com

--

--

--

We design disruptive brands for organizations that aspire to have a positive social and environmental impact. Learn more at: humanastudio.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Future Hybrid Mixed Reality Design Studio Environments

Design Thinking: App Developer’s Sight

Push/pull for the poor

How to build an app like Clubhouse everything you need to know

Siemens Kids App

What Are the Characteristics of Metal Dome or Stickers with Products

Subscribing to the Agile Mindset: a Clear Opportunity for UX Designers and Developers to Make Great…

Creating a Brochure for the New UVU Woodbury Art Museum

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Humana

Humana

We design disruptive brands for organizations that aspire to have a positive social and environmental impact. Learn more at: humanastudio.com

More from Medium

What Makes a Great Logo?

what makes a great logo — featured image from Instant Logo Design

Best icons for Valentine’s Day

The Signifiers! Crafting Aksaracons for Kata.ai

Did you know about types of lines in graphic design?