Comparing 5 Dark Mode Techniques: Which Works Best on Which Sites

There are five main ways to make a website dark. Each has a different trade-off between how good it looks, how fast it is and how many sites it works on.

Disclosure: Modern Dark Mode is made by Bushe.co.

1. The site's own dark theme

Sites like YouTube, GitHub and Reddit have dark themes designed by their own teams, which often follow your system setting through prefers-color-scheme.

• Best for: any site that offers one. It's always the best-looking option.
• Limit: most of the web doesn't have one.

2. Filter inversion

An extension inverts the page's colors with a CSS filter, then flips images and videos back so they look normal. Modern Dark Mode works this way.

• Best for: text-heavy sites, documents, older sites and web apps. It's fast and works on nearly any page.
• Limit: brand colors shift, and background images in unusual places can come out inverted. See fixing inverted images.

3. Dynamic CSS rewriting

Dark Reader's Dynamic mode reads each page's styles and generates new dark colors for them.

• Best for: sites with lots of colors and branding, where you want results that look designed.
• Limit: more processing per page, so very large or fast-changing pages can be slower, and some elements are missed.

4. Chrome's Auto Dark Mode flag

At chrome://flags/#enable-force-dark, Chrome can darken pages itself, with no extension.

• Best for: trying dark mode everywhere without installing anything.
• Limit: it's experimental, has no per-site settings and can change or disappear in updates.

5. System-wide inversion and contrast themes

Windows color filters, Mac's Invert colors and Windows contrast themes change everything on screen, not just web pages.

• Best for: low vision, or when every app needs to be dark.
• Limit: photos and videos invert too, except where the system avoids them. See high contrast mode explained.

Which to use where

• Sites with their own dark theme: use it, and exclude the site from your extension to avoid double darkening.
• Docs, email, dashboards and articles: filter inversion is fast and readable.
• Colorful sites and shops: dynamic rewriting looks closer to a designed theme.
• Banking and government sites: often fine darkened; turn it off if a form or chart looks wrong.
• Everything, everywhere: a system theme, combined with Chrome set to follow it.

Many people combine methods: system dark theme, sites' own themes where they exist, and one extension for the rest. More on choosing in dark vs light mode for productivity.