<rksh/>

Auto Dark Mode Userscript

Adds a floating toggle to manually enable a smart dark mode theme per-website.

Features

  • Opt-in Dark Mode: Manually enable dark mode per domain; the script remembers your preference.
  • Smart Inversion: Inverts colors on the page while keeping media elements (images, videos, iframes) in their original, correct colors.
  • Native OS Controls: Tells the browser to natively use dark dropdowns, input fields, and scrollbars alongside the page content.
  • Floating Toggle: A simple floating button (☀️ / 🌙) at the bottom right of the screen lets you quickly toggle dark mode on or off for the current site.
  • Customizable Position: Right-click the toggle button to move it to any of the four corners of the screen (stored per-site).
  • Smooth Transitions: Toggling dark mode animates smoothly rather than harshly flashing the screen.
  • No Flicker: Applies dark mode immediately on page load (@run-at document-start) to prevent bright white flashes.
  • SPA Resilient: Uses a robust MutationObserver alongside history API patches to maintain the extension’s functionality across complex Single Page Application navigations.

How it works

This script injects a global CSS style that applies a CSS filter (filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(1.1)) to the <html> element to instantly make light websites dark. It then re-inverts specific media tags (like img, video, canvas, svg) so pictures and videos look normal. It stores your per-site preference using GM_setValue (or localStorage as a fallback) so the dark mode stays enabled natively across page loads and SPA navigations.

Installation

  1. Install a Userscript manager extension for your browser:

After installing a Userscript manager, simply click here to install the script. Your Userscript manager should automatically open and prompt you to install or update the script.

Method 2: Manual Install

  1. Open the dark-mode-userscript.js file in this repository and copy its contents.
  2. Open your Userscript manager’s dashboard and create a New Script.
  3. Paste the copied contents, save it, and make sure it’s enabled.