SavePage
·SavePage Team

Capturing Dark Mode Screenshots

dark-modecssrendering

Dark mode has become standard on the web. Most modern sites respect the prefers-color-scheme media query and adapt their appearance. When capturing screenshots, you may need to control which color scheme appears.

How dark mode works on the web

Websites detect dark mode through the CSS media query prefers-color-scheme:

/* Light mode (default) */
body {
  background: #ffffff;
  color: #111827;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background: #0f172a;
    color: #f1f5f9;
  }
}

The browser reports the user's system preference. On macOS, if your system is set to dark mode, Chrome tells websites "this user prefers dark." Websites that support dark mode adapt their styles.

Controlling color scheme in headless Chrome

Headless Chrome can be configured to report either light or dark preference through the Chrome DevTools Protocol:

{
  "method": "Emulation.setEmulatedMedia",
  "params": {
    "features": [
      {"name": "prefers-color-scheme", "value": "dark"}
    ]
  }
}

In the SavePage.io API, this is exposed through the colorScheme parameter:

# Light mode (default)
/v1/?url=https://example.com&colorScheme=light

# Dark mode
/v1/?url=https://example.com&colorScheme=dark

Testing both modes

For design review and visual testing, capture both modes of each page:

import requests

API_KEY = "YOUR_API_KEY"
url = "https://example.com"

for scheme in ["light", "dark"]:
    response = requests.get(
        "https://api.savepage.io/v1/",
        params={
            "url": url,
            "colorScheme": scheme,
            "width": 1440,
            "height": 900,
            "format": "png",
        },
        headers={"Authorization": f"Bearer {API_KEY}"},
    )
    data = response.json()
    print(f"{scheme}: {data['image']}")

This gives you side-by-side comparisons for design review.

Common issues

Sites that do not support dark mode. If a site does not use prefers-color-scheme, both captures look identical. The color scheme preference has no effect on sites that have not implemented it.

JavaScript-based dark mode. Some sites toggle dark mode with JavaScript (class-based switching like document.body.classList.add('dark')). These do not respond to the prefers-color-scheme media query. You would need to inject JavaScript to toggle the theme.

Inconsistent implementation. Some sites partially support dark mode. The main content area adapts, but embedded widgets, iframes, or third-party components stay in light mode. Screenshots reveal these inconsistencies.

Image contrast. Screenshots with dark backgrounds compress differently than light ones. Dark JPEG screenshots may show more compression artifacts at lower quality settings. Use quality 85+ or PNG for dark mode screenshots.

Use cases

Design QA. Verify that dark mode looks correct across all pages before shipping.

Documentation. Create screenshots in both modes for docs that match the reader's preference.

Marketing. Some products look more impressive in dark mode. Capture the version that best showcases the product.

Accessibility testing. Dark mode screenshots can reveal contrast issues that are not obvious in light mode. Elements that are barely visible on a dark background indicate contrast problems.

All posts