Namespace export=

If you would like to close the dialog programmatically, you can do so by calling this method.

When the script file is loaded directly in a browser, this method is called automatically. When called in a module environment (e.g. browserify, rollup, or webpack), you need to call this method once before any other calls to any {@link Coloris} methods. This method checks for when the document is ready, so you do not have to call this method inside some document ready block.

Although there is only one physical instance of the color picker in the document, it is possible to simulate multiple instances, each with its own appearance and behavior, by updating the configuration at runtime, when the color picker is opened.

Here is an example of how to do it by manually setting configuration options in response to click events:

// Regular color fields use the default light theme
document.querySelectorAll('.color-fields').forEach(input => {
  input.addEventListener('click', e => {
    Coloris({
      theme: 'default',
      themeMode: 'light',
    });
  });
});

// But the special color fields use the polaroid dark theme
document.querySelectorAll('.special-color-fields').forEach(input => {
  input.addEventListener('click', e => {
    Coloris({
      theme: 'polaroid',
      themeMode: 'dark',
    });
  });
});

This works well and is quite versatile, but it can get a little hard to keep track of each change every "instance" makes and revert them to the default values.

So as of version 0.15.0, there is a new way to automatically manage virtual instances. This works by assigning configuration overrides to a CSS selector representing one or more color fields.