collideous

JavaScript Color Switcher

I built a little JavaScript color switcher for my newest theme.

var sheet = document.styleSheets[0];
var colors = ["86b42d", "fab411", "556b2f", "c54b2c", "dc2b19", "a0522d"];
var rules = {
  "a" : "color",
  "var a:hover" : "color",
  "#header h1 a:hover" : "color",
  "#header span" : "background",
  "#footer div a:hover" : "color",
  "#sidebar dt" : "border-color",
  "#sidebar a:hover" : "color",
  ".date:hover" : "background",
  ".quote blockquote" : "border-color",
  ".text h2 a:hover" : "color",
  ".link h2 a:hover" : "color"
};

function changeColor(color) {
  if (sheet.addRule) {
    for (selector in rules) {
      sheet.addRule(selector, rules[selector]+":#"+color);
    }
  } else if (sheet.insertRule) {
    for (selector in rules) {
      sheet.insertRule(
        selector+" {"+rules[selector]+":#"+color+"}", sheet.cssRules.length
      );
    }
  }
}

changeColor(colors[Math.floor(Math.random()*colors.length)]);