The motivation for light mode to be supported on The Athletic’s mobile apps didn’t happen overnight. Since the start, our apps only had a default dark theme — and in recent years, light mode has been the #1 feature users have requested through app store reviews and other feedback channels.

For the design team, we were always supporters of the initiative to improve accessibility and follow industry best practices. In 2021, we were all excited to see light mode make it onto the roadmap — while also knowing it would be a difficult challenge with many constraints and considerations.

As the lead designer on this project, I had two main goals — creating a scalable system which our design and engineering teams could easily follow, while designing the best possible experience for the end user.

For our internal teams, after much trial and error, I was able to create a set of dark to light mappings for each grayscale colour in our design system. Next, I populated our Figma library with the mappings, educated the team on usage, and provided a document highlighting all of the guidelines and exceptions.

For the end users, in order to highlight the new theme option and make it easy to opt-in, I designed an animated callout that launched with the feature.

Post launch, our analytics team tracked the impact of light mode on core metrics. The results showed a sizeable increase in the overall usage of our app.