https://github.com/numtel/meteor-colorswap

Meteor Package for colorswap.js
https://github.com/numtel/meteor-colorswap

Last synced: about 1 year ago
JSON representation

Meteor Package for colorswap.js

• Host: GitHub
• URL: https://github.com/numtel/meteor-colorswap
• Owner: numtel
• License: mit
• Created: 2014-10-03T02:38:18.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2014-10-03T03:04:02.000Z (over 11 years ago)
• Last Synced: 2025-02-15T04:42:38.639Z (about 1 year ago)
• Language: JavaScript
• Size: 113 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# colorswap.js Meteor Package

[![Build Status](https://travis-ci.org/numtel/meteor-colorswap.svg?branch=master)](https://travis-ci.org/numtel/meteor-colorswap)

This package is a client side wrapper for the [colorswap.js library](https://github.com/numtel/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

    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.