Dark mode screenshots with one parameter

Most modern sites switch themes based on the prefers-color-scheme media query. Snapopa lets you set it per capture:

{
  "url": "https://github.com",
  "colorScheme": "dark"
}

The browser reports the chosen scheme to the page, which then renders its own dark theme exactly as it would for a visitor with dark mode enabled.

Why not just invert colors?

Inverting or filtering a light screenshot produces something that looks dark but wrong - photos turn negative, brand colors shift, and shadows glow. Setting the media preference lets the site's designers decide how dark mode should look.

Light and dark side by side

Documentation and marketing pages often want both. Fire two requests with the only difference being colorScheme:

for scheme in light dark; do
  curl -s -X POST https://api.snapopa.com/capture \
    -H "Authorization: Bearer $SNAPOPA_API_KEY" \
    -H "Content-Type: application/json" \
    -d "{\"url\":\"https://example.com\",\"colorScheme\":\"$scheme\"}" \
    | jq -r '.data.fileUrl'
done

Because the scheme is part of the cache key, both variants can be cached independently with responseCache.

Sites without dark mode

If a site ignores prefers-color-scheme, you will get the light theme regardless. Some sites store the theme in a cookie or localStorage instead; those will not respond to this setting.