Chroma Witch 🧙‍♀️

Create and share color palettes directly from your website.

Chroma Witch is a small script you add on a web page, that enables a popup which allows users to change some css variables reprensenting base colors, see the result, then share the new color palette via url.

Getting started

1. Define some colors

Your css should include variables representing the main colors of your website:

:root {
	--color-header: #5373AC;
	--color-body: #A85F16;
}

2. Install Chroma Witch

The script is available via CDN, so just add it to your html head:

<script type="text/javascript" src="https://unpkg.com/chroma-witch@latest/dist/chroma-witch.min.js"></script>

3. Start Chroma Witch

Options A: add a meta tag named chroma-witch in the html head, with the autostart attribute :

<meta name="chroma-witch" autostart />

Options B: call the start method of the window.chroma object:

<script>
	document.addEventListener("DOMContentLoaded", () => window.chroma.start());
</script>

Display the Chroma Witch popup

From your web page, press alt+c to toggle the Chroma Witch popup.

You will be able to edit the colors.

Configuration

Defining options

Some options can be defined via the metadata attribute:

<meta name="chroma-witch" autostart prefix="main-col-" />

Or via the start method:

window.chroma.start({ prefix: "main-col-" }),

If an option is defined both via the metadata attribute and the start method, the latter takes precedence.

Configuration options

• autostart: activate Chroma Witch (1) on page load (otherwise it must be activated via JavaScript).

• prefix: a prefix used to filter css variables (default: color-).

• suffix: a suffix used to filter css variables (default: ``).

• allowed: a comma separated value of hostnames to allow, or * to allow everything (default: *).

• btn_start: a CSS quere selector to select a button that will trigger the popup (2).

• 1 : which doesn't mean that it opens the popup, but it can change website colors based on url and listen for keyboard shortcut events.

• 2 : the checked class will be added on it if the popup is shown.

Customization

The Chroma Witch CSS style is added just after the meta tag (3), so you can add some CSS (either via style or link tags) after the meta tag to modify Chroma Witch CSS:

<meta name="chroma-witch" autostart />
<style>#chroma-witch-popup {background-color: red;}</style

Some interesting css selectors are #chroma-witch-popup, #chroma-witch-buttons, .chroma-witch-color and .chroma-witch-message. Take a look at the source code for more details.

• 3 : or at the end of head if there is no meta tag.