PB
Available
arrow_back Back to Blog

How to Keep Dark Mode on Specific Sites but Not Others

PB

Patrick Bushe

January 9, 2026 · 5 min read

Dark mode is fantastic for plain-text sites, documentation, and news articles.
But a lot of carefully designed sites — creative portfolios, product landing
pages, photo-heavy content — are built specifically for light backgrounds.
Forcing dark mode on them breaks the design and makes them harder to read,
not easier.

The real problem

Most dark mode solutions are all-or-nothing. Chrome's built-in forced dark mode
flag applies to every page without exception. That means Netflix's thumbnail
strip, Dribbble's design showcase, and your bank's login page all get the same
heavy inversion treatment — which often makes them look worse than the
light version.

What you actually want is selective control: dark mode by default, with the
ability to whitelist specific domains where the site's native design should
take over.

The manual approach

Before reaching for an extension, try Chrome's per-site Auto setting:

1. Go to chrome://settings/content/siteDetails for the site you want to exclude
2. Look for Color Scheme and set it to Light

This works if the site respects the prefers-color-scheme media query — meaning
the developer built in their own dark mode that responds to the OS setting.
Unfortunately, most sites don't implement this properly, so the setting has
no effect.

You can also use a user stylesheet (via Stylus or similar) to override dark
mode injection for a specific domain. This works but requires you to write CSS
manually and maintain it as sites update their layouts.

Using Modern Dark Mode for per-site control

Modern Dark Mode has a site allowlist/blocklist system built into its settings
panel that handles this cleanly without any CSS writing.

How to set it up:

1. By default, dark mode applies to all sites. Open the extension settings
and switch the default mode to Selective if you prefer to opt in per site.
Or keep Global mode on and use the blocklist to exclude specific sites.

2. When you're on a site that looks bad in dark mode, click the extension icon
and toggle Disable for this site. The current domain is immediately added
to your exclusion list and the page reloads in its natural colors.

3. You can manage your full list at any time from Settings → Site Rules.
Entries support wildcards (*.notion.so will exclude all Notion subdomains,
for example).

4. For sites where you want dark mode but with reduced intensity — like a wiki
with a custom color scheme — the per-site brightness control lets you
dial back the contrast without fully disabling dark mode.

Some practical site categories

  • Sites worth excluding from dark mode:
  • Design showcase sites (Dribbble, Behance, Awwwards)
  • Photography platforms (500px, Unsplash, Google Photos)
  • Banking and financial dashboards with color-coded charts
  • Video streaming sites that already have dark UIs (YouTube, Netflix)
  • E-commerce sites where product images need accurate colors
  • Sites where dark mode genuinely helps:
  • Documentation and developer wikis
  • News and long-form reading sites
  • GitHub (though GitHub has its own dark mode — disable Modern Dark Mode there
  • and use the native setting under your GitHub profile preferences)
  • Stack Overflow
  • Reddit (same note — use Reddit's built-in dark mode for better integration)

The exclusion list syncs across Chrome instances if you have Chrome sync
enabled, so once you've tuned your list on your main machine, it carries
over to any other Chrome installation you're signed into.

Handling sites that override system dark mode

Some sites implement their own dark mode toggle that conflicts with
Modern Dark Mode's injection. GitHub, Notion, and Linear all have
native dark modes. If you run Modern Dark Mode on top of these, you
may get double-darkening or color artifacts — dark text on dark background
in UI elements the site designed to be dark already.

The fix is to exclude these sites from Modern Dark Mode and rely on
their native dark mode instead. Set them to dark in their own settings,
then add them to Modern Dark Mode's exclusion list. You get proper dark
mode with all the nuance the site's design team built in, without the
extension fighting against it.

Dealing with embedded apps and iframes

Some sites embed third-party tools in iframes — Typeform surveys, Stripe
payment forms, Intercom chat widgets. Modern Dark Mode applies dark mode
to the parent page but not to third-party iframes, because those are
isolated origins. This is actually the correct behavior: you don't want
your payment form colors inverted.

But some iframes you do want dark — embedded GitHub Gists, for example,
or embedded CodePen demos in a tutorial. For these, Modern Dark Mode
has an iframe allowlist in settings where you can specify origins that
should also receive dark mode injection.

Building a good exclusion list over time

The best approach is to not try to build a comprehensive exclusion list
upfront. Instead, use dark mode globally and add exclusions reactively as
you notice sites that look wrong. After a few weeks of normal browsing,
you'll have a list that reflects your actual usage patterns rather than
an imaginary list of sites that might be problems.

Keep in mind that sites redesign and the same domain might look fine in
dark mode today and broken tomorrow after a UI update. Modern Dark Mode's
quick-toggle button makes it easy to check whether a site looks better
without dark mode and add it to your exclusions with two clicks.

More Tools by Patrick Bushe

Free Chrome extensions to boost your productivity and privacy