Most people browse social feeds in dark mode, at least some of the time. That changes how your shared link looks. A preview image designed on a white background can turn glaring, washed out, or partly invisible when it sits inside a dark feed. Checking your preview in both modes takes a few minutes and prevents an ugly surprise.
This guide explains what actually changes in dark mode, what stays the same, and how to test your preview before you share it.
What dark mode does and does not change
Here is the key point many guides miss: dark mode usually does not recolor your preview image. Your image file is your image file. What changes is everything around it: the feed background turns dark, the card background may turn dark, and the text next to your image switches to light colors.
That surrounding change is what causes problems. A white-background image suddenly sits as a bright rectangle in a dark feed, which can feel harsh and draw attention for the wrong reason. Text baked into your image does not adapt either. Dark text on a transparent or light area can vanish or clash, while light text on a white image area can become unreadable.
Problem 1: The glaring white rectangle
If your preview image has a pure white background, it will glow against a dark feed. Readers scrolling at night may skip past it simply because it is uncomfortable to look at. The fix is simple: use a soft off-white, light gray, or textured background instead of pure white. The image still reads as light, but it no longer blinds the reader.
For brand images, consider a version with a slightly darker background for sharing, or a design that works on both light and dark surfaces, such as a colored background with strong contrast text.
Problem 2: Text that disappears
Text inside your image is frozen. It cannot switch color when the mode changes. So check your image text against both backgrounds: does dark text survive on a light image area, and does light text survive on a dark image area? The safest designs put text on a solid shape, such as a colored band or a dark panel, so the text contrast stays the same no matter what surrounds the image.
Avoid thin, light-gray text on white areas. It may look elegant on a desktop in light mode, but it washes out quickly on a phone in a dark feed.
Problem 3: Logos and icons with transparency
Logos with transparent backgrounds are the most common dark mode casualty. A dark logo designed for a white page becomes nearly invisible on a dark card, and a light logo can vanish on a light card. If your preview image uses a transparent logo, test it on both backgrounds. When in doubt, place the logo on a solid badge or a contrasting shape so it stays visible everywhere.
How to check your preview in both modes
- Open the link preview on a phone with dark mode turned on, then again with light mode on.
- Check the same link on desktop in both modes, since card layouts differ.
- Look for three things: glare from white areas, text contrast, and logo visibility.
- If anything fails, adjust the image itself, since you cannot control the reader’s mode.
- Re-check after every image change, because a fix for dark mode can break light mode.
Do not rely on screenshots from a single device. Feeds render cards differently across apps, so a quick check on two surfaces catches most problems.
Try the free validator
Switching your whole phone between modes for every check is slow. The tool below shows your card on light and dark backgrounds side by side, so you can spot problems at a glance. Open the full Dark Mode Preview Validator tool on its own page.
Quick design rules
Avoid pure white backgrounds. Put text on solid shapes. Test transparent logos on both backgrounds. And check every important preview twice, once in light mode and once in dark. Your readers will see your link in whichever mode they prefer, so your preview should look good in both.