Dark Mode

The Brief

We had lots of feedback that Chameleon was blocking the release of dark mode in a customers application because it wasn't easy to style the in-apps. Since dark mode is a highly emotive thing when it's a priority, we decided to explore how we might add dark mode to Chameleon Themes.

Explore

This project started out (as most projects do) with a loose brain dump of ideas and related concepts:

Then I started to research the related concepts:

I established that there were two main problems we needed to solve:

1. The trigger - what is going to tell us to deliver a dark theme?
2. The dark theme - what is the new theme going to look like?

The Trigger

The Theme

I got really focused on colour mapping and excited by the idea of adding variables.

These explorations, coupled with several deep discussions with the tech teams about the technical feasibility of various things led to two very different options. I gave them names to aid discussion: 'Shadow Themes' and 'DarkMode as a Theme'

Option A - Shadow Themes

Each Theme would have a 'shadow' set of colours that could be configured to provide a dark mode.

Option B - Dark mode as a Theme

We leverage the existing Themes functionality and allow certain Themes to be configured to be used over another.

A critical point

This was a critical point, after discussion with the product team we decided we didn't have enough information to answer some crucial questions that would make this decision easy.

I started some research to find out:

1. Are dark mode and light mode related? Does changing the colour of one necessitate a change in another? A yes here means a big tick for Shadow Themes.
2. Do people make many changes to their brand colours?
3. How do people manage dark modes in Figma?
4. Do people change things other than Colour? A yes here would make "Dark as a Theme" a preferable option.

I used a mix of in-app experiences to target designers in Chameleon, our existing bank of designers we had spoken to and Userinterviews.com. I also did a quick survey asking the key questions.

Plugging the interview transcripts into Claude.ai allowed me to quickly analyze the results and create a very concise sharable summary.

New information

This research really upended my perspective on the problem. Firstly it made it clear that Shadow Themes wasn't a good fit, colour schemes were not related and using 'inversion' to create a theme was unreliable and unnecessary. Designers had already created the Theme and were only looking to implement it in Chameleon.

So the job to be done became very simply: How do we enable designers to create a dark theme from their figma file?

I went back to my work with variables, and explored how we might import design tokens. Our research showed that designers were increasingly aware of tokens and variables but it was quite aspirational, not well used.

In thinking about how to extract colours from a picture I hit upon the idea of using AI to extract a theme from a simple screenshot of a modal.

Prototyping

I prototyped a custom GPT that would take a screenshot and output the exact theme styles we needed. This idea opened up possibilities in the onboarding experience too.

Summary

The decision was clear that using "Dark Mode as a Theme" was the right way to go. We would also continue to prototype using AI to create the theme. This was an area we felt we could best save customers time and add some delight.