Force Dark Mode on Any Website With This Simple Trick

Most websites that support dark mode switch to it automatically when your OS asks for it. But plenty of sites either ignore your system preference or don’t offer a dark theme at all — and if you spend your evenings on one of them, every page load is a flashlight to the face.

Instead of waiting for millions of websites to implement dark mode, we can force one with a small CSS snippet. I’ll use Hoverify’s Custom Code feature to inject persistent styles into the page — the script re-applies itself automatically on every load — but the CSS itself works with any injection method, including Stylus or a bookmarklet. The reason I prefer the custom-code route over a dedicated dark mode extension: you keep full control of the CSS, so when the automatic result looks wrong on a particular site, you can fix that one site’s snippet instead of fighting an extension’s settings.

Fair warning: a forced dark mode is a filter, not a design. It reduces eye strain immediately, but it won’t match the polish of a real dark theme — if you’re building one for your own site, our guide to dark mode implementation with Tailwind CSS covers doing it properly.

How the trick works

The entire mechanism is one line of CSS:

filter: invert(1) hue-rotate(180deg);

invert(1) flips every color to its opposite — white backgrounds become black, dark text becomes light. That alone would also flip all the hues (blue becomes orange, green becomes magenta), which is where hue-rotate(180deg) comes in: it spins the color wheel back half a turn, so blues stay roughly blue and brand colors stay recognizable. Lightness stays inverted; hue lands back near where it started.

The catch: the filter applies to everything, including photos and videos, which come out looking like film negatives. The fix is delightfully lazy — apply the same inversion to media elements a second time, and the two inversions cancel out.

How to Force Dark Mode on All Websites

Step 1: Create a New Script

• Open the Hoverify popup and click on the “Debug” tool.
• A new page will open with several tools. Select “Custom Code.”
• Click on the “New” option, which will open a new popup.

Step 2: Select a Host

• Hosts are the URLs or hostnames where you want to inject the script.
• Add * as the host to match all URLs and inject your script into every page.
• If you’d rather target specific sites (recommended once you’ve played with it — more below), add those hostnames instead.
• Click “Create,” which will open a new window.

Step 3: Add the Code

Add the following snippet to the editor:

<style>
    html {
        filter: invert(1) hue-rotate(180deg);
        background: #111;
    }

    /* Re-invert media so photos and videos look normal */
    img, video, picture, iframe, canvas,
    [style*="background-image"] {
        filter: invert(1) hue-rotate(180deg);
    }
</style>

Three details worth noting:

• Custom Code injects HTML, so the CSS is wrapped in a <style> tag.
• We invert html rather than body and give it a dark background, so the area outside the page content (when you scroll past the end, or on short pages) doesn’t stay blinding white.
• The media selectors re-invert images, videos, embedded frames, canvases, and elements with inline background images, canceling the page-level filter so they display normally.

If the tab open in the main window matches your host, you’ll see the result live as you type.

Step 4: Save the Script

• Save with CTRL + S or the “Save” button in the top right.
• Give the script a name (e.g., “Dark mode”) and confirm.

Step 5: Test the Script

• Navigate to a few pages and confirm the effect: with * as the host, every site you visit should now be dark.
• Check pages with photos specifically — they should look normal, not negative.

Step 6: Edit or Update the Script

• Reopen “Custom Code” and locate your script (you can filter by host).
• Click the edit icon, tweak, and save again.

Refinements worth making

Soften the effect. Full inversion can feel harsh — pure whites become pure blacks, and thin text gets crispy. A gentler version keeps a little of the original lightness and takes the edge off:

html {
    filter: invert(0.92) hue-rotate(180deg) brightness(1.05);
}

Skip sites that already have dark mode. Running the filter on an already-dark site inverts it back to light — the opposite of what you want. This is the main argument for per-site hosts over *: keep one script per stubborn light-only site, and let well-behaved sites use their native themes. If you stick with *, you’ll occasionally open a dark site and need to pause the script for that host.

Exclude elements that break. Some components — syntax-highlighted code blocks, maps, brand logos in SVG — look wrong inverted. Add them to the re-invert selector list the same way images are handled. This per-site tweakability is exactly what canned dark mode extensions can’t give you.

Mind performance on heavy pages. A whole-page filter makes the browser composite everything through it, and on long, animation-heavy pages that can cost smoothness, especially on older hardware. If a specific site feels sluggish with the filter on, that site is a candidate for either a softer filter or removal from your hosts.

When to use a dedicated extension instead

If you want zero maintenance and don’t care about fine-tuning, Dark Reader is the mature dedicated option — it analyzes pages rather than blanket-inverting them, handles most sites well, and has per-site toggles. The trade-off is the reverse of this trick’s: when Dark Reader gets a site wrong, your options are its sliders; when your own CSS gets a site wrong, you can fix the exact selector.

And if the site that’s burning your retinas is yours, the real fix is a designed dark theme: your colors, correct contrast, no filter artifacts. The Tailwind dark mode guide walks through the whole implementation, from the dark: variant to a flash-free toggle.

Beyond dark mode

The technique here — persistent, host-scoped CSS/HTML/JS injection with a live preview — is useful far beyond theming. The same Custom Code feature can hide a site’s nag banners, enlarge unreadable fonts, test copy changes on your production site before committing them, or add keyboard shortcuts a site never shipped. Once you can persistently rewrite any page you visit, a website that annoys you becomes a website you haven’t fixed yet.