Last active
April 29, 2024 22:28
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==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"); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.