Why your screenshot came out in the wrong theme

The cause: prefers-color-scheme overrides site defaults

When you take a full-page capture, the extension renders the page exactly as the browser sees it at that moment. Modern websites increasingly rely on the CSS prefers-color-scheme media query to detect whether your computer is currently set to Light or Dark mode.

Because Full Page Screenshot makes no network requests and relies entirely on the local DOM state, it captures the visual result of that query. If your operating system is set to Dark mode, the site will apply dark styles—even if the site normally defaults to light mode for logged-out visitors. This results in a "screenshot wrong dark mode" scenario where the output does not match the site's typical appearance.

How the browser determines the theme

The following technical details explain why the theme switches unexpectedly during capture:

Detection method

CSS @media (prefers-color-scheme: dark)

Source of truth

Operating system display settings (macOS, Windows, Linux, iOS, Android)

Override capability

JavaScript can read window.matchMedia(), but cannot easily spoof it without user-agent manipulation

Extension behavior

Full Page Screenshot uses the active tab's current rendered state; it does not force a specific theme

How to force the correct theme before capturing

To ensure your website screenshot reflects the intended design, follow these steps to align the browser's environment with your requirements:

1. 1

   Check your OS display settings

   Open your system preferences (System Settings on macOS, Personalization on Windows). Verify whether Light or Dark mode is currently selected. This is the single source of truth for the prefers-color-scheme query.

2. 2

   Switch your OS theme temporarily

   If you need a light-mode capture but your OS is in dark mode, switch your OS to Light mode. Wait a few seconds for the change to propagate to all applications.

3. 3

   Refresh the target page

   Reload the webpage in Chrome. The browser will re-evaluate the CSS media queries against the new OS setting and apply the correct styles.

4. 4

   Capture immediately

   Run Full Page Screenshot right after the refresh. Do not navigate away, as some sites cache the theme preference in localStorage, which might persist across sessions even after an OS change.

Workarounds for persistent theme issues

If you cannot change your OS settings (for example, if you are working on a shared machine), you have two primary options. First, use a separate Chrome profile with different startup parameters or extensions that enforce a specific color scheme. Second, check if the target site offers a manual theme toggle in its UI. Activating the site's internal toggle usually overrides the prefers-color-scheme query, allowing you to capture the desired look regardless of your OS settings.

For designers needing precise control over visual assets, understanding these rendering quirks is essential. You can learn more about designing for different contexts in our guide for designers.

Where to go next

If this did not resolve it, the next places to look are full page screenshots for designers, website screenshots for design, records and review, and save a webpage as PDF, exactly as it looks.