Screenshots in dark mode can look striking and fit categories such as media, finance, and developer tools, but they may reduce legibility or stand out poorly against a dark store theme. Test dark and light variants and choose by audience, category, and contrast.
Consider the viewing context
Visitors may browse the store in light or dark mode, and your screenshots appear against that background. Dark screenshots can blend into dark pages, while light ones can look stark.
Check both appearances before deciding.
Match the product
Show the theme that users most often use or that best fits the brand. If the product offers both, consider featuring one and showing the other in a later screenshot.
Do not show a mode the app lacks.
Protect contrast and legibility
Dark designs need strong caption contrast and careful use of color. Check small-size readability and accessibility contrast ratios.
Avoid low-contrast gray text on dark backgrounds.
Test the choice
Use experiments or custom pages to compare dark and light sets for relevant audiences. Segment by device or source if data allows.
Record results to guide future designs.
Common mistakes with dark mode screenshots
Choosing dark mode purely because it looks modern, without checking how it appears against both store themes, is the main mistake. Gray captions on near-black backgrounds fail contrast checks. Showing a theme the app does not actually offer is a third.
Teams also skip testing because the design team has a strong opinion.
Dark mode screenshots: a worked example
A stock market app's users mostly use dark mode, so the team builds a dark set and a light set. In a custom page test, the dark set wins with its core audience, while the light set performs better for new users from search.
They keep dark as default for the main page and use the light set for a broader campaign.
How to do it, step by step
- Preview in both store themesCheck how each set looks on light and dark pages.
- Match the productUse the theme your users prefer or that matches the brand.
- Check caption contrastMeasure contrast ratios for text.
- TestCompare dark and light sets in custom pages or experiments.
- DocumentRecord which theme wins for which audience.
Before and after examples
Illustrative examples written for a generic app in this category, not client results. Swap in your own product, audience, and data.
Gray text on near-black
White or high-contrast text on dark
Why it works: Readability matters.
Dark only because it looks modern
Dark set tested against a light set
Why it works: Test beats opinion.
Showing a dark theme the app lacks
Showing only themes the app supports
Why it works: Creative must match the product.
Action plan
- Preview in light and dark store themes
- Match the product's real themes
- Check caption contrast
- Verify small-size readability
- Test variants by audience
- Document results
Metrics to monitor
- Conversion by theme variant
- Segment performance
- Accessibility contrast checks passed
- Search-result tap-through
Record the baseline, release date, audience, markets, and external changes before interpreting movement. Rankings and conversion are useful signals, but a decision is stronger when activation, retention, and business value confirm that the page attracted the right users.
Frequently asked questions
Is dark mode better for conversion?
It depends on category and audience, so test.
Can I show both?
Yes, for example one primary theme and another in a later screenshot.
Does contrast matter?
Very much, for readability and accessibility.
Keep reading
More in Creative Optimization
Browse all 10 Creative Optimization guides
