Capture Dark Mode Screenshots with API

Dark mode is everywhere. Over 80% of developers prefer dark interfaces, and most modern websites now support both light and dark color schemes. If you are building a screenshot service, link preview generator, or visual testing pipeline, you need to capture both modes.

This guide shows you how to capture dark mode screenshots using the ScreenshotAPI, including CSS injection techniques, media query emulation, and practical automation patterns.

Why Dark Mode Screenshots Matter

Dark mode is not just a preference -- it is a feature that affects how your product looks to users. When generating link previews, OG images, or documentation screenshots, you want to match the user's expected experience.

• --Visual testing: Catch CSS bugs that only appear in dark mode
• --Link previews: Match the color scheme your users prefer
• --Documentation: Show both light and dark variants of your UI
• --Monitoring: Verify dark mode renders correctly across deploys

Method 1: CSS Injection

The most reliable way to force dark mode is to inject a CSS media query override before capturing the screenshot. ScreenshotAPI supports the css parameter for this exact purpose.

# Force dark mode via CSS color-scheme
curl "https://screenshotapi-api-production.up.railway.app/v1/screenshot\
  ?url=https://github.com\
  &width=1280&height=800\
  &format=png\
  &css=:root{color-scheme:dark}" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -o github-dark.png

This works for websites that use the color-scheme CSS property or prefers-color-scheme media query. GitHub, Tailwind CSS docs, MDN, and many developer tools support this natively.

Method 2: JavaScript Injection

Some websites use JavaScript-based theme toggling (storing the preference in localStorage or a cookie). For these sites, use the js parameter to set the theme before capture.

# Toggle dark mode via JavaScript
curl "https://screenshotapi-api-production.up.railway.app/v1/screenshot\
  ?url=https://yoursite.com\
  &width=1280&height=800\
  &format=png\
  &js=localStorage.setItem('theme','dark');document.documentElement.classList.add('dark')" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -o site-dark.png

Method 3: Capture Both Modes

For visual testing, you often need both light and dark screenshots. Here is a Node.js script that captures both modes in parallel.

const API_KEY = 'YOUR_API_KEY';
const BASE = 'https://screenshotapi-api-production.up.railway.app';

async function captureBothModes(url) {
  const [light, dark] = await Promise.all([
    fetch(`${BASE}/v1/screenshot?url=${encodeURIComponent(url)}&format=png`, {
      headers: { 'Authorization': `Bearer ${API_KEY}` },
    }),
    fetch(`${BASE}/v1/screenshot?url=${encodeURIComponent(url)}&format=png&css=:root{color-scheme:dark}`, {
      headers: { 'Authorization': `Bearer ${API_KEY}` },
    }),
  ]);

  const fs = require('fs');
  fs.writeFileSync('light.png', Buffer.from(await light.arrayBuffer()));
  fs.writeFileSync('dark.png', Buffer.from(await dark.arrayBuffer()));

  console.log('Both modes captured!');
}

captureBothModes('https://github.com');

Practical Use Cases

Tips for Better Dark Mode Captures

1. Wait for transitions: Some sites animate the theme change. Use the wait parameter (e.g., wait=2000) to let CSS transitions complete.
2. Check for flash of light content: Some sites briefly show light mode before JavaScript toggles the theme. CSS injection is more reliable than JS for this reason.
3. Use WebP format: Dark screenshots often compress better in WebP format, saving bandwidth while maintaining quality.
4. Test with ad blocking: Cookie consent banners often break dark mode styling. Use blockads=true for cleaner captures.

Conclusion

Capturing dark mode screenshots is straightforward with ScreenshotAPI. Whether you are using CSS injection for media query-based themes or JavaScript injection for toggle-based themes, you can automate the entire process and integrate it into your existing workflows.

The combination of CSS/JS injection, ad blocking, and wait parameters gives you full control over how pages render before capture -- making it easy to capture pixel-perfect dark mode screenshots at scale.