How to Capture Mobile Screenshots of a Website with Dark Mode Enabled

To capture a mobile website screenshot in dark mode from a desktop, use Chrome DevTools: enable Device Mode, choose a mobile viewport, set the emulated prefers-color-scheme value to dark in the Rendering panel, reload the page, then capture the viewport or full page. On an iPhone, open the site in Safari with dark appearance active, take a screenshot, and select Full Page in the preview if you need the whole page.

These methods test different things. Chrome’s dark color-scheme emulation asks the website to display its own dark theme. Chrome’s Enable automatic dark mode instead generates a dark treatment for a light-themed site. A real phone captures the actual device and browser environment; desktop emulation is useful for quick responsive checks but only approximates device behavior.

1. Choose the capture method

Need	Use	What it captures
Check the site’s own dark theme at a mobile width	Chrome DevTools Device Mode and prefers-color-scheme: dark	A simulated mobile viewport with the site responding to a dark preference
See how Chrome darkens a site that has no dark theme	Chrome DevTools Enable automatic dark mode	Chrome’s generated dark appearance, not a site-designed theme
Capture the actual iPhone page	Safari on the iPhone	The page as rendered on the device; Safari can save a full-page capture
Automate repeated captures	A screenshot API such as ScreenshotNeo	Programmatic output using a configured viewport, device preset, and dark mode

For layout work, desktop emulation is fast. When browser chrome, operating-system behavior, or device-specific layout matters, validate on the target phone or in Simulator. Safari’s Responsive Design Mode can preview viewport sizes and pixel ratios, but Apple cautions that presets only approximate real device behavior, including effects from the address bar, keyboard, and form fields. See Apple’s Responsive Design Mode documentation.

2. Capture a mobile dark-mode screenshot in Chrome DevTools

1. Open the website in Chrome on your computer.
2. Open DevTools, then turn on Device Mode. Choose a mobile device preset or enter the viewport dimensions you want.
3. Open the DevTools Rendering panel. Find Emulate CSS media feature prefers-color-scheme and select dark.
4. Reload the page so the site can respond to the emulated preference.
5. In Device Mode, open More options and choose Capture screenshot for the visible viewport or Capture full size screenshot for the full page.

Chrome’s Device Mode and screenshot choices are documented in Simulate mobile devices with Device Mode. The preference control is described in Emulate CSS media features.

Use the site’s dark theme or Chrome’s generated dark treatment?

Choose prefers-color-scheme: dark when you want to test the website’s own theme. If the page stays light, the site may not implement a dark theme for that preference. To see Chrome generate a dark appearance for a light-themed page, use Enable automatic dark mode in the Rendering panel. Chrome says this also sets the emulated color preference to dark, but the resulting colors are generated by Chrome rather than designed by the website. See Chrome’s documentation on automatic dark mode.

Viewport screenshot or full-page screenshot?

• Viewport: captures what is currently visible at the selected mobile dimensions. Use it for above-the-fold appearance, navigation, and first-screen layout.
• Full page: captures beyond the visible viewport. Use it to review a long landing page, article, or page layout from top to bottom.

For full-page work, check content that loads as you scroll. Lazy-loaded images or sections may not appear until they enter the viewport. If the result is incomplete, scroll through the page first, wait for content to load, then capture again.

3. Capture a dark-mode webpage on iPhone

1. Make sure dark appearance is active on the iPhone, then open the webpage in Safari.
2. On an iPhone with Face ID, quickly press and release the side button and volume-up button together. On an iPhone with a Home button, quickly press and release the side button and Home button together.
3. Tap the screenshot preview. Choose Full Page to capture the webpage beyond the visible screen, then crop or save it as needed.

Apple documents both button combinations and Safari’s Full Page screenshot option in Take a screenshot on iPhone. The exact Settings route for changing dark appearance can vary by iOS version, so check the device’s current Display & Brightness settings if dark appearance is not already enabled.

A screenshot from Safari records the page as it appears on that iPhone. It is the right choice when the real device matters, while DevTools is more convenient for repeatable viewport checks across sizes.

4. Automate captures with ScreenshotNeo

For repeated or scripted captures, ScreenshotNeo provides a website screenshot API and MCP server. It supports dark mode, device presets, custom viewport dimensions, full-page capture, and PNG, JPEG, WebP, or PDF output. For a one-off screenshot, the browser workflows above are enough; an API is useful when a capture needs to be part of a script or repeatable process.

For a mobile-sized dark-mode WebP capture, make a GET request to the API with a mobile viewport and dark mode enabled. The parameter names used by other screenshot APIs also work. See the ScreenshotNeo API documentation for the current request options.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -d width=390 \
  -d height=844 \
  -d dark_mode=true \
  -d format=webp \
  -o mobile-dark.webp

Python

import requests

params = {
    "access_key": "YOUR_API_KEY",
    "url": "https://stripe.com",
    "width": 390,
    "height": 844,
    "dark_mode": "true",
    "format": "webp",
}
response = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params=params,
    timeout=90,
)
response.raise_for_status()
with open("mobile-dark.webp", "wb") as image:
    image.write(response.content)

Node.js

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com',
  width: '390',
  height: '844',
  dark_mode: 'true',
  format: 'webp'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('mobile-dark.webp', image));

Replace the example URL and dimensions with the target page and viewport. Keep the API key on the server or in a protected environment variable; do not expose it in public client-side code. Confirm parameter names and accepted values in the API docs when adapting the request.

Useful capture options

Option	When it helps
Device preset or width and height	Match a mobile profile or define a consistent custom viewport
Full-page capture	Capture content beyond the initial screen, including lazy images loaded during capture
Dark mode	Request a dark color-scheme rendering for pages that support it
Retina scale	Increase pixel density when the output will be inspected closely or used in a higher-resolution asset
Wait for selector, delay, or network idle	Give client-rendered content time to appear before capturing
Custom CSS or JavaScript	Apply capture-specific adjustments or interact with a page before capture
Hide selectors	Exclude specific page elements from the screenshot
Image format and resizing	Choose PNG, JPEG, or WebP and adjust output dimensions
Cookies, headers, user agent, or Authorization	Capture pages that vary by session or request context
Cache with a chosen TTL	Reuse a result when the page and capture settings do not need a fresh render
Bulk capture and async jobs	Process multiple URLs or use jobs with signed webhooks for larger capture workflows

Or skip the browser setup

ScreenshotNeo captures a page with one API request. The example below requests a mobile-sized dark-mode WebP screenshot; use your own URL and API key. Full options are in the docs.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -d width=390 -d height=844 -d dark_mode=true -d format=webp \
  -o mobile-dark.webp

• Cookie banners are accepted and removed before the shot; 60+ known consent platforms, newsletter popups, and chat widgets can be removed. Each cleanup step can be turned off.
• Bot checks, blank pages, and failed loads are never billed. Response headers report the page verdict and whether the request was billed; cache hits also cost nothing.
• An MCP server gives AI agents tools for screenshots, page information, and PDF capture.
• The free plan includes 1,000 screenshots a month with no card. Paid plans start at $5 for 3,000 screenshots.

Sign up free for 1,000 screenshots a month, with no card required.

5. Troubleshooting

Symptom	Likely cause	Fix
Chrome screenshot remains light	The preference was not set to dark, the page was not reloaded, or the site does not implement a dark theme	Set prefers-color-scheme to dark and reload. If you need to inspect Chrome’s generated dark treatment, enable automatic dark mode and label the result accordingly.
Colors differ from the phone	Desktop emulation does not reproduce every device, browser, or operating-system behavior	Validate on the target phone or Simulator when exact device rendering matters.
Full-page image misses sections or images	Content may be lazy-loaded or rendered after initial load	Scroll through the page and wait for content before capture; for automation, use a suitable wait condition and full-page capture.
The screenshot shows a consent banner or popup	The page displays an overlay before capture	Dismiss it manually in the browser. With ScreenshotNeo, the supported consent, newsletter, and chat cleanup steps can remove known overlays before capture.
API request returns an error instead of an image	Key, URL, parameters, or access may be invalid	Check the API key and target URL, review the response and request settings, and compare parameter names with the API documentation.
Automated image appears blank or incomplete	The page may be blocked, slow, or dependent on client-side rendering	Wait for a selector, a delay, or network idle; check the page verdict and response headers. For browser capture, reload after setting the emulated preference.

6. Performance, reliability, and cost

For a one-time capture, DevTools or Safari avoids API setup. Desktop emulation is quick for responsive checks; real-device validation takes longer but answers questions emulation cannot settle. Full-page screenshots and high pixel density produce larger images than viewport captures, so use the smallest capture dimensions and image format that meet the review or delivery need.

Repeated captures can be automated with an API. Wait only for the condition the page needs: a specific selector, a short delay, or network idle. Reuse cached results when the page and settings have not changed and freshness is not important. For larger batches, ScreenshotNeo supports up to 100 URLs per bulk call and asynchronous jobs with signed webhooks. Its usage API can help track requests. Only clean shots are billed; bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the verdict and billing status.

ScreenshotNeo plans are Free: 1,000 shots per month; Starter: $5 for 3,000; Growth: $15 for 15,000; Pro: $39 for 60,000; Scale: $99 for 250,000; and Business: $249 for 1,000,000. Yearly billing gives two months free, and every feature is on every plan. See ScreenshotNeo for the product and sign-up details.

7. Frequently asked questions

Does prefers-color-scheme: dark force every website to become dark?

No. It communicates a dark preference to the page. The site needs to provide styling for that preference. Chrome’s automatic dark mode is a separate option that generates a dark treatment.

Can I capture the entire page on iPhone?

Yes. In Safari, take a screenshot, tap its preview, and choose Full Page when the option is available.

Is a desktop mobile preset identical to a real phone?

No. It approximates a device viewport. Check on the target device or Simulator when browser and operating-system details affect the result.

Which output format should I choose?

PNG is useful when exact edges and lossless output matter; JPEG is useful for photographic content; WebP is a compact option supported by ScreenshotNeo. Choose based on the destination and verify that it accepts the selected format.