Dark Mode Screenshots: PNG Settings That Preserve Contrast

Dark UI screenshots band when compression quantizes a gradient that was only a few levels apart. Compress Image will shrink the file, and heavy settings attack those gradients first. Export PNG-24, capture at 100% zoom and native resolution, and compare the gradient at 100% zoom before you keep a smaller copy. Resize Image is for a deliberate downscale to the blog width. Stretching a small capture blurs the UI.

A dark IDE screenshot can look clean on an OLED laptop and then show stair-step gradients in the blog post, with sidebar text lost in a #1a1a1a mush. Every optimization that shaves kilobytes hits smooth dark gradients first.

Why dark UI is harder to export

• Low luminance variance. A small change in value becomes a band once it is quantized
• Gamma. The eye is sensitive in the dark range
• Subpixel antialiasing. Text picks up colored fringes when you resize it the wrong way
• HDR capture on an SDR page. The screenshot and the display do not match

Capture settings

Display and OS

• Native resolution, and 100% UI scale, for documentation
• One dark theme for the whole shot. Mix light OS chrome with a dark app only when that mix is the point
• Turn night shift and blue-light filters off while you capture

Browser and app

• 100% zoom. Not 90%, and not 110%
• Hide extensions that clutter the toolbar
• Close unrelated tabs. On a glossy screen they show up as reflections

Which tool

• macOS: Cmd+Shift+4 for a region
• Windows: Snipping Tool or ShareX
• An export from the app when it has one (Figma, or a VS Code extension)

A phone photo of a monitor is a last resort.

PNG export

| Setting | Recommendation | | --- | --- | | Bit depth | 24-bit truecolor PNG | | Color profile | Embed sRGB | | Interlacing | Off for the web | | Alpha | Only if you need transparency | | Scaling | Export 1:1 pixels. Resize later in Resize Image, and check the result |

PNG vs JPG is the format comparison. JPEG is rarely the right file for a dark UI.

How hard to compress

Run Compress Image and compare the gradient regions before and after.

How Image Compression Affects Quality explains the banding.

For a docs pipeline, see Compressing Screenshots for Documentation.

Retina and 2x

Retina Images 2x Explained: capture the full pixel dimensions on a Retina display. Downscale for the blog width. Do not upscale a small capture.

Social and link previews

A dark screenshot used as an Open Graph image needs padding or a light border. Otherwise the thumbnail is a black rectangle in a Slack feed.

Contrast on marketing text

If the screenshot includes text you added for marketing, check WCAG Contrast on Image Text.

WebP

When to Use WebP Instead of PNG: test dark gradients at quality 90 or higher in the WebP Converter.

A light-mode pair

Some docs show light and dark side by side. Keep the filenames consistent. Batch Image Convert Naming covers that.

Which IDE theme to capture

One Dark, Dracula, and GitHub Dark do not share the same contrast. Pick a theme whose editor text meets WCAG before you capture a tutorial. WCAG Contrast applies to the docs as well as to the product.

Arrows on a dark shot

A red arrow on a dark UI needs a bright stroke (#FF6B6B) at least 2 px wide. Dark red on dark gray disappears. Use an outline stroke. A fill-only arrow will not show.

Frames pulled from video

Export a PNG from video as a lossless frame. Running that grab through several lossy passes destroys dark gradients faster than a direct screen capture does.

Example: a dark VS Code pane for a tutorial

1. Set the editor zoom to 100%. Turn off OS Night Shift or True Tone for the capture so a warm tint does not shift the colors.
2. Capture only the active pane (1200×750 px) with the OS region shortcut (Cmd+Shift+4 or Win+Shift+S). Save a 24-bit sRGB PNG. Expect about 195 KB.
3. If you convert a copy to WebP in the WebP Converter, keep quality at 90% or use lossless mode. Below 80% on a dark #0f172a background, syntax-highlighted text picks up blocky steps.

What lossy color does to dark UI

Dark-mode screenshots are much more sensitive to lossy chroma subsampling (4:2:0 in standard JPEG) than light-mode captures. Thin red or blue code tokens on a near-black background blur as soon as you save a low-quality JPEG. Use PNG-24 or high-quality WebP for dark UI documentation.

PNG-24, 100% zoom, light compression, and a tight crop are the settings that hold. Banding means the gradient was squeezed too hard. Crop pixels you do not need instead of compressing the ones you do. The OLED screen you captured on is not what readers see if the file has already been quantized into steps.