Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Streamlabs ChatBox Cute Colors
// makes streamlabs ChatBox username colors less saturated and brighter
document.addEventListener('onEventReceived', function(obj) {
const container = document.querySelector(`[data-id="${obj.detail.messageId}"]`);
const message = container.querySelector('.meta');
const colorString = message.style.color;
// never regex! ever! :]
const r = Number(colorString.split('(')[1].split(',')[0]);
const g = Number(colorString.split(',')[1].trim());
const b = Number(colorString.split(',')[2].split(')')[0].trim());
const {h, s, l} = rgbToHsl(r, g, b);
// message.setAttribute('style', `color: hsl(${h}, ${s}%, ${l}%);`);
message.setAttribute('style', `color: hsl(${h}, ${70}%, ${75}%);`);
});
// i stole this from css-tricks
// https://css-tricks.com/converting-color-spaces-in-javascript/
function rgbToHsl(r, g, b) {
r /= 255; g /= 255; b /= 255;
let cmin = Math.min(r,g,b);
let cmax = Math.max(r,g,b);
let delta = cmax - cmin;
let h = 0; let s = 0; let l = 0;
if (delta == 0) { h = 0; }
else if (cmax == r) { h = ((g - b) / delta) % 6; }
else if (cmax == g) { h = (b - r) / delta + 2; }
else { h = (r - g) / delta + 4; }
h = Math.round(h * 60);
if (h < 0) { h += 360; }
l = (cmax + cmin) / 2;
s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
s = +(s * 100).toFixed(1);
l = +(l * 100).toFixed(1);
return {h: h, s:s, l:l};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment