colorswap.js

Instantly replace colors on your page!

A find/replace operation for all loaded stylesheets specialized for swapping colors globally.

Tested working on Chrome, Firefox, IE9+

Installation

Only dependency is tinycolors.

  <script src="tinycolor.js"></script>
  <script src="colorswap.js"></script>
  

Also available as a Meteor Package (more information)

  meteor add numtel:colorswap
  

Usage

The find color is the original color. Subsequent calls to replace the color still specify the color in the original CSS. View this page's source for an example.

  ColorSwap({
    find: '#428bca', // hex, rgb(), hsv(), hsl()
    replace: '#f00', // hex, rgb(), hsv(), hsl()
    animation: 'hsl' // optional: 'none', 'rgb', 'hsv', 'hsl'
    duration: 400 // optional: milliseconds to complete animation
    frameDuration: 10 // optional: milliseconds per frame in animation
  });
  

Pass an array of colors to the find option to replace multiple colors. The first color will be used to adjust the HSL values relative to the remaining colors, preserving shading effects.

Caveats

• Only works with CSS rules in files from the same origin due to security restrictions.
• HSL, HSV animations could use some work in between red and blue.

More Information

View Project on GitHub