Skip to content

Instantly share code, notes, and snippets.

@Bluey26
Last active April 29, 2024 22:28
Show Gist options
  • Save Bluey26/275839323243a6ab2e120309a85d3c60 to your computer and use it in GitHub Desktop.
Save Bluey26/275839323243a6ab2e120309a85d3c60 to your computer and use it in GitHub Desktop.
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
// ==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");
});
@Bluey26
Copy link
Author

Bluey26 commented Mar 17, 2024

InvertCss

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment