Write headlines people can scan in one second
Most readers skim before they commit. A good headline tells them what they will get, in plain words.
Read article: Write headlines people can scan in one secondDark mode is not a color swap
Inverting colors is quick, but it breaks contrast, images and depth. A proper dark theme takes more planning.
Many sites add a dark mode by flipping black and white. The result looks wrong almost every time. Text fades into the background, photos glow too bright and shadows disappear. Users notice, even if they cannot name the problem.
A good dark theme is designed on purpose. It needs its own palette, its own rules for depth and its own checks.
Start with a palette, not an inversion
Light backgrounds use shadows to show depth. Dark backgrounds need lighter surfaces instead. A card on a dark page should be a little lighter than the page behind it, so it looks raised.
We define a full set of colors for each mode: background, surface, text, muted text, border and accent. Each color has a name that describes its job, not its shade. That makes the switch between modes a matter of changing values, not rewriting styles.
Check contrast on every pair
Pale grey text on a dark grey background often fails the contrast rules. Muted text is the most common problem. We test every pairing, including buttons, links, form fields and error messages.
- Body text should meet at least 4.5 to 1 contrast
- Large headings can use a lower ratio, but we still aim high
- Focus outlines must be visible in both modes
Adjust images and icons
A photo that looks fine on white can glare on black. Logos with a dark fill can vanish. We provide a light and a dark version of logos where needed. For photos, we often add a subtle overlay or adjust the brightness in the template, not in the image file.
Icons may need a stroke color that changes with the mode. Test each icon on both backgrounds before you sign off.
A dark theme that hides the logo is not a feature. It is a bug.
Respect the user’s choice
Let the visitor choose. The best approach is to follow the device setting by default and offer a switch. Save the choice in the browser so it stays put on the next visit.
Set the theme before the page paints. If you wait for scripts to load, visitors will see a flash of the wrong mode, which feels broken.
Test on real screens
A dark theme looks different on an old laptop, a bright phone and a monitor with a warm tint. We check each mode in a daylight room and a dim one. If the text is hard to read in either, we adjust the values again.
Dark mode takes a few extra days to do well. Those days pay off, because the site feels deliberate in both modes rather than patched.
