It all started with a late-night Slack message from a client: “Can we see what the app looks like in dark mode?” Simple enough, right? I had already designed the whole thing in a crisp, clean light interface with soft pastels and friendly blues. But this? This was the beginning of what I now call the dark mode drama. Designing for the other side isn’t just about flipping colors—it’s a mindset shift, a whole new playground with its own rules.

For years, designers swore by bright, white spaces. Light mode was the default, the standard, the safe bet. But then users started spending more hours staring at screens, OLED screens became popular, and suddenly everyone wanted a version of your product that wouldn’t burn their retinas after 10 p.m.

Why Dark Mode Isn’t Just a Trend

Let’s get something straight: dark mode isn’t just a trendy feature you tack on to please the tech crowd. It’s about accessibility, comfort, and user preference. Many people simply find it easier on the eyes. And in some contexts, like nighttime usage, it can reduce eye strain. But designing a proper dark mode isn’t a matter of inverting your color palette. Oh no. It requires nuance, intention, and a solid understanding of how your product behaves under a whole new set of lighting conditions.

The First Rule of Designing for the Other Side

Designing for dark mode isn’t about creating a “black version” of your light theme. If you just invert your colors, your app will look like a nightmare. I learned that the hard way when I exported my light mode styles into a dark theme prototype. The cheerful blues turned into a washed-out mess, text became unreadable, and every shadow looked like it belonged in a horror movie.

Instead, start with purpose. Think about your brand’s tone, your primary use cases, and your users’ environments. Use dark grays instead of pitch black, opt for saturated accent colors, and rethink elevation entirely—because shadows behave very differently on dark backgrounds.

Typography Takes the Spotlight

One of the first casualties of the dark mode drama is typography. Light text on dark backgrounds has a very different weight and perception than dark text on white. You need more contrast, but not too much. White-on-black is harsh. Soft grays work better, but only if you get the balance right.

Line height, font weight, and even font choice can feel different. Suddenly, your favorite clean sans-serif looks bloated or spindly in the new environment. This is where testing becomes critical. You can’t just rely on design intuition—you need to actually use the thing.

Contrast Is Complicated Now

Accessibility is at the heart of modern design. And when it comes to dark mode, contrast becomes a tricky beast. The Web Content Accessibility Guidelines (WCAG) don’t change, but how we perceive contrast does. You may need to bump up the brightness of some text or tone down some colors that pop too hard in dark environments.

I made the mistake of using a neon blue for clickable elements in dark mode. On paper, it passed contrast checks. In practice, it screamed. Users were blinded by buttons that felt radioactive. Lesson learned: always test in context.

The Dark Side of Illustrations and Images

Images and illustrations rarely play nicely when you switch themes. That playful SVG you made with a white background? Yeah, it now has a weird box around it in dark mode. PNGs with shadows become ghostly halos. Photos look too bright or too cold.

When designing for the other side, you need dual assets or dynamic rendering. That mascot illustration? Create two versions. That hero photo? Consider filters or overlays that adjust based on theme. Otherwise, you’ll end up with a Frankenstein UI.

Animation and Feedback in the Shadows

One thing I didn’t anticipate was how differently motion and feedback behave in dark mode. Light mode feels immediate. Buttons flash, loading spinners pop, and notifications float in clearly. But in dark mode, motion can feel muddy or overly dramatic.

I had to redesign all my microinteractions. Hover states, button presses, and modals all needed subtle glows or adjusted drop shadows. The feedback loop had to remain snappy and visible, without overdoing the brightness.

Components Can Betray You

If your UI is built from reusable components, great. But be warned: they may not survive the transition. I ran into countless issues with cards, input fields, and headers that were fine in light mode but unusable in dark mode.

You have to audit every piece. Border colors may need to shift. Box shadows might need to disappear. Drop-downs could look like voids. Your component library needs to become theme-aware—with conditions or tokens that let styles adapt dynamically.

Testing in Real Contexts

Previewing your dark theme in Figma is one thing. Using it on a phone at night in bed is another. I now test dark mode late at night, in low-light conditions, with real-world user tasks. That’s where the flaws show up: when a user can’t find the submit button because it blends into the background, or when a chart becomes unreadable because the axis lines vanished.

Emotion Shifts in the Dark

This might sound abstract, but it’s very real: your product feels different in dark mode. It feels more serious, more cinematic, maybe even more powerful. That emotional weight affects how users interact. A bright, playful light mode UI invites curiosity. A dark mode version can feel focused, intentional, even intimidating.

Use that. Adjust your tone, maybe even your voice. Consider how dark mode affects your brand perception, and lean into the contrast—not just visually, but emotionally.

Designers vs Developers: A Theme War

“Can you just make it inherit the CSS variable?” That sentence triggered a week-long dev-design debate on how to structure the themes properly. Turns out, our light theme wasn’t modular enough. We had hardcoded too many values.

When designing for the other side, you need a token system. You need theme variables. You need your devs in the loop from day one. Because otherwise, flipping to dark mode means a mountain of overrides and frustration.

Dark Mode Drama in Client Presentations

Here’s the kicker. I showed the final light and dark mode to the client in a well-lit boardroom. Everyone ooh-ed and ahh-ed at the light version. Then I flipped the switch.

The room fell silent.

Not because it looked bad. Because it felt different. The mood changed. The stakeholders leaned in. One of them even whispered, “This feels… real.”

That was the moment I realized dark mode isn’t just a gimmick. It’s an experience. A decision. A design frontier of its own.

Embracing the Other Side

The phrase “dark mode drama” might sound overblown, but I promise you—once you dive into designing for the other side, you’ll face all the highs and lows. The beauty of it, though, is that it challenges your assumptions. It sharpens your design thinking. And it forces you to consider not just how things look, but how they feel.

So the next time someone asks, “Can we see this in dark mode?” don’t roll your eyes. Lean in. There’s magic in the shadows, waiting to be designed.

FAQs

1. Is dark mode better for your eyes? It can reduce strain in low-light settings but may not help in bright environments.

2. Should I design dark mode first or light mode first? Start with the one most aligned with your brand and audience; many still begin with light.

3. What colors work best in dark mode? Use dark grays for backgrounds, and soft, saturated accent colors.

4. How do I test my dark mode design? Test in real lighting conditions—especially at night on actual devices.

5. Do all apps need dark mode? Not necessarily, but users increasingly expect it as an option.

---