iOS Light & Dark Theming

HCSS

With the release of Apple’s iOS 13, iOS users are able to switch their phone to dark mode. To accommodate this new feature, we needed to update our color palette to include a dark mode theme across all of our iOS apps.

This case study focuses on my approach to understanding dark mode and creating a flexible and accessible dark theme palette that could be modified and applied across our various mobile products and branding color palettes.

Role

UX/UI Designer

Methods & Tools

Explorative Research
Figma

Timeline

4 weeks

Resources

Google's Material Design Guidelines
Apple's Human Interface Guidelines
Figma

The Challenge

The introduction of Apple's dark theme excited our users but posed a challenge for implementation.

Apple introduced dark theming with the iOS 13 version. With dark theme, apps have the opportunity to create an alternative color system that helped reduce eye strain and matched with the user’s entire phone UI. For HCSS, this was extremely important, as many of our users are construction workers who operate under different environments, both indoor and outdoor. By offering dark theme across our iOS apps (iPhone and iPad), our users can carry out their work in a more safe manner, especially when working at night.

The Challenge

How can we efficiently apply dark theming across each of our uniquely branded iOS apps?

The Solution

Using industry guidelines, create a standardized design system to systematically generate complementary dark theme palettes for each branded product

Explorative Research

Google and Apple Guidelines

To familiarize myself with dark theming and accessibility standards, I reviewed guidelines from Apple's Human Interface Guidelines and Google's Material Design

Project Goals

From my learnings, I created the following goals for this project:

01: Use grays to convey depth

Dark theme utilizes shades of gray, not black, to convey various elevations and space in the UI

→ How can I use gray, instead of color to display dimensions

02: Color with accents

Colors, such as branding colors should be used sparingly so that most of the UI remains dark.

→ How can I strategically use our branding colors to guide the user?

03: Enhance Accessibility

Accessibility standards still need to be adhered even in dark theme

→ How can I create a dark theme palette that follows accessibility standards?

Product Research

In addition, I chose one of our mobile products, HCSS Fields, to experiment dark theming with. HCSS Fields is one of our original mobile products, servicing over 4,000 construction companies. As a tool for construction workers to record and submit work hours, it also has one of the most cluttered and complicated interfaces.

HCSS Fields Main Time Card Screen

Breaking down the layers

A complicated interface

Before creating a complementary dark theme palette, I started off by identifying the various layers on the most frequented and most complicated screen in the HCSS Fields app, the Time Card. This screen is is used by managers, foremen, and laborers to enter in employee hours and equipment hours.

By mapping out the number of layers on this screen first, I can identify how many dark theme layers we would need to start with.

Original HCSS Fields Time Card Screen

Exploring Dark Theme Layers

After determining a rough estimate of layers to start with, I moved forward with creating the dark theme alternative palette using Google Material Design’s Palette Creator.

By following their documentation of recommended formulas for each layer, I create a systematic approach towards generating the shades of black needed to represent depth in dark mode.

Dark Theme Applied

Testing the Dark Theme Palette

Accessibility in all environments

In order to see if the shades of black translated well on the actual UI, I used the layer mapping I created earlier to apply each depth of black. By doing so, I could see how well the perception of depth was executed in various environments (outside in daylight vs. in a dark setting). Alongside, I made small tweaks and adjustments to the values.

Some issues I discovered:

01: Does this dark theme translate well in broad sunlight?

No, in broad sunlight, there was not enough distinction between the base layer (00dp) and next layer up (1dp)

→ Create a clearer difference between the 2 gray layers

02: How well does this dark theme translate in the dark?

Pretty well. In complete darkness, most of the screen is dark while the use of color as accents pass accessibility standards, as they are less saturated versions of the branding palette.

→ How can I create a dark theme palette that follows accessibility standards?

03: Are there enough colors to translate our existing color palette to dark theme?

No, while applying the dark theme onto the Time Card screen, I discovered the need to use a secondary color to distinguish between employee times vs. equipment times.

→ Use a secondary color to distinguish between employee and equipment time records

Initial Testing of Dark Theme without Secondary Color

Iterating and Refining the Palette

From these testings, I went modified the layers, as well as included a secondary color to accommodate an additional use case

Initial Testing of Dark Theme without Secondary Color

Modified Dark Palette with Secondary Colors

A More Finalized System

Expanding to other screens

With the most complicated screen mapped out, I continued mapping out the layers of other screens within the app, followed by applying the dark theming.

Applied Layering to Other Screens

The Ultimate Dark Theme System

Don't reinvent the wheel

Finally, I created an updated documentation for our light and dark theme color palette for HCSS Fields as well as examples of the applied dark palette to various screens within HCSS Fields. Because this palette was created by systematically converting our existing branding colors into dark theme-accessible alternatives, we would be able to easily convert our other product branding colors into dark theme versions as well.

Final Light & Dark Theme Palette

Reflections

Branching out

Prior to this project, I had little exposure to establishing branding or visual guidelines. During this, I discovered the importance of reaching out for help and not being afraid to experiment. Reviewing industry guidelines. as well as receiving feedback from my mentor contributed immensely to developing an effective dark theme system.

Discovering a new passion

In addition, I found myself truly appreciating and understanding the importance of a design system. While this project only focused on dark theming in iOS, I learned that there is much more to discover about branding and standard UI components.

👋🏻 Thanks for reading!