An iro.js plugin that dynamically updates CSS styles to match the currently selected color
Features | Installation | Usage | Stylesheet API
- Tiny: Just 4kb minified, or less than 1kB minified + gzipped.
- Consistent: Works across all modern browsers, down to IE 9.
- CSS Variables: CSS variables are available in browsers that support them.
$ npm install iro-dynamic-css --saveIf you are using a module bundler like Webpack or Rollup, import iro-dynamic-css into your project after iro.js:
Using ES6 modules:
import iro from '@jaames/iro';
import iroDynamicCss from 'iro-dynamic-css';Using CommonJS modules:
const iro = require('@jaames/iro');
const iroDynamicCss = require('iro-dynamic-css');Development version
Uncompressed at around 12kB, with source comments included
Production version
Minified to 4kB
Then add it to the <head> of your page with a <script> tag after iro.js:
<html>
<head>
<!-- ... -->
<script src="./path/to/iro.min.js"></script>
<script src="./path/to/iro-dynamic-css.min.js"></script>
</head>
<!-- ... -->
</html><script src="https://cdn.jsdelivr.net/npm/iro-dynamic-css/dist/iro-dynamic-css.min.js"></script>After both iro.js and iro-dynamic-css have been imported/downloaded, the plugin needs to be registered with iro.use:
iro.use(iroDynamicCss);Global config options can optionally be passed to the second parameter of iro.use.
The only current option is throttle, which can be used to limit how regularly the CSS rules are updated. The value passed to throttle is the minimum time between CSS updates in milliseconds. You can read more about throttling here
Since the color picker updates the selected color very quickly, throttling stylesheet updates can be helpful to reduce lag if you are changing a lot of styles at once.
iro.use(iroDynamicCss, {
// Only allow the css to update once in 100 milliseconds
throttle: 100
});The plugin adds a new css config option to iro.ColorPicker, dynamic CSS rules can be passed to this option as a CSS "template" formatted as a JavaScript object.
var colorPicker = new iro.ColorPicker({
width: 320,
color: {r: 255, g: 100, b: 100},
// ... etc
css: {
'body': {
'background-color': '$color'
},
'input, button': {
'border-color': '$color',
'color': '$color'
}
}
})$color is treated as a variable representing the currently selected color. To demonstrate, let's say the currently selected color is rgb(255, 0, 0). Using the template above, the CSS applied to the page would look something like this:
body {
background-color: rgb(255, 0, 0);
}
input, button {
border-color: rgb(255, 0, 0);
color: rgb(255, 0, 0);
}CSS variables can also be used, provided that the browser supports them. Variables are defined using properties that begin with a double-dash (--).
var colorPicker = new iro.ColorPicker({
width: 320,
color: {r: 255, g: 100, b: 100},
// ... etc
css: {
':root': {
'--selected-color': '$color'
}
}
})By adding the variables to the :root psuedo-class, we ensure that they are globally accessible so you can reference them anywhere in your project's CSS:
.example {
background-color: var(--selected-color);
}Each colorPicker has its own stylesheet, accessible from its stylesheet property. After the plugin is registered, the stylesheet constructor is also available globally on iro.Stylesheet().
Boolean indicating whether this stylesheet's rules should be applied to the page. This is readable/writable, and defaults to true.
The current CSS rules formatted as a JavaScript object. For example:
"body": {
"background-color": "red"
},
".example": {
"border": "1px solid red"
}The current CSS rules formatted as a CSS string. For example:
body {
background-color: red;
}
.example: {
border: 1px solid red;
}A reference to the stylesheet's CSSStyleSheet object.
A reference to the stylesheet's CSSRuleList object.
Adds or updates a CSS rule.
Arguments:
{String}selector{String}property{String}value
Example:
var stylesheet = new Stylesheet();
// Set the background of all elements with the CSS class 'example' to red
stylesheet.setRule('.example', 'background', '#f00');