Dark Mode
The Brief
We had several pieces of feedback suggesting 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:
Through this process we established that there were two main problems we needed to solve:
- The trigger - what is going to tell us to deliver a dark theme?
- 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'
Shadow Themes
Each Theme would have a 'shadow' set of colours that could be configured to provide a dark mode.
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:
- 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.
- Do people make many changes to their brand colours?
- How do people manage dark modes in Figma?
- 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?
Again I explored variables, and various ways 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 headed to ChatGpt and created a custom GPT that would take a screenshot and output the exact theme styles we needed. This felt like a very compelling idea and one that opened possibilities up in the early onboarding experience too.
Final Design
The decision was clear that using "Dark Mode as a Theme" was the right way to go. The future addition would also explore using AI to create the theme as this was the area we could best serve our customers and save them time.
