Dark theme in the NextEnergy App

UX/UI Design

Introducing a dark theme for the NextEnergy app. It’s designed to be a supplemental mode to the default theme, whilst keeping it recognizably on-brand.

Benefits

Dark themes reduce the luminance emitted by device screens, while still meeting minimum color contrast ratios. They help improve visual ergonomics by reducing eye strain, and facilitating screen use in dark environments – all while conserving battery power.

Releasing the feature to NextEnergy customers fulfills an expectation that is increasingly seen as the norm, and allows NextEnergy to keep up with competing apps.

Services

End-to-end UI design

In collaboration with

Andre Santos – Outsystems developer

Creating depth

Dark grey – rather than black – was used to express elevation and space. A grayscale was developed for this, inverting light colors to dark. For the base dark, I defined hexcode #121212 as the surface color, adopting that standard from the material design system by Google as it is thoroughly tested on various screens.

The surface becomes lighter with the application of a semi-transparent white overlay. 1. Surface 2. Elevation overlay

Translating colors and accents

The aim was to apply limited color accents in the dark theme UI, so the majority of space is dedicated to dark surfaces. While at the same time maintaining the recognizable brand colors from NextEnergy.

The primary brand color was swapped to the lilac secondary color. And darker hues for each existing secondary color, shade and muted variation were adopted by overlaying #121212 on an 8% opacity and deriving the new colors from there.

This resulted in the following color transformations.

◑ Light theme

◐ Dark theme

Testing

The newly created color profile was applied to existing components and tested on WCAG 2.1 accessibility. Further testing was done after development of the dark theme in the test environment had taken place.