Dark Mode: It's More Than Just Colors

Dark Mode: It's More Than Just Colors

Users love Dark Mode. It looks cool. It saves battery on OLED screens. It feels "Tech."

But as a developer, supporting Dark Mode isn't just about inverting the colors from White to Black. It is a complex User Experience (UX) challenge that requires rethinking how I display depth and hierarchy.

The Contrast Problem & Halation

If you just swap a white background (#FFFFFF) for a pitch-black background (#000000) and use bright white text, you create a contrast ratio that is actually too high.

For users with astigmatism (which is common), bright text on a purely black background causes Halation—the text appears to vibrate or bleed, becoming blurry and painful to read.

The Fix: I never use pure black. I use dark gray (e.g., #121212). This softens the contrast while keeping the aesthetic.

Elevation vs. Depth

In Light Mode, I use Shadows to show hierarchy.

A button has a small shadow. A popup modal has a huge shadow. This tells the human brain: "This element is floating closer to you."

In Dark Mode, shadows are invisible against a dark background. You can't see a black shadow on a black wall.

The Fix: Instead of shadows, I use Lightness.

The background is dark gray. The "floating" card is a slightly lighter gray. The popup on top of that is an even lighter gray.

I mimic how light hits objects in a dark room: things closer to the light source are brighter.

Respecting the User

At g-makris.com, I use a system preference detection (prefers-color-scheme).

If your phone is set to Dark Mode, my site respects that automatically. Why? Because if you are browsing in bed at 11 PM, and my site blasts you with a bright white background, I have physically hurt your eyes. That is bad UX.

Good design is invisible. It anticipates what the user needs before they ask for it.

Best,

Gerasimos Makris Founder of g-makris.com AI Web Developer | Double Master's in MBA & FinTech and Blockchain

Tech Glossary & Concepts

• UX (User Experience): How a user interacts with and experiences a product, system, or service.
• UI (User Interface): The specific screens, buttons, pages, and other visual elements that you use to interact with a device.
• System Preference: A setting in the operating system (iOS, Windows, Android) that apps can read to adjust their appearance automatically.
• Halation: A visual effect where bright text on a dark background appears to bleed or blur, making it harder to read for people with astigmatism.