Dark Mode Screenshots — PNG Settings That Preserve Contrast

The changelog hero image — a dark IDE screenshot — looked gorgeous on a OLED laptop. In the blog post, gradients banded into stair steps and sidebar text drowned in #1a1a1a mush.

Dark mode is unforgiving to compression. Every optimization that shaves KB attacks smooth gradients first.

Why dark UI is harder

• Low luminance variance — small value changes visible as bands when quantized
• Gamma perception — human eye sensitive in dark range
• Subpixel antialiasing — colored fringes on text when resized wrong
• HDR vs SDR — capture and display mismatch

Capture settings

Display and OS

• Native resolution, 100% UI scale for docs
• Consistent dark theme — don't mix light OS chrome with dark app unless intentional
• Disable night shift / blue filter during capture

Browser and app

• 100% zoom — not 90% or 110%
• Hide extensions cluttering toolbar
• Close unrelated tabs reflecting in glossy screens (physical glare)

Tool choice

• macOS Cmd+Shift+4 region capture
• Windows Snipping Tool / ShareX
• IDE built-in export when available (Figma, VS Code extensions)

Avoid photographing monitors with phones unless unavoidable.

PNG export settings

| Setting | Recommendation | | --- | --- | | Bit depth | 24-bit truecolor PNG | | Color profile | sRGB embed | | Interlacing | Off for web | | Alpha | Only if transparency needed | | Scaling | Export 1:1 pixels; resize in Resize Image with care |

PNG vs JPG — JPEG rarely for dark UI.

Compression discipline

Compress Image — compare gradient regions before/after.

How Image Compression Affects Quality — banding explanation.

For docs pipeline: Compressing Screenshots for Documentation.

Retina and 2x

Retina Images 2x Explained — capture full pixel dimensions on Retina; downscale for blog width rather than upscaling small captures.

Social and OG crops

Dark screenshots in Open Graph Image Sizing — add padding or light border so thumbnails don't become black rectangles in Slack feeds.

WCAG in marketing shots

If screenshot includes UI text overlays for marketing, check WCAG Contrast on Image Text.

WebP alternative

When to Use WebP Instead of PNG — test dark gradients at quality 90+ in WebP Converter.

Light mode companion shots

Some docs show light/dark pair — keep naming consistent Batch Image Convert Naming.

Troubleshooting

Why do dark mode screenshots look banded? Gradients in dark UIs compress poorly — 8-bit PNG and aggressive JPEG create visible bands in subtle gray transitions. Use PNG-24, avoid unnecessary compression, and capture at native resolution without extra scaling.

Should I use PNG or JPEG for dark mode screenshots? PNG for UI with flat panels and text. JPEG introduces color artifacts in dark gradients. WebP at high quality works for web publishing after testing.

Does browser zoom affect screenshot quality? Yes. Capture at 100% browser zoom for pixel-accurate UI. Retina displays benefit from 2x asset awareness — see retina screenshot guide. Zoomed captures scale fonts non-integer and blur text.

Limitations

When not to use this approach

Conclusion

Dark mode screenshots want PNG-24, 100% zoom, light compression, tight crop.

Banding means you squeezed gradients too hard — crop instead. Your OLED lie shouldn't become your readers' stair-stepped truth.

IDE theme selection for docs

Popular dark themes (One Dark, Dracula, GitHub Dark) vary in contrast — pick theme with WCAG-compliant editor text before capturing tutorial screenshots. WCAG Contrast applies to docs too.

Annotating dark screenshots

Red arrows on dark UI need bright stroke (#FF6B6B) with 2px minimum — dark red on dark gray invisible. Use annotation tools with outline stroke, not fill-only arrows.

Video frame grabs

Extracting PNG from video — use lossless frame export; recompressing video grab through multiple lossy passes destroys dark gradients faster than direct screen capture.