https://github.com/numtel/colorswap.js

Instantly replace colors on your page!
https://github.com/numtel/colorswap.js

Last synced: 11 months ago
JSON representation

Instantly replace colors on your page!

• Host: GitHub
• URL: https://github.com/numtel/colorswap.js
• Owner: numtel
• License: mit
• Created: 2014-09-14T01:05:58.000Z (over 11 years ago)
• Default Branch: gh-pages
• Last Pushed: 2014-10-03T03:12:59.000Z (over 11 years ago)
• Last Synced: 2025-04-09T10:42:25.063Z (about 1 year ago)
• Language: JavaScript
• Homepage: http://numtel.github.io/colorswap.js/
• Size: 176 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# colorswap.js

View demo at http://numtel.github.io/colorswap.js/

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

### Installation

Only dependency is [tinycolor](http://bgrins.github.io/TinyColor/)

    

    

Also available as a Meteor Package ([more information](https://github.com/numtel/meteor-colorswap))

    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.

### Changelog

* 1.0.2: Fixed normalize function so relative colors do not go out of bounds

* 1.0.1: Support for multiple colors