Change color of every instance

Question

I have a lot of colors on a site, which I want to change with an userscript. Imagine a CSS file with 1000 different selectors, where each has a color. That specific color is what I want to change. Every instance of that color. The user has to be able to change the color dynamically (like with an input box), so changing it with a CSS file will not work.

If it worked, then this would be how I would do it:

$("*").replace("#00aba0","#FF0000");

00aba0 is the color I want to replace with FF0000

Unfortunately that method is unavailable, but it would work something like that. Also, setting up a loop to do like string.replace(); isn't going to work, as it's a forum, and when you make a new reply, it will remove the text inside the reply box.

TO SUM UP:

I want to replace every instance of a color, with another color. There are many instances (let's say 500) of that color, which has to be changed. I cannot change it with a replacement of the CSS file, and it has to be changed dynamically.

Answer 1

Based on your situation, here's what would be in your best interest.

Remove the color from all of your CSS classes, and delegate the color to a new, separate class, like so.

.header {position: relative; font-size:24px;}
.whatever {position: relative; float:right;}

.theme-default {color:#00aba0; background-color:#fff;}
.theme-highlight {color:#FF0000; background-color:#000;}

So, for all of your elements, use the following class attributes:

<div class="header theme-default">This is the header</div>
<div class="whatever theme-default">This is whatever</div>

Then, to change the theme instantaneously, use this jQuery:

$(".theme-default").addClass("theme-highlight");

Edit: Dynamic Color Changes from User Input

You specified that you wanted the new color determined by the user. Changing the color completely dynamically with user input can be tricky, but I've done some reading and I think it can be done.

Consider this demo.

$("#changeColor").on("click", function() {
    var newColor = $("#color").val();
    var oldColor = "#00aba0";
    $("*").css("color", function(i, val) {
        val = val.replace(/\s/g, "");
        if (val == oldColor || val == hexToRgb(oldColor)) {
            return newColor;
        }
        else {
            return val;
        }
    });
});

Looking at the script, you'll see that we use your original $("*") selector. We then use .css(), making the second argument a function that returns a new color attribute based on the current one.

The main obstacle here was that we need to compare each element's current CSS color to the one we're looking for. Different browsers return different values for $("element").css("color"), so in an attempt to normalize them, I used Tim Down's hexToRgb() function to make a comparable RGB value for each color.

In the fiddle, try changing the default colors around, both within the stylesheet and inline, and you'll see that the script still works. You'll have to expand on the script so that you can manipulate the oldColor variable and change the colors back if needed.

Hope this helps.

Answer 2

One possible way is to play with window.getComputedStyle. Eg :

1. Get all the page elements
2. iterate, get the computedStyle for each
3. compare with the color we want to change / replace
4. replace color if needed

There are problems, such as getComputedStyle holds rgb(r,g,b)-values. Here is a little demonstration of the idea :

Demo : http://jsfiddle.net/Sg36t/ - (updated)

some styling :

#div1 {
 color: #ff0000; /* red in hex*/
}
#div2 {
  color : red;
}
h3#ah3 {
  color: green;
  background-color: red;
} 

test markup

<div id="div1">test</div>
<div id="div2">this is #div2
  <h3 id="ah3">text</h3>
</div>
<button id="test">change color</button>

script

function colorToHex(color) {
    if (color.substr(0, 1) === '#') {
        return color;
    }
    var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);
    var red = parseInt(digits[2]);
    var green = parseInt(digits[3]);
    var blue = parseInt(digits[4]);
    var rgb = blue | (green << 8) | (red << 16);
    return digits[1] + '#' + rgb.toString(16);
};

function changeColor(from, to) {
   var elements = document.getElementsByTagName('*');
   for (var i=0;i<elements.length;i++) {
      var color = window.getComputedStyle(elements[i]).color;
      var hex = colorToHex(color);
      if (hex == from) {
         elements[i].style.color=to;
      }
      var backgroundColor = window.getComputedStyle(elements[i]).backgroundColor;
      if (backgroundColor.indexOf('rgba')<0) {
          var hex = colorToHex(backgroundColor);
          if (hex == from) {
             elements[i].style.backgroundColor=to;
          }
      }

   }
}   

// change all red color styled elements to blue
document.getElementById('test').onclick = function() {
   changeColor('#ff0000','#0000ff');
}

surprisingly, red-colored items, regardless red or #ff0000, is now turned into #0000ff...

NOTE : This is not meant as a final answer, or anything like that! But I feel this is a step in the right direction. At least it is an idea :)

Answer 3

1. Make a copy of that CSS file into a new one.
2. Do a global find/replace of old color to new one.
3. Replace reference to old stylesheet with new one

Answer 4

Trying to change the color "of every instance" is not going to work well and is not the smart approach if those colors are set in a CSS file.

Your userscript can add stylesheets dynamically using GM_addStyle(), which is supported by all the major userscript platforms (and easy to backfill if it isn't).

Since the script's stylesheet(s) will usually be added after the target page's sheets, it will naturally override most rules. But use the !important flag to also overrule almost all inline style attributes.

In the handler for your user's color input, place code like so:

GM_addStyle ( "                                         \
    #node_X {                                           \
        background-color: " + usrColor + " !important;  \
    }                                                   \
    p.whatever {                                        \
        color: " + usrColor + " !important;             \
    }                                                   \
    /* etc. etc. */                                     \
" );

where usrColor is the variable with the user-set value.

---

Don't forget to specify @grant GM_addStyle in the script's metadata block.

This approach is "Fire and forget" and the new rules automatically apply to all new AJAXed content. The only thing it will not catch is if the target page uses style attributes that contain the !important flag. (which I have never seen a working site do)