How We Brought Dark Theme to Dashlane

Ah, dark theme. The ultimate way to save your eyes and feel like you’re living a cyberpunk future at the same time. It’s no surprise it’s been highly requested on our public user board since 2021. But while we had it for years on our mobile apps, bringing it to our web app turned out to be a much trickier beast.

After what feels like a thousand mockups, a purple debug theme that made our app look like a grape smoothie, and enough color tokens to fill a Pantone catalog, we’re thrilled to say: dark theme is finally here. Want to know how we pulled it off? Let’s dive in.

The short answer: Our web app wasn’t built with dark mode in mind. The long answer: Historically, our design team used a simple, arbitrary color palette, making it impossible to implement a dark theme programmatically. So, we hit the drawing board to start fresh.

Here’s how we turned things around:

2. Light theme 2.0: Before we could go dark, we had to fix the light. Through extensive stress-testing in Figma, we created a compatibility light theme with sleek new color tokens that played nice with legacy colors.

3. Dark theme tokens: Building the dark theme wasn’t just a copy-paste job. Did you know that contrast logic is basically inverted in dark mode? Picking the perfect shades was a challenge and, to this day, we still have some quirks to iron out.

For those familiar with design tokens: We stopped at the semantic layer and, so far, haven't felt the need for component-specific tokens. This enabled us to maintain our set to a reasonable total of 91 and made adoption much easier—for both designers and engineers—because the tokens' names never get too long. In addition, their somewhat generic taxonomy allows for some flexibility in their usage.

When this project started in 2022, we adopted two new tools to manage our design tokens: Tokens Studio for defining color values programmatically and Specify for storing the design data and distributing it across our client apps (though they unfortunately shut down recently).

Implementing dark mode wasn’t just a technical feat—it required cultural shifts in how we build our product. To enforce the use of our design system (DS), we needed to make sure no sneaky legacy colors were slipping through. We had three main tricks up our sleeves:

Fun fact: While the debug theme wasn’t super practical for day-to-day use—imagine your entire app in 50 shades of purple—it did get us dreaming about other fun themes, like “pride theme” or “winter holidays theme.” Who knows, maybe one day?

We tracked design system usage through automated scripts that scanned our codebase semi-weekly. Metrics showed how much of the frontend adhered to the DS, and any downward trends prompted conversations with engineering leads. Luckily, every team was on board from day one, and we never had to take corrective action.

The key to progress was making design system adoption part of everyday work. The rule was simple: If you touch it, migrate it. Every update or feature project had to use DS tokens, helping us chip away at legacy code incrementally.

We also leveraged Tech Weeks and Hackathons to prioritize dark theme migration. These focused sprints targeted less-trafficked parts of the product, balancing satisfaction-driven improvements with practical migration needs. The high-impact visual changes were motivating, especially since our team uses the product daily.

Not everything went perfectly, of course. Originally, we hoped every migration would involve a full upgrade to design system components. But when we ran into areas that would require massive rewrites, we adapted by simply updating the color values instead. It wasn’t ideal, but it got us one step closer to the finish line.

And while we’re thrilled with the results, we’re already planning improvements. Some dark theme tokens still aren’t as visually polished as we’d like, so we’ll continue refining the design.

As we got closer to completing dark theme, our internal posts started getting more and more traction. Our rallying cry, the "🌚" emoji, was popping up in many Slack threads and Zoom chats, and more Dashlaners were spontaneously joining the effort. They’re obviously users themselves, so seeing their excitement was an amazing boost.

On the public side, our users weren’t shy about letting us know how badly they wanted dark mode. The most common feedback? “My retinas are burning.” Ouch. We’re happy to finally bring your eyes some relief!

You can learn more about managing design tokens in the talk we gave at the Into Design Systems 2023 Conference.

Caveat: Figma has improved theme management significantly since then, so some of the techniques presented in this talk are now outdated. Additionally, Specify shut down in 2024, so we’re in the process of moving our design tokens management pipeline to another tool.

Dark theme is here, and we couldn’t be more excited for you to try it out. Starting today, you can enable the beta version and finally see Dashlane in its darker, sleeker glory. Give it a whirl by clicking this link (if the link doesn't work, please log out of Dashlane, log back in, and try again). And if you spot any rogue colors, you can report them through our support channels. They're probably legacy holdouts!

As always, we’re not done yet. We’re already thinking of enhancements, from creating additional themes to adopting APCA contrast standards. But for now, we hope you enjoy the experience as much as we enjoyed building it.

Welcome to the dark side.