.

_res/_custom.js

@@ -32,19 +32,74 @@ function gradioCustomJS() {
 		//document.querySelector("body").style.setProperty("--primary-700", document.querySelector("#dominant_image_color > label > textarea").value)
 	})
 
+	// 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
+	}
+
 	const body = document.querySelector("body")
 	body.className = "dark"
-	body.style.setProperty("--primary-700", "rgb(250, 179, 135)")
-	body.style.setProperty("--primary-50", "color-mix(in srgb, var(--primary-700) 5%, white)")
-	body.style.setProperty("--primary-100", "color-mix(in srgb, var(--primary-700) 10%, white)")
-	body.style.setProperty("--primary-200", "color-mix(in srgb, var(--primary-700) 20%, white)")
-	body.style.setProperty("--primary-300", "color-mix(in srgb, var(--primary-700) 60%, white)")
-	body.style.setProperty("--primary-400", "color-mix(in srgb, var(--primary-700) 70%, white)")
-	body.style.setProperty("--primary-500", "color-mix(in srgb, var(--primary-700) 80%, white)")
-	body.style.setProperty("--primary-600", "color-mix(in srgb, var(--primary-700) 90%, white)")
-	body.style.setProperty("--primary-800", "color-mix(in srgb, var(--primary-700) 70%, black)")
-	body.style.setProperty("--primary-900", "color-mix(in srgb, var(--primary-700) 80%, black)")
-	body.style.setProperty("--primary-950", "color-mix(in srgb, var(--primary-700) 90%, black)")
+
+	// Catppuccin colors
+	const usedColor = "rgb(250, 179, 135)"
+	body.style.setProperty("--cat-rosewater", "rgb(245, 224, 220)")
+	body.style.setProperty("--cat-flamingo", "rgb(242, 205, 205)")
+	body.style.setProperty("--cat-pink", "rgb(245, 194, 231)")
+	body.style.setProperty("--cat-mauve", "rgb(203, 166, 247)")
+	body.style.setProperty("--cat-red", "rgb(243, 139, 168)")
+	body.style.setProperty("--cat-maroon", "rgb(235, 160, 172)")
+	body.style.setProperty("--cat-peach", "rgb(250, 179, 135)")
+	body.style.setProperty("--cat-yellow", "rgb(249, 226, 175)")
+	body.style.setProperty("--cat-green", "rgb(166, 227, 161)")
+	body.style.setProperty("--cat-teal", "rgb(148, 226, 213)")
+	body.style.setProperty("--cat-sky", "rgb(137, 220, 235)")
+	body.style.setProperty("--cat-sapphire", "rgb(116, 199, 236)")
+	body.style.setProperty("--cat-blue", "rgb(137, 180, 250)")
+
+	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) 60%, black)")
+	body.style.setProperty("--primary-800", "color-mix(in srgb, var(--primary-600) 70%, black)")
+	body.style.setProperty("--primary-900", "color-mix(in srgb, var(--primary-600) 80%, black)")
+	body.style.setProperty("--primary-950", "color-mix(in srgb, var(--primary-600) 90%, black)")
+
+	body.style.setProperty("--block-title-text-color", "var(--neutral-950)")
+	body.style.setProperty("--block-label-text-color", "var(--neutral-950)")
+	body.style.setProperty("--checkbox-label-text-color", "var(--neutral-950)")
+
+	body.style.setProperty("--text-color-by-luminance", anpasseTextfarbe(usedColor))
+	body.style.setProperty("--block-title-text-color", anpasseTextfarbe(usedColor))
+	body.style.setProperty("--block-label-text-color", anpasseTextfarbe(usedColor))
+	body.style.setProperty("--checkbox-label-text-color", anpasseTextfarbe(usedColor))
 
 	const prompt_input = document.querySelector("#prompt_input")
 	prompt_input.setAttribute("autocomplete", "off")