Dark mode feels like a superpower. You flip the switch, your screen dims to a moody black, and suddenly you're a hacker in a movie, easy on the eyes and effortlessly cool. It's become the default aesthetic for anyone who takes their screen time seriously.

But here's the plot twist: dark mode isn't automatically better. In fact, when it's designed poorly, it can strain your eyes more than the light interface it replaced. The problem isn't dark mode itself—it's the assumption that you can simply invert colors and call it a day. Good dark mode is surprisingly hard, and understanding why reveals a lot about how our eyes actually work.

Slap pure white text (#FFFFFF) on a pure black background (#000000) and something strange happens. The letters seem to glow, bleeding into the space around them. This effect is called halation, and it's especially brutal for people with astigmatism, which is roughly one in three of us.

Your pupils dilate in dark environments to let in more light. When a bright white shape suddenly appears on that dark canvas, your wide-open pupil floods your retina with intensity. The result feels less like reading and more like staring into tiny flashlights. Not exactly the eye-friendly experience dark mode promised.

The fix is refreshingly simple: soften both ends. Use off-white text (around #E0E0E0) on dark gray (around #121212) instead of maxing out the contrast dial. Material Design and Apple's Human Interface Guidelines both recommend this approach. Your eyes get definition without the searing brightness, and text stops vibrating on the page.

Takeaway

Maximum contrast isn't the same as maximum readability. Sometimes turning the volume down on both sides makes the message clearer.

Text is easy to invert. Images are not. That family photo, that product shot, that infographic with a crisp white background—they all become glowing rectangles floating in your dark interface, like little windows into another dimension where dark mode doesn't exist.

This isn't just ugly, it's disorienting. Bright images on dark backgrounds create the same halation problem as bright text, and they yank your attention away from whatever you were actually trying to read. Your eye keeps darting back to the bright square, not the article beside it.

Thoughtful designers solve this in three ways: they add subtle borders or shadows to define image edges, they slightly desaturate or dim images in dark mode (often by 10-20%), or they design illustrations with transparent backgrounds so the dark theme shows through. Icons and logos usually need dedicated dark-mode versions entirely. A little planning here separates a polished dark interface from one that feels like it's shouting at you.

Takeaway

Dark mode isn't a filter you apply—it's a second design language your visuals need to speak fluently.

You're reading a dark-mode article at midnight. You tap a link. It opens in a browser that's still set to light mode. Your pupils, which had relaxed and expanded to see the dim screen, are suddenly assaulted by a wall of white. This is called light shock, and it's the digital equivalent of someone flipping the bedroom lights on at 3 AM.

The problem isn't just external links. It happens inside apps too—when a modal pops open with a slightly different background, when embedded content ignores your theme preference, when a PDF viewer refuses to play along. Every mismatch is a tiny visual jolt that adds up to real fatigue over time.

The best experiences respect your context. They honor system-level dark mode settings, they style embedded content consistently, and they warn you before launching bright external pages. Some apps even offer an auto-dim feature that gradually shifts brightness based on time of day. The goal isn't just to look dark—it's to protect the visual environment you've deliberately created.

Takeaway

Great design isn't only about how one screen looks—it's about the journey between screens and whether that journey feels seamless or jarring.

Dark mode isn't a shortcut to good design. It's a whole design system that needs the same care as its light counterpart—contrast tuned, images adapted, transitions considered. When done well, it feels invisible. When done poorly, your eyes will tell you within minutes.

Next time you toggle that switch, notice what happens. Do the letters glow? Do images shout? Does clicking a link feel like a slap? Those small frictions are design decisions, and now you can see them.