3. Okt. 2024, 04:42

_res/_custom.js

@@ -4,20 +4,15 @@ function gradioCustomJS() {
 	// 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")
-		}
+		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
 	}
 
@@ -26,7 +21,6 @@ function gradioCustomJS() {
 		const luminanz = berechneHelligkeit(farbe)
 		const textFarbe = luminanz > 0.4 ? "var(--neutral-950)" : "var(--neutral-50)"
 		console.log("Luminanz: " + luminanz + " Text-Farbe: " + textFarbe)
-
 		return textFarbe
 	}
 
@@ -35,36 +29,26 @@ function gradioCustomJS() {
 	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)]})`
-
-	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 + ")")
+	const colors = {
+		rosewater: "245, 224, 220",
+		flamingo: "242, 205, 205",
+		pink: "245, 194, 231",
+		mauve: "203, 166, 247",
+		red: "243, 139, 168",
+		maroon: "235, 160, 172",
+		peach: "250, 179, 135",
+		yellow: "249, 226, 175",
+		green: "166, 227, 161",
+		teal: "148, 226, 213",
+		sky: "137, 220, 235",
+		sapphire: "116, 199, 236",
+		blue: "137, 180, 250",
+	}
+	let usedColor = `rgb(${Object.values(colors)[Math.floor(Math.random() * Object.keys(colors).length)]})`
+
+	for (const [colorName, colorValues] of Object.entries(colors)) {
+		body.style.setProperty(`--cat-${colorName.replace(/,/g, "-")}`, `rgb(${colorValues})`)
+	}
 
 	body.style.setProperty("--primary-600", usedColor)
 	body.style.setProperty("--primary-50", "color-mix(in srgb, var(--primary-600) 5%, white)")