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";
            }
            
        }