Greasy Fork

Complementary script for global dark CSS styles

Hello. I am a user that dislike white backgrounds on computers, thats why I use a global dark CSS style for browsing the web.

The main problem that all these global dark CSS styles have in my opinion are the background-image linear-gradient and radial-gradient functions. These functions create a "background-image" for many elements in the web. These backgrounds are generally white, creating a problem for global dark CSS styles, because we don't want to remove all background-images because that would break many icons and other stuff.

I think that one really good option to complement global dark css styles is to make a script that does the following:

1. Look every single object in the DOM.
2. Look at the property background-image of them.
3. If an object has a background-image property defined, check if it contains the functions linear-gradient, -moz-linear-gradient, -webkit-linear-gradient, radial-gradient, -moz-radial-gradient or -webkit-radial-gradient.
4. If that is the case, then do for that object: "background-image: none !important".

In my ignorance on Javascript coding, I ask you for help creating this script. For a web without white background. For our eyes health. Regards.

I have it!!!

// ==UserScript== // @name Remove gradients from background images // @version 1 // @grant none // ==/UserScript==

    var x = document.querySelectorAll("*");
    var i;
    var z;

    for (i = 0; i < x.length; i++) {

        z = window.getComputedStyle(x[i],null).getPropertyValue("background-image");

        if(z.includes('linear-gradient') || z.includes('-moz-linear-gradient') || z.includes('radial-gradient') || z.includes('-moz-radial-gradient')) {
        x[i].style.backgroundImage = "none";
        }

    }

Rewritten using latest JS features;

// ==UserScript==
// @name    Remove gradients from background images
// @version 1.1
// @grant   none
// ==/UserScript==
const ni = document.createNodeIterator(document.body, NodeFilter.SHOW_ELEMENT);
let el;
while (el = ni.nextNode())
    if (/(linear|radial|-webkit)-gradient/.test(getComputedStyle(el).backgroundImage))
        el.style.backgroundImage = 'none';