Streamlabs ChatBox Cute Colors

streamlabs-chatbox.js

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