Sep 10, 2024, 11:02 AM

_res/_custom.js

@@ -1,4 +1,6 @@
-function gradioColorChange() {
+function gradioCustomJS() {
+	console.log("gradioCustomJS Started")
+
 	function onDomChange(callback) {
 		const observer = new MutationObserver(callback)
 		observer.observe(document.querySelector("#dominant_image_color"), {
@@ -30,17 +32,19 @@ function gradioColorChange() {
 		//document.querySelector("body").style.setProperty("--primary-700", document.querySelector("#dominant_image_color > label > textarea").value)
 	})
 
-	document.querySelector("body").style.setProperty("--primary-700", "rgb(250, 179, 135)")
-	document.querySelector("body").style.setProperty("--primary-50", "color-mix(in srgb, var(--primary-700) 5%, white)")
-	document.querySelector("body").style.setProperty("--primary-100", "color-mix(in srgb, var(--primary-700) 10%, white)")
-	document.querySelector("body").style.setProperty("--primary-200", "color-mix(in srgb, var(--primary-700) 20%, white)")
-	document.querySelector("body").style.setProperty("--primary-300", "color-mix(in srgb, var(--primary-700) 60%, white)")
-	document.querySelector("body").style.setProperty("--primary-400", "color-mix(in srgb, var(--primary-700) 70%, white)")
-	document.querySelector("body").style.setProperty("--primary-500", "color-mix(in srgb, var(--primary-700) 80%, white)")
-	document.querySelector("body").style.setProperty("--primary-600", "color-mix(in srgb, var(--primary-700) 90%, white)")
-	document.querySelector("body").style.setProperty("--primary-800", "color-mix(in srgb, var(--primary-700) 70%, black)")
-	document.querySelector("body").style.setProperty("--primary-900", "color-mix(in srgb, var(--primary-700) 80%, black)")
-	document.querySelector("body").style.setProperty("--primary-950", "color-mix(in srgb, var(--primary-700) 90%, black)")
+	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)")
 
 	const prompt_input = document.querySelector("#prompt_input")
 	prompt_input.setAttribute("autocomplete", "off")
@@ -114,5 +118,5 @@ function gradioColorChange() {
 	// 	})
 	// })
 
-	return "Animation created"
+	return "Custom Gradio JS"
 }