Useful Drawer

Why Your Screenshot Came Out in the Wrong Theme

You captured a light page and got a dark image, or the other way round. The page was not wrong — it was rendering for a setting you had forgotten about.

·5 min read

You send a colleague a screenshot of a page and they reply that it looks nothing like what they see. Yours is dark, theirs is light. Or you capture a page for a document and the image comes back in a colour scheme you did not choose.

The page was not wrong. It was rendering for a setting that belongs to your computer rather than to the site.

What is actually happening

Most sites now ask the browser a question before they decide how to look: does this person prefer light or dark? The browser answers from the operating system, and the page styles itself accordingly. Nobody is asked and nothing is announced.

A screenshot records what was drawn, so it records the answer your machine gave. If your laptop switches to dark at sunset, a page captured in the evening and the same page captured that morning are genuinely different pictures.

That is why the recipient sees something else. They are not looking at a different page; they are a different answer to the same question.

The three places the setting can come from

  • The operating system. The usual one, and the one people forget because it changes on a schedule. Windows has it under Personalisation, macOS under Appearance.
  • The site’s own switch. Many sites have a theme toggle that overrides the system answer and remembers your choice. If the page looks dark while the rest of your machine is light, this is why.
  • An extension. Extensions that force dark mode onto every site work by rewriting the page after it loads. Their colours are in the capture too, and they are the hardest to spot, because the page has never looked any other way to you.

How to get the theme you want

  1. Set it before you capture, not after. Theme is a property of the rendering, not of the file. There is no reliable way to convert a dark screenshot into a light one afterwards — inverting the colours turns the photographs into negatives and the text grey.
  2. Use the site toggle if it has one. Fastest route, and it only affects the page you are capturing.
  3. Otherwise switch the system setting, reload, then capture. The reload matters. Some sites read the setting once when they load and do not change until they are asked again.
  4. Turn off any forced-dark extension first. Otherwise it will re-apply itself over whatever you chose.

The case worth being careful about

If the screenshot is going into documentation, a bug report or anything someone will compare against their own screen, capture in the theme they will be in rather than the one you happen to be in. For most audiences that is light. A dark screenshot in a document full of light ones also prints badly and eats ink.

If you are saving as a PDF rather than an image, the print view is a separate rendering again, and it is usually light regardless of your setting. That is worth knowing before you spend time switching themes for a file that was never going to carry them — the two different things people mean by saving a screenshot as a PDF are covered in how to save a screenshot as a PDF in Chrome.

What PageStill does

It photographs the page as it is rendering at that moment, so the theme in the image is the theme on your screen. There is no theme setting in the extension, and there should not be — a capture that quietly re-coloured the page would be showing you something that never existed.

Set the theme in the browser, then capture. What you see is what lands in the file.

Something out of date or wrong here? Device specs and interface details shift with every release. Tell me and I'll fix it.

Related reading