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

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" } Run npx heroshot and you get two files: heroshots/settings-page-light.png heroshots/settings-page-dark.png 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" ] } Now you get four files: heroshots/settings-page-desktop-light.png heroshots/settings-page-desktop-dark.png heroshots/set