Skip to content

Instantly share code, notes, and snippets.

@tomasdev
Created April 10, 2024 00:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tomasdev/f423977ef11431baed618ec2df4fb0e6 to your computer and use it in GitHub Desktop.
Save tomasdev/f423977ef11431baed618ec2df4fb0e6 to your computer and use it in GitHub Desktop.
Colorize any size palette
const s = document.createElement('script'); s.src = 'https://colorjs.io/dist/color.global.js'; document.body.appendChild(s);
// wait for load
function colorize(hue) {
$$("body *").forEach(e => {
if (e.tagName.toUpperCase() === 'SVG' || e.closest('svg')) return;
const s = getComputedStyle(e);
for (const prop of s) {
if (prop.startsWith('-webkit')) continue;
const value = s[prop];
try {
const color = new Color(value);
color.oklch.h = hue;
e.style[prop] = color.to('oklch').display().toString();
} catch (e) {
if (e.toString().includes('gradient')) {
console.log(e);
}
}
}
});
}
// then
colorize(22); // any number 0-360
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment