UserScript to invert colors on-click which only is reminded for current tab. Should be added to UserScript manager (tested and working in Firemonkey+Firefox). Present in all sites, except in the ones matched by @ exclude

InvertCss.js

// ==UserScript==
// @name        InvertCSS
// @exclude						 https://*.github.com/*
// @match    *://*/*
// ==/UserScript==

function addGlobalStyle(css) {
    let head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}


/* Checks if the button was clicked in the current tab */
let cat = sessionStorage.getItem("myCat");

if (cat === "Tom") {
  addGlobalStyle(`@media (prefers-color-scheme: dark) {
  body {
    filter: invert(100%);
    background-color: rgb(25, 25, 25) !important;
  }
  img,video,
  iframe /* for recaptcha or web embed */ {
    filter: invert(100%) !important;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background-color: #fff !important;
    color: black !important;
  }}

`);
}


/* Button creation and position */
var button = document.createElement("Button");
button.innerHTML = "Force Colorscheme";
button.style = "top:0;right:0;position:absolute;z-index:99999;padding:6px;";
document.body.appendChild(button);



// add click event listener
button.addEventListener('click', () => {
addGlobalStyle(`@media (prefers-color-scheme: dark) {
  body {
    filter: invert(100%);
    background-color: rgb(25, 25, 25) !important;
  }
  img,
  iframe /* for recaptcha or web embed */ {
    filter: invert(100%) !important;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background-color: #fff !important;
    color: black !important;
  }}
`);

/* We save this value to remember the click in the current tab */
sessionStorage.setItem("myCat", "Tom");
});

Example( wikipedia).

---

PS: This script follows the color of the browser: if the browser is using a light color, and you click the button inside a dark site, it will invert the site's color to lighter ones. If you browser is using a dark theme, and you click the button inside a white/light site it will make the colors to become darker(Like in the picture).

This will not make a dark site to become lighter if you browser is in dark mode, and it will not turn dark a white site if you are using a light theme.

I just made another version of this script. As the previous version, this one works in firefox+firemonkey. It was tested in Linux and Android(firefox nightly) and work properly in both.

The changes are:

• A way to revert the force colorscheme without closing the tab and opening it again (button replaced for input box).
• Custom color (red) for the div containing the input box. Now you can also customize margin distances, font and background color, and using other css attributes.

What is yet to be done is responsiveness, some pages show the div too small, others show it too big.

Update: Now the checkbox is inside the label text, clicking the text will also trigger the checkbox. Font color changed to white, background to #f44336 . Added user-select: none; to avoid selection of the text inside the label(optional). Bold (font weight) and font size(90%) added.

// ==UserScript==
// @name        InvertCSSv2
// @exclude						 https://*.github.com/*
// @match    *://*/*
// ==/UserScript==

let head, style;
head = document.getElementsByTagName('head')[0];
style = document.createElement('style');
style.type = 'text/css';


function addGlobalStyle(css) {
    style.innerHTML = css;
    style.id = "customizado";
    head.appendChild(style);

}


function removeGlobalStyle(ID){
   var sheetToBeRemoved = document.getElementById(ID);
   var sheetParent = sheetToBeRemoved.parentNode;
   sheetParent.removeChild(sheetToBeRemoved);
  
}

var x = document.createElement("INPUT");
x.id = "foco";
x.setAttribute("type", "checkbox");
let y = document.createElement('label');
y.innerText = 'Force Colorscheme ';

// div creation, to insert the label and the checkbox

var z = document.createElement("div");
z.id = "div_id" ;

//here you can customize the div style, to suit your needs.

z.style = "top:0;right:0;position:absolute;z-index:99999;margin-right:10px;padding:4px;user-select: none;background: #f44336;color: white;font-size: 90%;font-weight: bold;border-radius: 4px;";

y.appendChild(x);
z.appendChild(y);
document.body.appendChild(z);

let cat = sessionStorage.getItem("myCat");
if (cat === "Tom") {
  addGlobalStyle(`@media (prefers-color-scheme: dark) {
  body {
    filter: invert(100%);
    background-color: rgb(25, 25, 25) !important;
  }
  img,video,
  iframe /* for recaptcha or web embed */ {
    filter: invert(100%) !important;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background-color: #fff !important;
    color: black !important;
  }}

`);
document.getElementById("foco").checked = true;
}


x.addEventListener('change', () => {
 if (x.checked === false){
   removeGlobalStyle(`customizado`);
   sessionStorage.removeItem("myCat", "Tom");
 } else if(x.checked === true){
     addGlobalStyle(`@media (prefers-color-scheme: dark) {
  body {
    filter: invert(100%);
    background-color: rgb(25, 25, 25) !important;
  }
  img,video,
  iframe /* for recaptcha or web embed */ {
    filter: invert(100%) !important;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background-color: #fff !important;
    color: black !important;
  }}

`);
   
   sessionStorage.setItem("myCat", "Tom");
 }
});