iro-dynamic-css

iro.js plugin to dynamically update CSS rules whenever the selected color changes

Usage no npm install needed!

<script type="module">
  import iroDynamicCss from 'https://cdn.skypack.dev/iro-dynamic-css';
</script>

README

iro-dynamic-css


An iro.js plugin that dynamically updates CSS styles to match the currently selected color

license version downloads minzip size donate

Features | Installation | Usage | Stylesheet API


Features

  • 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.

Installation

Install with NPM

$ npm install iro-dynamic-css --save

If 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');

Download and host yourself

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>

Using the jsDelivr CDN

<script src="https://cdn.jsdelivr.net/npm/iro-dynamic-css/dist/iro-dynamic-css.min.js"></script>

Usage

Register Plugin

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 Plugin Options

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
});

ColorPicker Setup

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

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);
}

Stylesheet API

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().

Properties

enabled

Boolean indicating whether this stylesheet's rules should be applied to the page. This is readable/writable, and defaults to true.

css

The current CSS rules formatted as a JavaScript object. For example:

"body": {
  "background-color": "red"
},
".example": {
  "border": "1px solid red"
}

cssText

The current CSS rules formatted as a CSS string. For example:

body {
  background-color: red;
}
.example: {
  border: 1px solid red;
}

sheet

A reference to the stylesheet's CSSStyleSheet object.

rules

A reference to the stylesheet's CSSRuleList object.

Methods

setRule

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');

© James Daniel