Designing dark mode meant rethinking how the platform feels, behaves, and supports users in low-light conditions. I led the design efforts and helped turn a simple idea into a system-wide evolution.

What began as a “quick toggle” turned into a full-on design workout. We were challenged to implement it with minimal dev effort, which led to creative constraints, color strategy experiments, and a few unexpected insights — all without breaking years of visual logic.

Step 1: Color Logic First

We started by exploring color systems and how they could translate the light theme’s logic into dark mode. Our primary goal was to maintain the semantic logic already present in the light theme, ensuring consistency and simplifying development. We developed a token-based color logic that directly mirrored the structure of the light theme, making it easier for engineers to implement without overhauling the system.

Step 2: Exploring Color Palettes

We designed several dark color palettes and conducted contrast and accessibility checks. Eventually, we narrowed it down to two solid candidates — "Deep navy blue" and "Asphalt black".

While the blue felt more vibrant and modern, the team was split. There were concerns about the risk of forcing a specific visual style that users didn’t choose themselves.

Step 3: The Pepsi vs Cola Argument

To support our case, we referenced a well-known study comparing Pepsi vs. Coca-Cola in blind taste tests. People initially preferred Pepsi due to its sweetness but chose Coca-Cola for long-term consumption. Similarly, we felt users might enjoy blue at first glance but prefer a more neutral tone over time.

Still, we wanted to empower user choice rather than make assumptions.

Step 4: Facing Constraints

We proposed offering multiple tone options within dark mode, but this idea was initially blocked due to technical limitations. Adding dynamic color themes required too much effort under the current architecture.

Step 5: Designing a Scalable Solution

As we continued exploring, I discovered a workaround that made user-driven tone customization technically feasible. Since the entire platform UI was built on section-based components, we reimagined them with glass-like blur and transparency.

By changing only the base background color, we could create multiple “mood” variations without touching the core UI structure. This solution unlocked unlimited tone options for dark mode — all easily maintainable within the existing design system.

Final Thoughts

Dark mode wasn’t just a theme — it was a case study in balancing aesthetic exploration, user empathy, and technical pragmatism. The outcome gave our users meaningful personalization and our developers a clean implementation path.

We built a dark mode strategy that mirrored the existing light theme logic, reducing dev effort while preserving visual integrity. Through smart use of section-based layouts and background layering, we introduced multiple tone options — allowing users to choose their preferred dark variant without overcomplicating the system.