You can preview dark mode without a real dark-mode screen

I need to see how a page looks in dark mode, but my laptop and my phone are both stuck in light mode.

BeginnerRead 4 minDoing: about fifteen minutes5 steps

▶ Start

What you'll have at the end

A screenshot of your page in dark mode, without changing your computer's actual theme.

Before you start

You need

A page whose dark look is written as CSS reacting to prefers-color-scheme, open in a browser with DevTools already open.

Not covered

Dark mode wired up through a script instead of CSS doesn't respond to this override; that needs a different check once you're writing scripts of your own.

Leans on

CSS Cheat SheetConfirms the exact prefers-color-scheme and color-scheme syntax your dark rule needs.
Chrome DevTools Cheat SheetCovers the Rendering tab and screenshot features this walkthrough uses.

5 steps

Where to go next

Force a hover state to hold still for a screenshot

Use this same idea to freeze a hover or focus state for its own screenshot, instead of a color scheme.

Checked 20 Aug 2026

Part of the Chrome DevTools cookbook