Free tools Windows power users keep installed
One-click scans. No signup required.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Use Puppeteer’s page.emulateMediaFeatures() to set prefers-color-scheme to dark, then capture the page with page.screenshot(). Set the preference before navigation if the site needs it during its initial render. This emulates the browser’s media-feature preference; it does not force every website to use a dark theme.
Set dark mode and capture a screenshot
With an existing Puppeteer page, the essential code is:
await page.emulateMediaFeatures([
{ name: 'prefers-color-scheme', value: 'dark' },
]);
await page.screenshot({ path: 'screenshot.png' });Puppeteer’s documented example uses this media feature and value, and verifies the result with matchMedia('(prefers-color-scheme: dark)').matches. See the Puppeteer Page.emulateMediaFeatures API.
Recommended Free Tools
Complete runnable Node.js example
Install Puppeteer in a Node.js project with npm install puppeteer. The following script launches a browser, creates a page, applies the preference before navigating, waits for the page’s load event, and saves a screenshot:
#1 Best Overall
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.emulateMediaFeatures([
{ name: 'prefers-color-scheme', value: 'dark' },
]);
await page.goto('https://example.com', { waitUntil: 'load' });
const seesDarkPreference = await page.evaluate(
() => matchMedia('(prefers-color-scheme: dark)').matches,
);
console.log('Page sees dark preference:', seesDarkPreference);
await page.screenshot({ path: 'screenshot.png' });
} finally {
await browser.close();
}
})();Replace https://example.com with the page you want to capture. The check should print true when the page sees the emulated preference. waitUntil: 'load' waits for the load event, but some sites render important content later; use a site-specific readiness condition when needed.
Choose when to emulate the preference
Apply the media feature to the same page you will navigate and capture. For sites that choose their initial theme during page loading, set it before calling page.goto(), as in the complete example. If you set it only after navigation, scripts or styles involved in the initial render may already have run.
To verify the browser preference independently of the screenshot, evaluate:
const seesDarkPreference = await page.evaluate(
() => matchMedia('(prefers-color-scheme: dark)').matches,
);Set screenshot scope and output
page.screenshot() returns image data by default; use path to save it to a file. Puppeteer’s screenshot options let you control the capture:
Rank #3
fullPage: truecaptures the full page rather than just the viewport.clipcaptures a specified region.typeselects an image format; otherwise Puppeteer infers the type from the filename extension.omitBackground: trueomits the default background so the output can be transparent.
For example, save a full-page WebP image with await page.screenshot({ path: 'page.webp', fullPage: true });. Refer to the Puppeteer ScreenshotOptions and Page.screenshot API references for the available options.
Troubleshooting
The media query returns false
Confirm that emulateMediaFeatures() completed successfully on the same page used for navigation and capture, and that the feature is spelled prefers-color-scheme with the value dark. Check it with the documented matchMedia expression.
The query returns true, but the page still looks light
A true result means the page sees the dark preference; it does not prove the site uses that preference to select its appearance. The site may use an application-specific theme toggle or saved setting instead. If so, use the site’s own control or setup in addition to media-feature emulation.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
The screenshot is incomplete or captured too early
Waiting for the browser’s load event may not be enough for content rendered afterward. Wait for a selector that identifies the content you need, or use another readiness condition that matches the site’s behavior before taking the screenshot. Puppeteer’s Screenshots guide covers navigation and capture basics.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
ScreenshotNeo takes website screenshots through an API. One GET request can return an image or PDF; its API accepts the parameter names used by other screenshot APIs, which can make switching easier. See the ScreenshotNeo API documentation.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture, and each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed; response headers report the page verdict and billing status. Its MCP server provides screenshot tools for AI agents. The free plan includes 1,000 screenshots per month with no card required; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan.
Frequently Asked Questions
What does `prefers-color-scheme: dark` change in Puppeteer?
It makes the page see a dark color-scheme preference through the media feature. Whether the site changes its appearance depends on the site’s own theme implementation.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsCan I verify dark preference without looking at the screenshot?
Yes. Evaluate `matchMedia(‘(prefers-color-scheme: dark)’).matches` in the page; it should return `true` after emulation.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
