How to enable dark mode on any website

Method 1: the site’s own dark theme

Always check this first. A first-party dark theme was designed by people who know which greys their brand colours sit on, which shadows need inverting, and which illustrations need a separate dark variant. No automated tool matches that.

It is usually under Settings → Appearance, Theme, or in the account menu behind your avatar. Some sites hide it in a keyboard-shortcut palette. If the site has one, use it and stop reading.

Method 2: let your operating system ask

Modern sites can detect your system preference through a CSS media query called prefers-color-scheme. When you set your OS to dark, your browser reports that to every page you visit, and any site that implemented the query switches itself.

• Windows 11: Settings → Personalisation → Colours → Choose your mode → Dark
• macOS: System Settings → Appearance → Dark
• Chrome itself: Settings → Appearance → Mode → Dark

This costs nothing and requires no software. The catch is coverage: it only works on sites that wrote a dark theme and wired it to the media query. On the rest, nothing happens at all.

Method 3: Chrome’s built-in force-dark flag

Chrome ships an experimental feature that darkens pages that never implemented dark mode themselves:

1. Type chrome://flags into the address bar and press Enter.
2. Search for dark.
3. Set Auto Dark Mode for Web Contents to Enabled.
4. Click Relaunch.

It is genuinely free and requires nothing installed. But it is a blunt instrument, and the reason is worth understanding: it applies one global transform to everything on the page without knowing what any element is. Photographs get darkened. Logos with baked-in white backgrounds turn muddy. Sites using CSS custom properties or gradients in ways the transform does not anticipate can end up with unreadable text or inverted product images.

It is an experimental flag, which also means Chrome can change or remove it in any release. If you want the full detail, see Chrome’s force dark mode flag: what it does and where it breaks.

Method 4: a dark mode extension

Extensions are the only option that can treat different parts of a page differently. The good ones read the page’s existing colours and generate a dark palette from them, rather than inverting or filtering the whole thing.

The distinction matters more than it sounds. A CSS filter applied to the whole document turns a blue brand header orange, because inverting a hue rotates it to its opposite. A generated theme instead maps each colour into a perceptual colour space, compresses the lightness of surfaces while preserving hue, and solves text colours against their new backgrounds for readable contrast. The blue stays blue. Photographs are left alone entirely, because a photograph is not a UI surface and darkening it is simply wrong.

That last point is the quickest way to judge any dark mode tool: load a page with a photograph on it. If the photograph got darker, you are running a filter, not a theme.

Try it yourself: Eclipse applies a generated dark theme to any site, with per-site overrides and live brightness and contrast controls. Free, no account, no site limits.

Which method should you use?

Methods 1 and 2 are not alternatives to 3 and 4 — they stack. A good extension defers to a site’s own dark theme when one exists, so you get the hand-designed version where it is available and the generated version everywhere else.

What about my phone?

Honest answer: Chrome on Android and iOS has no extension system, so extensions are a desktop and laptop solution. On a phone your realistic options are your OS dark setting (which covers sites supporting prefers-color-scheme) and, on Android Chrome, the same chrome://flags force-dark toggle described above. Some alternative mobile browsers include their own forced dark rendering.

Common questions

Will dark mode slow my browsing down? It can. Any tool that restyles pages does work on every page load, and some do far more of it than others — measurably so. See is Dark Reader slowing down your browser?

Why does the page flash white before going dark? Because the page renders before the dark styles are applied. It is a race condition, and whether a tool avoids it depends on architecture, not settings — the full explanation is here.

Is dark mode actually better for my eyes? Less than the internet suggests, and for some people it is worse. The research is summarised here.

Some parts of a page stay light. Why? Content inside <canvas>, cross-origin iframes, and certain encapsulated components cannot be restyled from outside. Nine specific causes here.

Product and website names mentioned here belong to their respective owners and are used only to describe what they do. Eclipse is an independent extension and is not affiliated with, endorsed by, or sponsored by any of them.

Related guides

Chrome’s Force Dark Mode Flag: What It Does and Where It Breaks
The free option nobody explains properly. How to switch it on, what it does to your images, and the exact page types where it falls apart.

Why Inverting Colours Isn’t Dark Mode
Inversion flips your brand blues to orange and your photographs to negatives. What a real generated theme does differently, in colour-space terms.

Dark Reader Alternatives: An Honest Comparison
Dark Reader is the category leader and genuinely good. Here is where it struggles — measured, not asserted — and which alternative fits which problem.

Dark Mode Not Working on Some Sites? 9 Causes
Shadow DOM, canvas, iframes, inline styles, CSP — the specific technical reasons a page resists dark mode, and which ones are actually fixable.

Browse all 16 guides →