29. Sept. 2024, 05:24

_res/_custom.js

@@ -34,21 +34,37 @@ function gradioCustomJS() {
 	const body = document.querySelector("body")
 	body.className = "dark"
 
-	// MARK: Catppuccin colors
-	const usedColor = "rgb(166, 227, 161)"
-	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)")
+	// 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 + ")")
 
 	body.style.setProperty("--primary-600", usedColor)
 	body.style.setProperty("--primary-50", "color-mix(in srgb, var(--primary-600) 5%, white)")