Dezine Zync

The personal blog of Nikhil Nigade

Better App Review Screenshots — 2026 Guide

We’ve all been there, we’re preparing the generate “views” for our app’s reviews from App Store Connect, and we may naively copy the contents from the reviews tab of our app, decorate them with the right amount of stars, perhaps even use the same font from the app if it’s unique, to keep the brand on-point.

This sometimes, and as per my observations quite often, lead to the question of legitimacy of these review posts! So the best way to capture them directly from App Store Connect using Safari (or whichever browser you prefer whose Developer Tools support screenshotting DOM elements).

Here’s how it looks:

OH WAIT A MINUTE! That’s dark mode… and yes, you’re supposed to see that. This is a direct export from my presentation slide. So step number 1, grab this rudimentary AppStoreConnect dark mode user-stylesheet I made and configure it with your app of choice for this purpose. Some browsers support it directly, for Safari, I use Cascadea.


/* App Store Connect Basic Dark Mode Override */
:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  html {
    filter: invert(1) hue-rotate(180deg);
    background-color: Canvas;
  }

  /* Re-invert images and charts so they look normal */
  img, 
  canvas, 
  video, 
  .chart-container,
  [style*="background-image"] {
    filter: invert(1) hue-rotate(180deg);
  }

  .idyRmo {
    background-color: color-mix(Canvas, CanvasText 8%)
  }
}

Source

This also uses semantic colours for the review cards, and won’t clobber up light/auto mode when that is enabled.

At this point, it’s a good idea to ensure Developer Tools are enabled in your browser.

Next, open the reviews page for your app, and scroll down to the review you’d like to snapshot. Right click on the review you’d like to snapshot, and click on Inspect Element menu option. This will bring up developer tools, with a div highlighted with the css class similar to Box-sc…. Hover over that element and you can verify it’s the same one you’d like to snapshot.

At this point, you have two options:

  1. Right click on the DOM element and click on Capture Screenshot, repeat this step for all other reviews you’d like to capture screenshots for.
  2. You notice, these cards contain a Developer Response section if you’ve responded to the review, and buttons to edit your response, add a reply or report a concern. You can expand the DOM element, find the relevant elements, add add display: none to the CSS sections of these classes to hide them temporarily for taking screenshots. Once you’ve done this, you can perform the first option.

At this point, you’ll have a bunch of screenshots ready to go. If you’re using a Retina Display (it’s 2026, stop punishing your retinas if you’re using a non-retina display unless you have a medical requirement to do so), these screenshots will also be captured at @2x resolutions, giving you cripsy crispy text!

Isn’t that neat!

Back