How to Fix Dark Mode Making Images Look Inverted and Weird

You open a tutorial with step-by-step screenshots and they all look like
X-ray negatives. Or a news article has photos where the sky is orange and
skin tones are green. This is what happens when a dark mode extension applies
a naive CSS filter to the entire page without excluding images.

Why this happens

The simplest way to implement dark mode in CSS is a single filter rule that
inverts every pixel on the page. For backgrounds and text, it works:
white becomes dark grey, dark text becomes light. But images are pixels too.
A photograph of a blue sky becomes orange. A product image becomes a negative.
UI screenshots from documentation become confusing color-swapped versions
of what they should show.

Some extensions add a counter-inversion on img elements to double-invert
images and bring them back to normal. This works for regular img tags, but
fails on CSS background images, SVGs, canvas elements, video thumbnails, and
images loaded via custom web components.

The manual approach: per-element CSS overrides

If you use a user stylesheet extension like Stylus, you can write
per-site overrides that exclude specific selectors from inversion. For a
specific site, you'd target the image classes directly with a counter-filter.

This is tedious and breaks whenever the site updates its CSS class names.
Not a realistic long-term solution.

How Modern Dark Mode handles images correctly

Modern Dark Mode uses a selective color manipulation approach instead of
CSS filter inversion. Rather than inverting pixels, it:

1. Detects background-color and color CSS properties on elements
2. Replaces light background colors with dark equivalents directly
3. Replaces dark text colors with light equivalents
4. Leaves img, video, canvas, and SVG elements completely untouched

This is more CPU-intensive than a single CSS filter, but it means images
are never touched. A photograph stays a photograph. A UI screenshot in
documentation looks exactly as the author intended.

To verify image protection is active:

1. Open Modern Dark Mode settings
2. Under Color Strategy, make sure Smart Color Replacement is selected
rather than CSS Filter (Legacy)
3. If you're on an older installation that defaulted to CSS Filter mode,
switch it and reload your current tab

Handling SVG icons

SVG icons are a special case. Many icon sets use black SVG paths that need
to be inverted for dark mode to look right. But complex SVG illustrations
(diagrams, charts, technical drawings) should not be inverted.

Modern Dark Mode handles this by size threshold: small SVGs under a certain
pixel dimension (configurable, default 64px) are treated as icons and get
color-inverted. Large SVGs are treated as illustrations and left alone.

You can adjust this threshold under Settings → Image Handling → SVG Icon
Max Size. If you're on a site with large monochrome diagrams that should
be inverted (like a dark-mode-friendly technical documentation site), bump
the threshold up.

CSS background images

Background images set via the background-image CSS property are harder to
handle because the extension can't tell if it's a decorative texture or
meaningful content without analyzing it. Modern Dark Mode defaults to leaving
background images untouched. If a site's background image looks wrong, you
can set the site to Background Image: Dimmed mode which applies a 70%
opacity overlay to reduce the brightness without inverting colors.

Canvas elements and WebGL

Canvas and WebGL elements are pixel buffers controlled entirely by JavaScript
— the extension has no way to know what's being rendered inside them without
analyzing the pixel data frame by frame, which would be prohibitively slow.
Modern Dark Mode leaves canvas elements untouched for this reason.

For sites that use canvas for their primary content (like interactive map
applications, design tools, or game embeds), the extension's dark mode
will correctly darken the surrounding HTML UI while leaving the canvas
content unchanged. This is the correct behavior: the canvas content
is authored content, not a browser default, and shouldn't be color-inverted.

When should you use CSS Filter mode?

The legacy CSS Filter approach isn't useless — it's significantly more
performant than Smart Color Replacement on very complex pages with thousands
of DOM elements (some enterprise dashboards, large data tables, or heavily
nested component trees). If you notice the extension making a page sluggish
on scroll, try switching to CSS Filter mode for that specific site via
the per-site rules. Accept the image inversion trade-off in exchange for
better scroll performance.

For typical reading and browsing, Smart Color Replacement is the right
choice. The performance difference is imperceptible on normal pages.

Verifying images are truly unaffected

A quick visual test: navigate to any image-heavy page (Unsplash, a news
site with photos) and open DevTools. Inspect an img element and check its
computed styles. In Smart Color Replacement mode, you should see no filter
or transform applied to image elements. In CSS Filter legacy mode, you'll
see a counter-inversion filter. The absence of filter on img elements in
the computed styles confirms the extension is leaving images untouched.