Dark Mode is Mandatory

Every major operating system now ships a system-level appearance setting, and users expect applications and websites to respect it. A site that ignores the preference and blasts a white background at someone reading in bed at 11pm is making a choice on their behalf, and it is the wrong one.

The CSS side is trivial — a prefers-color-scheme media query — which means the barrier is never technical. It is that dark mode is treated as a colour swap rather than as a second design that needs its own decisions.

The honest test is whether your dark theme was designed or generated. If it was generated by inverting the light one, it will show: washed-out imagery, shadows that no longer read, and text that is either painfully bright or unreadably dim.

Pure black backgrounds paired with pure white text produce uncomfortably high contrast that causes halation — the visual smearing where light text appears to bleed into a dark background, which is particularly hard on people with astigmatism.

On OLED displays, pure black pixels are switched fully off, which produces visible smearing during scroll as pixels transition. Deep greys around #121212, or a near-black tinted slightly toward your brand hue, avoid both problems and look considerably more intentional.

Apply the same logic to your text: instead of pure white, use a very light grey or a desaturated tint of your background hue. The contrast is still comfortably compliant, and the page stops feeling like it is shouting.

In a light interface, elevation is communicated with shadow. In a dark interface, shadows are close to invisible — a dark shadow on a dark surface says nothing. Depth has to be communicated with surface lightness instead: the higher an element sits, the lighter its background.

That produces a practical rule. Define a small ladder of surface colours — background, card, raised card, popover — each a step lighter than the last, and use position on that ladder to signal hierarchy. Three or four steps is usually plenty.

Borders do more work in dark themes than in light ones. A one-pixel border at low opacity separates surfaces that would otherwise merge, and costs nothing.

Saturated colours that work on white frequently vibrate against dark backgrounds. Most brand palettes need a dark-mode variant: slightly desaturated, slightly lightened, tested in place rather than assumed to transfer.

Photography and screenshots need attention too. Images with white backgrounds punch a hole in a dark layout. Options include a subtle dark overlay, a contained treatment with rounded corners and a border so the image reads as an object rather than a hole, or supplying dark-mode variants of key assets.

Then verify rather than eyeball it. Body text needs a contrast ratio of at least 4.5:1 against its actual background, and large text at least 3:1. Dark themes fail this more often than light ones because dim grey text looks tasteful in a mockup and disappears on a phone in daylight.