What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
To capture a website in light or dark mode without changing your computer’s system setting, use your browser’s DevTools Rendering tool. Set the emulated CSS media feature prefers-color-scheme to light or dark, reload the page, and then take the screenshot. When finished, return the setting to No emulation.
What you are changing—and what you are not
prefers-color-scheme is a CSS media feature. A website can use it to detect whether a visitor prefers a light or dark presentation and apply matching styles. DevTools emulation changes the preference reported to the page; it does not recolor every page universally.
If a site has no styles for the selected preference, nothing may visibly change. A site may also use its own theme switcher, a saved account preference, or JavaScript logic that is independent of prefers-color-scheme. In those cases, browser emulation and the site’s own light/dark control can produce different results.
Do not confuse a dark DevTools interface with a dark webpage. DevTools appearance settings change the developer tools themselves. The Rendering tool’s media emulation changes how the webpage is rendered.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →#1 Best Overall
- SPECIFICATIONS: Monitor calibration colorimeter with Easy 1 2 3 software workflow, USB C connection, compact body approx. 34mm tall x 37mm diameter, adjustable counterweight for screen placement, supports up to 2 displays, brightness target selection including Native or Photo with before and after check.
- EASY SETUP: Guided 1 2 3 workflow makes calibration fast and approachable, helping photographers and creators achieve more accurate color without complicated settings, so you can edit with confidence and trust what you see on screen.
- COLOR ACCURACY: Corrects common monitor color shifts to deliver truer tones and more reliable contrast, improving consistency across editing sessions and helping your images look closer to final output on other screens and devices.
- DUAL DISPLAY SUPPORT: Calibrates up to 2 monitors for matching color across a multi screen workspace, ideal for photo editing, video work, and creative setups where consistent viewing on both displays matters.
- BEFORE AFTER CHECK: Built in comparison view lets you instantly see the difference after calibration, making it easy to confirm improved accuracy and maintain consistent results by repeating the process on a regular schedule.
Set light or dark mode in Chrome
- Open the page you want to capture.
- Open Chrome DevTools with
Ctrl+Shift+Ion Windows/Linux orCmd+Option+Ion macOS. - Open the Rendering tool. If it is not shown, open DevTools’ more-tools menu and select it.
- Find Emulate CSS media feature prefers-color-scheme.
- Select
prefers-color-scheme:lightorprefers-color-scheme:dark. - Reload the page. Chrome’s documented workflow directs you to reload after selecting the emulated value.
- Check the page itself, including menus, dialogs, images and any lazy-loaded content, before taking the screenshot.
- Capture the page using your normal screenshot method.
When you are done, return to the Rendering tool and choose No emulation. The page will again follow the normal browser and device preference.
If the Rendering tool is hidden
DevTools contains more tools than can fit in its default tab strip. Open the more-tools menu and add or select Rendering. The exact placement of that menu can vary with DevTools width and browser version, but the tool name remains Rendering.
Set the color scheme in Microsoft Edge
- Open the target webpage and Edge DevTools.
- Open the Rendering tool.
- Under Emulate CSS media feature prefers-color-scheme, select the light or dark value.
- Reload the page if the visual state does not update immediately, then inspect the rendered page.
- Take the screenshot.
- Choose No emulation when you want to restore normal behavior.
Use Edge’s Command Menu
Edge also lets you use the Command Menu in DevTools. Open it, search for dark, light or emulate, and select the Rendering command for the desired preference. To restore normal behavior, use the command that stops emulating prefers-color-scheme, or choose No emulation in Rendering.
Why the page may not change
The site does not implement the media feature
Emulation only changes the preference exposed to the page. It cannot create a dark stylesheet that the site does not provide. If the page uses fixed colors, the screenshot will remain unchanged.
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 errorsRank #2
- 𝗘𝗡𝗦𝗨𝗥𝗘 𝗔𝗖𝗖𝗨𝗥𝗔𝗧𝗘 𝗖𝗢𝗟𝗢𝗥: Groundbreaking lens-based color engine provides a higher level of color accuracy for multiple monitors. Spyder X Pro features room-light monitoring, automatic profile changing and significantly more precise screen color, shadow detail and white balance.
- 𝗘𝗔𝗦𝗬-𝗧𝗢-𝗨𝗦𝗘: Spyder X Pro is so intuitive, you don’t have to be a color expert. It features quick and easy single-click calibration and wizard workflow with 12 predefined calibration targets for advanced color accuracy.
- 𝗤𝗨𝗜𝗖𝗞 𝗖𝗢𝗟𝗢𝗥 𝗖𝗔𝗟𝗜𝗕𝗥𝗔𝗧𝗜𝗢𝗡: Calibrating your monitor to achieve color precision is quick and easy, taking just a minute or two.
- 𝗖𝗢𝗠𝗣𝗔𝗥𝗘 𝗕𝗘𝗙𝗢𝗥𝗘 & 𝗔𝗙𝗧𝗘𝗥: SpyderProof functionality provides before-and-after evaluation of your display and allows you to see the difference using your own images.
- 𝗖𝗔𝗟𝗜𝗕𝗥𝗔𝗧𝗘 𝗠𝗨𝗟𝗧𝗜𝗣𝗟𝗘 𝗗𝗜𝗦𝗣𝗟𝗔𝗬𝗦: Spyder X software allows you to calibrate multiple laptops and desktop monitors.
The site uses a separate theme switcher
Many sites provide a sun/moon button or a setting in an account menu. That control can override, supplement or ignore the system preference. Try the site’s control after setting emulation, and record which state you actually need to capture.
The page needs a reload
Some styles and scripts evaluate the preference during initial page load. Reload after changing the emulated value, then wait for the page to finish rendering before capturing.
You changed DevTools instead of the page
A dark DevTools theme affects only the tools window. Verify the webpage content, navigation, forms and background—not the DevTools chrome—before taking the screenshot.
Make a reliable manual capture
- Set the viewport first. Use the same window size, device emulation and zoom for every light/dark comparison.
- Reload after changing the preference. This prevents styles initialized on page load from being left in the previous state.
- Wait for dynamic content. Check fonts, images, menus, cookie dialogs and client-rendered sections.
- Check both states. A site can support dark mode on its main page but leave embedded widgets or third-party content unchanged.
- Capture the page, not the tools. Hide DevTools or use your browser’s page screenshot command after the rendered state is correct.
- Restore No emulation. Leaving emulation enabled can make later browsing appear to use an unexpected theme.
One-off screenshots versus repeatable automation
Manual DevTools capture
DevTools is the quickest option for a single page or an occasional check. It gives you a visible confirmation of the emulated preference and lets you interact with site-specific theme controls. Its weakness is repeatability: viewport, reload timing, login state, animations and page changes must be controlled by the person taking each capture.
Recommended Free Tools
Rank #3
- ACHIEVE TRUE COLOR - Ensures your monitor displays colors accurately, critical for photography, design, and video editing, with unlimited gamma, whitepoint, and brightness settings. New Deeper Calibration measures more points across the grayscale for an average 30%+ accuracy improvement (varies by display), or choose Standard Calibration for professional-grade results in 90 seconds.
- OPTIMIZE DISPLAY PERFORMANCE - Calibrate a wide range of backlight types including Wide LED, Standard LED, OLED, QD-OLED, Apple Liquid Retina XDR, and Mini LED, with support for brightness up to 12,000 nits, ensuring consistent and accurate color across all your screens.
- ENHANCE WORKFLOW EFFICIENCY - Projector Calibration feature allows for accurate color representation during presentations, while Display Analysis/MQA provides comprehensive screen quality assessment. Export 3D LUTs (.cube) for compatible video monitors, with support for Rec.709, Rec.2020, and DCI-P3.
- WIDE DEVICE COMPATIBILITY - Supports unlimited number of displays (per computer capability) and offers native USB-C connection plus an included USB-A adapter, ensuring seamless connectivity with modern laptops and desktop computers for streamlined use. StudioMatch and SpyderTune keep color consistent across multi-monitor setups.
- USER-FRIENDLY SOFTWARE - Features an intuitive interface supporting 10 languages, including English, Spanish, French, German, Chinese and Japanese, making calibration accessible to a global audience. Existing SpyderPro users upgrade to the new software free.
Browser automation
For repeated captures, use a browser automation library that controls Chrome or Chromium through the DevTools Protocol and supports color-scheme emulation. The exact method and option names can change between library releases, so check the current Puppeteer documentation for the release you install before putting an emulation call into production. Your workflow should set the viewport, emulate the desired scheme, navigate, wait for the page to settle, capture, and repeat for the other scheme.
Do not assume that emulation will operate a site’s own theme button, preserve an authenticated session, or make third-party widgets theme-aware. Those behaviors need separate automation steps and verification.
Or skip the browser setup
ScreenshotNeo provides a website screenshot API and MCP server. Send one request with the URL and choose the color-scheme option for a light or dark capture, along with the viewport and other capture settings your page requires. Before the capture, it accepts the cookie or consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be turned off. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and the response identifies the result with X-Page-Verdict and X-Billed headers. Its MCP tools—take_screenshot, get_page_info and capture_pdf—let Claude, Cursor and other MCP clients request captures.
See the ScreenshotNeo documentation for the complete option list and current parameter names.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo supports full-page captures with lazy images loaded, CSS-selector element captures, dark mode, device presets and custom viewports, retina scale, PDF output, custom CSS and JavaScript, click-before-capture actions, hidden selectors, waits, request and resource blocking, custom headers and cookies, user agents, authorization, timezone and geolocation, transparent backgrounds, resizing, configurable caching, signed links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API and an OpenAPI specification. The parameter names used by other screenshot APIs also work, which can simplify migration.
Rank #4
- QUICK & EASY COLOR CALIBRATOR: Whether you're editing photos, designing graphics, or producing content, SpyderExpress helps you view colors with precision and confidence; Ideal for creators who want accurate, lifelike colour in both digital and print
- READY FOR THE LATEST DISPLAYS: The only calibrator of its kind to currently support the latest Liquid Retina XDR displays, including the MacBook M4 mini-LED screen, alongside everyday monitors; Upgrade the software for OLED and advanced mini-LED support
- 3x FASTER THAN TYPICAL ENTRY-LEVEL TOOLS: Get edit-ready color in just 90 seconds - see skin tones, shadows, and highlights as they’re meant to be, with consistent, trustworthy results
- GROW YOUR TOOLKIT WITH SOFTWARE UPGRADES: Unlock advanced features like ambient light adjustment, multi-display profiling, and DevicePreview - shows how your work will appear across different devices; No new hardware needed, upgrade when you're ready
- REAL COLOUR, REAL EASY: Download the software, plug in the device, and follow the 3 simple steps. Save profiles, calibrate up to 3-connected displays per workstation, and recalibrate before editing to ensure your screen always shows true-to-life color
Plans include 1,000 free shots per month with no card, then Starter at $5 for 3,000, Growth at $15 for 15,000, Pro at $39 for 60,000, Scale at $99 for 250,000 and Business at $249 for 1,000,000. Yearly billing gives two months free, and every feature is available on every plan. Sign up free to get 1,000 screenshots a month with no card.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting checklist
Light and dark look identical
- Confirm that the Rendering control, not DevTools appearance, is set.
- Reload after changing the value.
- Check whether the site has CSS rules for
prefers-color-scheme. - Try the site’s own theme control.
Only part of the page changes
Embedded frames, third-party widgets and images may have their own styles or may not support the preference. Inspect the specific region and treat it as an independent component.
The screenshot shows a consent banner or chat bubble
Dismiss those elements manually before a one-off capture, or hide them with automation. For an API workflow, ScreenshotNeo removes supported consent platforms, newsletter popups and chat widgets before capture.
Free tools Windows power users keep installed
One-click scans. No signup required.
The page is blank or incomplete
Wait for navigation and client-side rendering, check the URL and authentication state, and capture after required selectors appear. If an API reports a bot check, timeout, failed load or blank page, investigate the page response rather than treating the image as a valid screenshot.
Best Value
- Automated Color and Brightness Calibration
- Full-spectrum color sensor
- Single sensor calibrates multiple displays
- Improved accuracy and stability - The fourth-generation Spyders have double-shielded color filters for even closer match to CIE color standards and improved long term stability. Average accuracy is up 26% and consistency between Spyder units is 19% better.
- Fast Re-calibration Assistant - The ReCAL feature makes it quick and easy to recalibrate your display to compensate for changes over time.
The wrong state returns later
Check that your automation sets the color preference for every job, not only the first browser context. Clear or control cached results when comparing rapidly changing pages, and restore No emulation in manual sessions.
Choosing the right workflow
| Need | Best approach | Important check |
|---|---|---|
| One screenshot now | Chrome or Edge Rendering tool | Reload after selecting light or dark |
| Compare two themes manually | Capture once per emulated value | Keep viewport and page state identical |
| Many URLs or scheduled jobs | Browser automation or ScreenshotNeo API | Control waits, authentication, caching and failures |
| AI-agent workflow | ScreenshotNeo MCP server | Use the documented MCP tools and inspect verdict headers |
FAQ
Does this change my computer’s dark-mode setting?
No. DevTools emulates the preference for the selected page. Your operating-system setting remains unchanged.
Can I force a site that has no dark stylesheet to become dark?
No. The emulation triggers a site’s existing response to prefers-color-scheme; it is not a universal color-inversion filter.
Should I leave emulation enabled?
Only while you need it. Choose No emulation afterward so later pages follow your normal preference.
Frequently Asked Questions
Can a browser extension change only one website’s color scheme?
An extension may apply its own styles, but the documented browser workflow for testing a site’s native light/dark response is DevTools’ emulated prefers-color-scheme setting. Extension behavior depends on the extension and can differ from the site’s actual theme implementation.
Why does a dark screenshot still contain light embedded content?
Embedded frames and third-party widgets can use separate styles or ignore prefers-color-scheme. Inspect and configure those components separately.
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.
