How to Capture a Web Page Screenshot with the Correct Browser Color Scheme

To capture a page in a particular browser color scheme, set the browser’s prefers-color-scheme preference to light or dark before taking the screenshot. In Playwright, set colorScheme on the browser context or call page.emulateMedia(); in Chrome DevTools, select a scheme in the Rendering panel and refresh. The setting only changes the browser preference: a site must respond to that preference for its appearance to change.

Use Playwright for repeatable screenshots

For automation, set the scheme on the browser context before opening the page. This keeps the preference in place as the page loads, including for scripts that read the media preference during startup.

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext({
    colorScheme: 'dark',
    viewport: { width: 1440, height: 900 }
  });
  const page = await context.newPage();
  await page.goto('https://example.com', { waitUntil: 'networkidle' });
  await page.screenshot({ path: 'example-dark.png', fullPage: true });
  await browser.close();
})();

Install Playwright first with npm install playwright. Replace dark with light for a light-mode capture. The viewport and fullPage option are included to make the output settings explicit; choose dimensions and capture bounds that match your use case.

Change the scheme on an existing page

If the page is already open, emulate the media preference before capturing. If you change it after the page has loaded, site code that reacts to media-query changes can update, but pages that choose their theme only at startup may need a reload.

await page.emulateMedia({ colorScheme: 'dark' });
await page.screenshot({ path: 'page-dark.png' });

Playwright supports light, dark, and null. Passing null disables the emulation and returns to the browser’s default behavior. The older no-preference value is deprecated. See the [Playwright Page API](https://playwright.dev/docs/api/class-page) and [Playwright emulation guide](https://playwright.dev/docs/emulation).

Capture both schemes

For a paired capture, keep the browser version, viewport, URL, page state, and other screenshot options constant. Change only the color scheme, and use filenames that make the setting clear.

for (const scheme of ['light', 'dark']) {
  const context = await browser.newContext({
    colorScheme: scheme,
    viewport: { width: 1440, height: 900 }
  });
  const page = await context.newPage();
  await page.goto('https://example.com', { waitUntil: 'networkidle' });
  await page.screenshot({ path: `example-${scheme}.png`, fullPage: true });
  await context.close();
}

Use Chrome DevTools for an interactive preview

Open the page in Chrome and open DevTools.
Open the Rendering panel. If it is not visible, open the DevTools command menu and search for “Show Rendering.”
In the prefers-color-scheme emulation control, choose light or dark.
Refresh the page, inspect the rendered result, then capture it with your chosen screenshot method.

DevTools is handy for a one-off visual check. Playwright is better suited to repeatable scripted captures because the preference can be declared alongside the rest of the browser context settings. See Chrome’s guide to [emulating CSS media features](https://developer.chrome.google.cn/docs/devtools/rendering/emulate-css?hl=en).

What the color-scheme setting changes

The browser preference is exposed to page styles and scripts, including CSS rules such as @media (prefers-color-scheme: dark). It does not force a site to use a dark palette or override an explicit theme selector. A site may ignore the preference, use its own saved theme choice, or apply a theme through application logic. These are site-specific implementation choices; browser emulation only sets the media preference.

Choose the mode that matches what you want to document or validate:

Goal	Setting	Notes
Check a site’s default bright appearance	`light`	Explicitly sets the light preference.
Check a site’s dark appearance	`dark`	Works when the site responds to the preference or has no overriding theme choice.
Use the browser’s normal behavior	`null` in Playwright	Disables Playwright’s color-scheme emulation.

Or skip the browser setup

ScreenshotNeo accepts a color-scheme option through its screenshot API, alongside viewport and output settings. Make a single request to capture a page without managing a browser process yourself. The example requests WebP output in dark mode; see the ScreenshotNeo API documentation for the supported parameter names and response details.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com \
  -d color_scheme=dark \
  -o example-dark.webp

ScreenshotNeo accepts cookie banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server gives AI agents tools to take screenshots, get page information, and capture PDFs. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.

Troubleshooting

The screenshot looks the same in light and dark mode

Confirm the scheme was set before navigation, then check whether the page responds to prefers-color-scheme. A saved theme, an in-page toggle, or site-specific scripts may determine the visible theme instead. Try refreshing after changing DevTools emulation or reload the page after changing the preference in Playwright.

Playwright reports an invalid color scheme

Use light, dark, or null. Do not use the deprecated no-preference value. Check spelling and capitalization in the context option or emulateMedia() call.

The DevTools setting seems to have no effect

Verify that the Rendering panel’s emulation control is set to the intended value, then refresh. If the rendered result still does not change, the site may not use the media preference or may override it with an application-level theme choice.

The automated capture is inconsistent

Set the scheme explicitly for every browser context, and hold viewport and page state constant when comparing outputs. Wait for the page to reach the state you intend to capture; network activity may continue on sites that never become idle, so choose a wait condition that fits the page rather than assuming every site behaves alike.

Performance, reliability, and cost

Color-scheme emulation itself is a browser preference setting. Most capture time is spent launching or reusing the browser, loading the page, waiting for required content, and writing the screenshot. Reusing a browser process can reduce repeated startup work, while separate contexts help keep captures isolated. For reliable comparisons, set all relevant context options explicitly and capture only after the page reaches a known state.

With a self-hosted Playwright workflow, account for the compute, browser maintenance, and engineering time needed to operate the capture process; the amount depends on your workload and infrastructure. A screenshot API trades that setup for per-plan usage limits and service behavior. ScreenshotNeo’s published plans range from a free 1,000 screenshots per month to paid plans starting at $5 for 3,000; yearly billing gives two months free, and every feature is on every plan. Review the current plan details on ScreenshotNeo.

FAQ

Does dark mode change the website’s saved settings?

Browser color-scheme emulation sets a browser media preference for the capture. Whether the site saves or changes a theme depends on that site’s own behavior.

Can I use this for visual regression screenshots?

Yes. Capture the same page with explicit scheme, viewport, browser, and page state settings on each run so the comparisons have consistent inputs.

Should I use DevTools or Playwright?

Use DevTools to preview a page interactively. Use Playwright when you need scripted captures or want to apply the same setting across repeat runs.