How to Set a Website’s Color Scheme for Screenshots

To capture a page in light or dark mode without changing your computer’s system setting, emulate the page’s prefers-color-scheme value in DevTools. In Chrome or Edge, open the Rendering tool, choose prefers-color-scheme: light or prefers-color-scheme: dark, reload the page, and then take the screenshot.

This changes the preference reported to the webpage. It does not recolor every page automatically. The page must use CSS or JavaScript that responds to prefers-color-scheme; a separate theme switcher may follow its own rules.

What `prefers-color-scheme` controls

prefers-color-scheme is a CSS media feature that lets a site choose styles for a user’s light or dark preference. A page might contain rules such as:

:root {
  color-scheme: light;
  background: white;
  color: #111;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    background: #111;
    color: #eee;
  }
}

When the browser reports dark, the media query can match. If the site has no matching styles, the screenshot may look unchanged. A site-specific light/dark button can also override or supplement the media preference.

Chrome: capture a light or dark screenshot

Open the webpage in Chrome.
Open DevTools with F12, Ctrl+Shift+I on Windows/Linux, or Cmd+Option+I on macOS.
Open the Rendering tool. If it is hidden, use DevTools’ more-tools menu.
Find Emulate CSS media feature prefers-color-scheme.
Select prefers-color-scheme: light or prefers-color-scheme: dark.
Reload the page. Chrome’s documentation directs you to reload after choosing the emulated value.
Verify the page itself changed, then use DevTools’ screenshot command or your normal capture workflow.
When finished, return the control to No emulation.

See Chrome’s Rendering tools documentation for the current control location and labels.

Do not confuse DevTools appearance with page appearance

DevTools can have a dark interface while the inspected webpage remains light. Changing the DevTools theme only changes the tools. The Rendering tool’s emulation changes the preference that the webpage receives.

Edge: capture a light or dark screenshot

Open the page and Microsoft Edge DevTools.
Open the Rendering tool.
Set Emulate CSS prefers-color-scheme to dark or light.
Reload if the page does not immediately recalculate its styles.
Capture the page after checking the rendered result.
Select No emulation when you want normal device or browser behavior again.

Edge also lets you use the Command Menu. Open it, search for dark, light, or emulate, and choose the Rendering command for the desired preference. Microsoft documents this workflow in Emulate CSS media features.

Check that the page really used the selected scheme

Look for a visible change in backgrounds, text, borders, or images.
In the Console, run matchMedia('(prefers-color-scheme: dark)').matches. It should return true in dark emulation.
Inspect an element’s matched CSS rules to confirm that the relevant media query is active.
Check dialogs, menus, sticky headers, and lazy-loaded sections separately. A page can style its main content but leave a component unchanged.
If the page has an in-page theme toggle, test that toggle as a separate state and record which method produced the screenshot.

Automate screenshots with Playwright

For repeatable captures, Playwright can create a browser context with a light or dark color scheme. The API supports light and dark values and can also change the scheme on an existing page. Install Playwright and its browser once:

npm install playwright
npx playwright install chromium

Create screenshot-color-scheme.mjs:

import { chromium } from 'playwright';

const url = process.argv[2] ?? 'https://example.com';
const scheme = process.argv[3] ?? 'dark';

if (!['light', 'dark'].includes(scheme)) {
  throw new Error('The scheme must be light or dark');
}

const browser = await chromium.launch();
const context = await browser.newContext({ colorScheme: scheme });
const page = await context.newPage();

await page.goto(url, { waitUntil: 'networkidle' });
await page.screenshot({ path: `page-${scheme}.png`, fullPage: true });

await browser.close();

Run it with:

node screenshot-color-scheme.mjs https://example.com dark
node screenshot-color-scheme.mjs https://example.com light

To change the preference after creating a page, use:

await page.emulateMedia({ colorScheme: 'dark' });
await page.reload({ waitUntil: 'networkidle' });
await page.screenshot({ path: 'dark.png', fullPage: true });

The official Playwright color-scheme documentation covers context and page configuration.

Automated captures with Python

Playwright’s Python API exposes the same setting:

from playwright.sync_api import sync_playwright

url = "https://example.com"

with sync_playwright() as p:
    browser = p.chromium.launch()
    context = browser.new_context(color_scheme="dark")
    page = context.new_page()
    page.goto(url, wait_until="networkidle")
    page.screenshot(path="page-dark.png", full_page=True)
    browser.close()

Install the package and browser with:

pip install playwright
playwright install chromium

Use color_scheme="light" for a light capture. If you change the setting with page.emulate_media(color_scheme="dark"), reload before capturing when the page initializes its theme during navigation.

Or skip the browser setup

ScreenshotNeo provides a website screenshot API with a dark-mode option, so you can request a rendered capture without managing a local browser. See the ScreenshotNeo API documentation for the available parameters and formats.

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

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', data));

ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers identify the page verdict and whether the shot was billed. Its MCP server lets AI agents such as Claude or Cursor call take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

Troubleshooting

Symptom	Cause	Fix
The page does not change	The site has no `prefers-color-scheme` styles, or uses its own theme state.	Inspect the CSS and test the site’s own theme control.
Only some components change	Different components use different CSS or JavaScript logic.	Check menus, dialogs, embedded frames, and lazy content individually.
Chrome shows the new setting but the screenshot is old	The page initialized its theme before emulation was selected.	Reload after selecting the emulated value.
DevTools is dark but the page is light	DevTools appearance is separate from page media emulation.	Set the value in Rendering.
Playwright cannot launch	The Chromium binary is missing.	Run `npx playwright install chromium` or `playwright install chromium`.
Fonts or images differ between runs	Network timing, font loading, animations, or responsive layout changed.	Wait for the required selector or network idle, disable animations where appropriate, and use a fixed viewport.
The screenshot includes a cookie banner	The banner is part of the page state and was not dismissed.	Accept or hide it before capture, or use ScreenshotNeo’s pre-capture cleanup.

Performance, reliability, and cost

Manual captures: best for a one-off inspection. They have no additional software cost, but the result depends on your current browser state.
Automation: reuse a browser process when capturing many URLs, set a fixed viewport, wait for a meaningful selector, and save the scheme beside the output filename.
Reloads: a reload ensures styles and scripts see the emulated preference from page startup, but it adds navigation time.
Dynamic pages: network idle is useful but is not proof that every visual element is ready. Prefer an application-specific ready selector when one exists.
Cost: DevTools and Playwright use your own machine or CI resources. ScreenshotNeo has 1,000 free shots monthly with no card, then plans of $5 for 3,000, $15 for 15,000, $39 for 60,000, $99 for 250,000, and $249 for 1,000,000; yearly billing provides two months free.
Repeatability: record the URL, scheme, viewport, browser version, and theme-toggle state with each capture so a visual diff can be reproduced.

FAQ

Does dark DevTools force a dark webpage?

No. Use Rendering emulation for the webpage. DevTools’ own appearance setting only changes DevTools.

Can I select a custom color scheme?

The documented CSS preference values are light and dark. A custom brand theme needs the site’s own CSS or theme switcher.

Why does a site’s toggle disagree with DevTools?

The toggle may store a preference in local storage, cookies, or application state. Test that control separately from the system preference emulation.

Do I need to restore No emulation?

Yes, if later captures should follow your normal browser or device preference.

Can an API capture both modes?

Yes. Request one capture with the service’s light setting and another with its dark setting. ScreenshotNeo exposes dark mode as a capture option and supports the same screenshot formats and other capture controls through its API.