Chameleon
Use Chameleon on elements that need to change their style inheriting properties of other elements through jQuery.
PS: Deprecated. I don't recommend using Chameleon anymore because that are available techniques outside such as nesting that are better for creating themes. You can still use Chameleon to real-time purposes, but I recommend something without jQuery.
Why Chameleon?
Even when not using the real-time feature of Chameleon, it will save you lots of code and classes (e.g. each background color, border color..)
Imagine you have a sidenav that needs to change its color
and border-color
according to the .top-bar
's background-color
. You can't simply use a single .red
class on these elements because your sidenav can't have a red background. So then you would have to create classes such as .red-bg
, .red-text
, .red-border
and so on for each color of your UI. With Chameleon, this is real-time and much easier, perfect for SPAs.
How to Use
jQuery
$('.chameleon').chameleon({ mirror: '.top-bar', /* Element from where you want to copy some properties */ inheritAll: false, /* Default: false. If true, will inherit everything */ colorContrast: true, /* Default: true. If false, will not adapt text for readability */ set: { /* Property that you want to set followed by the one you want to copy */ color: 'backgroundColor', borderColor: 'backgroundColor' } });
License
You can check out the full license here
This project is licensed under the terms of the MIT license.
Contributors
@jeffersondanielss - Created our super awesome GitHub Page!
@igorantun - Improved README english words.
Disclaimer
This plugin uses attrchange, created by @meetselva