One‑Click Dark Mode Switch for Any Site Using CSS Filters and Tampermonkey

Introduction

A partner complained that the bright web pages were hurting her eyes and asked for a simple eye‑protection tool, prompting the author to develop a quick dark‑mode solution.

“You’re a web developer, can you make a web eye‑protection tool for me?”

Quick Theme Switching Principle

The core idea is to use a single CSS rule that inverts colors and rotates the hue, which effectively creates a dark theme.

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

CSS filter can add visual effects; the combination filter: invert(1) hue-rotate(180deg) is commonly used for dark mode.

invert(1)

reverses colors, turning bright tones dark.

hue-rotate(180deg)

shifts hues to avoid unnatural colors caused by pure inversion.

Combining these filters switches the whole page’s colors with one click.

However, images and videos are also inverted, causing color distortion. To fix this, apply the same filter in reverse to

img

and

video

elements.

/* Images, videos, etc. should retain original colors */
img,
video,
.logo,
.icon {
  filter: invert(1) hue-rotate(180deg);
}

Adding a Theme Switch Button with Tampermonkey

Using the Tampermonkey extension, a userscript can inject the CSS and create a floating button that toggles a

dark-mode

class on the

html

element.

If you are unfamiliar with Tampermonkey, see the author’s guide at juejin.cn/book/751468…

// ==UserScript==
// @name         One‑Click Dark Mode
// @namespace    http://tampermonkey.net/
// @version      0.0.1
// @description  Use CSS filters to switch a page to dark mode
// @author       石小石Orz
// @match        *://*/*
// @grant        GM_addStyle
// @grant        GM_addElement
// ==/UserScript==

(function() {
  'use strict';
  // Inject styles (initially disabled)
  GM_addStyle(`
    html.dark-mode {
      filter: invert(0.9) hue-rotate(180deg);
      background: #111 !important;
    }
    html.dark-mode img, html.dark-mode video {
      filter: invert(1) hue-rotate(180deg);
    }
  `);

  // Add toggle button
  const toggleBtn = GM_addElement(document.body, 'button', {
    textContent: '主题切换',
    style: 'position:fixed;bottom:20px;right:20px;z-index:9999;padding:8px 12px;background:#444;color:white;border:none;border-radius:5px;cursor:pointer;'
  });

  // Click toggles dark mode
  toggleBtn.addEventListener('click', () => {
    document.documentElement.classList.toggle('dark-mode');
  });
})();

The script uses

GM_addStyle

to inject global CSS and

GM_addElement

to create the button, enabling users to switch themes with a single click.

Making the Button Draggable and Syncing Position

To avoid the button covering page content, the script can be extended with drag‑and‑drop logic and Tampermonkey’s storage API to synchronize the button’s position across pages.