Github contribution graph color changer

github_color.js

const activeColorBorderStyle = "2px solid rgb(255, 0, 0)";
const inactiveColorBorderStyle = "0";

const legend = document.querySelector("ul.legend");
const svg = document.querySelector("svg.js-calendar-graph-svg");

let colorChangeEnabled = false;
let selectedColorBox = null;
let selectedColor = null;

const legendClickHandler = (event) => {
  const target = event.target;
  if (target.parentElement != legend && target.tagName != "LI") {
    return;
  }

  if (colorChangeEnabled && target.classList.contains("active-color")) {
    colorChangeEnabled = false;
    selectedColorBox.classList.remove("active-color");
    target.style.border = inactiveColorBorderStyle;
    return;
  }

  colorChangeEnabled = true;
  if (selectedColorBox) {
    selectedColorBox.classList.remove("active-color");
    selectedColorBox.style.border = inactiveColorBorderStyle;
  }
  selectedColorBox = target;
  selectedColorBox.classList.add("active-color");
  selectedColorBox.style.border = activeColorBorderStyle;
  selectedColor = selectedColorBox.style.backgroundColor;
};
legend.addEventListener("click", legendClickHandler);

const rectClickHandler = (event) => {
  const target = event.target;

  if (!colorChangeEnabled) {
    return;
  }

  event.preventDefault();
  event.stopPropagation();

  if (target.tagName != "rect" || !target.classList.contains("day")) {
    return;
  }

  target.style.fill = selectedColor;
};
svg.addEventListener("click", rectClickHandler);