0

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 at every single element in the page.
  2. Look at the property background-image of them.
  3. If an element has a background-image property defined, check if it contains any of the functions linear-gradient, -moz-linear-gradient,radial-gradient or -moz-radial-gradient.
  4. If that is the case, then do for that object: "background-image: none !important".

I am pretty noob at coding. I have tried with the following without success:

function removeGradients() {

        var x = document.querySelectorAll("*");
        var i;
        for (i = 0; i < x.length; i++) {
            if(x[i].indexOf('linear-gradient') == 0) {
            x[i].style.backgroundImage = "none";
            }
        }
}

I have been reading about querySelectorAll function and it returns a NodeList. Maybe I can search for the value linear-gradient for every element into NodeList? Maybe I have to use another function?

Thanks for your attention. Regards.

Cabezachumbo Sampedro
  • 13
  • 4
  • This might help you: https://stackoverflow.com/questions/9430659/how-to-get-all-the-applied-styles-of-an-element-by-just-giving-its-id – jmargolisvt May 26 '18 at 01:45
  • function removeGradients() { 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')) { x[i].style.backgroundImage = "none"; } } } – Cabezachumbo Sampedro May 26 '18 at 02:46
  • Works like a charm!!!! – Cabezachumbo Sampedro May 26 '18 at 02:58

0 Answers0