DEV Community

Ondrej Machala
Ondrej Machala

Posted on

You're Capturing Light Mode and Dark Mode Screenshots Separately. Stop.

#webdev #documentation #automation #css

I was updating our docs last week. The settings page needed a screenshot. So I captured it in light mode, saved it, switched to dark mode, captured it again, saved that too.

Then I realized I needed the mobile version. So I resized the browser. Captured light. Captured dark. Four files for one page.

Multiply by 20 pages and you're managing 80 screenshots manually.

One config, all variants

With heroshot, you define a screenshot once:

{
  "name": "settings-page",
  "url": "https://myapp.com/settings",
  "selector": ".settings-form"
}
Enter fullscreen mode Exit fullscreen mode

Run npx heroshot and you get two files:

heroshots/settings-page-light.png
heroshots/settings-page-dark.png
Enter fullscreen mode Exit fullscreen mode

It captures both color schemes automatically. No extra config.

Add viewports

Want mobile too?

{
  "name": "settings-page",
  "url": "https://myapp.com/settings",
  "selector": ".settings-form",
  "viewports": ["desktop", "mobile"]
}
Enter fullscreen mode Exit fullscreen mode

Now you get four files:

heroshots/settings-page-desktop-light.png
heroshots/settings-page-desktop-dark.png
heroshots/settings-page-mobile-light.png
heroshots/settings-page-mobile-dark.png
Enter fullscreen mode Exit fullscreen mode

One config entry. Four screenshots. All from one command.

Force a single scheme

If your docs only show light mode:

npx heroshot --light
Enter fullscreen mode Exit fullscreen mode

Or in the global config:

{
  "browser": {
    "colorScheme": "light"
  }
}
Enter fullscreen mode Exit fullscreen mode

In your docs framework

Most docs frameworks support light/dark switching. Heroshot generates <picture> tags that automatically swap based on the user's theme:

npx heroshot snippet
Enter fullscreen mode Exit fullscreen mode

Output:

<picture>
  <source srcset="heroshots/settings-page-light.png" media="(prefers-color-scheme: light)">
  <source srcset="heroshots/settings-page-dark.png" media="(prefers-color-scheme: dark)">
  <img src="heroshots/settings-page-light.png" alt="Settings page">
</picture>
Enter fullscreen mode Exit fullscreen mode

The user sees screenshots matching their system theme. No JavaScript. No flicker. Just CSS media queries.

The math

20 pages × 2 themes × 2 viewports = 80 screenshots.

Manual: 80 browser sessions, 80 saves, 80 file renames.

Config-driven: 20 entries, one command.

Top comments (0)