_res/_custom.js

function gradioCustomJS() {
  console.log("gradioCustomJS Started");

  // MARK: berechne Helligkeit der Akzentfarbe
  function berechneHelligkeit(rgb) {
    const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    if (!match) {
      throw new Error("Ungültiges Farbformat");
    }

    const r = parseInt(match[1]) / 255;
    const g = parseInt(match[2]) / 255;
    const b = parseInt(match[3]) / 255;

    const rLin = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
    const gLin = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
    const bLin = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);

    const luminanz = 0.2126 * rLin + 0.7152 * gLin + 0.0722 * bLin;

    return luminanz;
  }

  // MARK: Textfarbe bestimmen
  function anpasseTextfarbe(farbe) {
    const luminanz = berechneHelligkeit(farbe);
    const textFarbe = luminanz > 0.4 ? "var(--neutral-950)" : "var(--neutral-50)";
    console.log("Luminanz: " + luminanz + " Text-Farbe: " + textFarbe);

    return textFarbe;
  }

  // MARK: Body Styles
  const body = document.querySelector("body");
  body.className = "dark";

  // Catppuccin colors
  const rosewater = "245, 224, 220";
  const flamingo = "242, 205, 205";
  const pink = "245, 194, 231";
  const mauve = "203, 166, 247";
  const red = "243, 139, 168";
  const maroon = "235, 160, 172";
  const peach = "250, 179, 135";
  const yellow = "249, 226, 175";
  const green = "166, 227, 161";
  const teal = "148, 226, 213";
  const sky = "137, 220, 235";
  const sapphire = "116, 199, 236";
  const blue = "137, 180, 250";

  let colors = [rosewater, flamingo, pink, mauve, red, maroon, peach, yellow, green, teal, sky, sapphire, blue];
  //let usedColor = `rgb(${colors[Math.floor(Math.random() * colors.length)]})`
  let usedColor = `rgb(${sapphire})`;
  const textColorByLuminance = anpasseTextfarbe(usedColor);

  body.style.setProperty("--cat-rosewater", "rgb(" + rosewater + ")");
  body.style.setProperty("--cat-flamingo", "rgb(" + flamingo + ")");
  body.style.setProperty("--cat-pink", "rgb(" + pink + ")");
  body.style.setProperty("--cat-mauve", "rgb(" + mauve + ")");
  body.style.setProperty("--cat-red", "rgb(" + red + ")");
  body.style.setProperty("--cat-maroon", "rgb(" + maroon + ")");
  body.style.setProperty("--cat-peach", "rgb(" + peach + ")");
  body.style.setProperty("--cat-yellow", "rgb(" + yellow + ")");
  body.style.setProperty("--cat-green", "rgb(" + green + ")");
  body.style.setProperty("--cat-teal", "rgb(" + teal + ")");
  body.style.setProperty("--cat-sky", "rgb(" + sky + ")");
  body.style.setProperty("--cat-sapphire", "rgb(" + sapphire + ")");
  body.style.setProperty("--cat-blue", "rgb(" + blue + ")");

  body.style.setProperty("--primary-600", usedColor);
  body.style.setProperty("--primary-50", "color-mix(in srgb, var(--primary-600) 5%, white)");
  body.style.setProperty("--primary-100", "color-mix(in srgb, var(--primary-600) 10%, white)");
  body.style.setProperty("--primary-200", "color-mix(in srgb, var(--primary-600) 20%, white)");
  body.style.setProperty("--primary-300", "color-mix(in srgb, var(--primary-600) 60%, white)");
  body.style.setProperty("--primary-400", "color-mix(in srgb, var(--primary-600) 70%, white)");
  body.style.setProperty("--primary-500", "color-mix(in srgb, var(--primary-600) 80%, white)");
  body.style.setProperty("--primary-700", "color-mix(in srgb, var(--primary-600) 80%, black)");
  body.style.setProperty("--primary-800", "color-mix(in srgb, var(--primary-600) 65%, black)");
  body.style.setProperty("--primary-900", "color-mix(in srgb, var(--primary-600) 40%, black)");
  body.style.setProperty("--primary-950", "color-mix(in srgb, var(--primary-600) 30%, black)");

  body.style.setProperty("--button-primary-background-fill", "var(--primary-600)");
  body.style.setProperty("--button-primary-background-fill-hover", "var(--primary-500)");
  body.style.setProperty("--blur-value", "0px");

  body.style.setProperty("--text-color-by-luminance", textColorByLuminance);
  body.style.setProperty("--block-label-text-color", textColorByLuminance);
  body.style.setProperty("--block-title-text-color", textColorByLuminance);
  body.style.setProperty("--button-primary-text-color", textColorByLuminance);
  body.style.setProperty("--checkbox-label-text-color-selected", textColorByLuminance);

  // MARK: SVG Animationen & Emojis
  // document.querySelector(".row-header i#wink").innerHTML = ''
  // document.querySelector(".row-header i.heart-beat-emoji").innerHTML = ''

  return "Animation created";
}