Chameleon

Use Chameleon on elements that need to change their style inheriting properties of other elements through 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',
  inheritAll: false,
  colorContrast: true,
  set: {
    color: 'backgroundColor',
    borderColor: 'backgroundColor'
  }
});
      

Disclaimer

This plugin uses attrchange created by @meetselva