feat: 切换亮暗色时的同时强制更改gradio框架亮暗色

fix #552
另外，我重构了整个js框架，应该是没bug的，应该（

assets/custom.js

@@ -1,3 +1,4 @@
+
 // custom javascript here
 
 const MAX_HISTORY_LENGTH = 32;
@@ -6,67 +7,88 @@ var key_down_history = [];
 var currentIndex = -1;
 var user_input_ta;
 
+var gradioContainer = null;
+var user_input_ta = null;
+var user_input_tb = null;
+var userInfoDiv = null;
+var appTitleDiv = null;
+var chatbot = null;
+
 var ga = document.getElementsByTagName("gradio-app");
 var targetNode = ga[0];
 
-function selectHistory(mutations) {
+// gradio 页面加载好了么???
+function gradioLoaded(mutations) {
     for (var i = 0; i < mutations.length; i++) {
-        if (mutations[i].addedNodes.length) {
-            var user_input_tb = document.getElementById('user_input_tb');
-            if (user_input_tb) {
-                // 监听到user_input_tb被添加到DOM树中
-                // 这里可以编写元素加载完成后需要执行的代码
-                user_input_ta = user_input_tb.querySelector("textarea");
-                if (user_input_ta) {
-                    observer.disconnect(); // 停止监听
-                    // 在 textarea 上监听 keydown 事件
-                    user_input_ta.addEventListener("keydown", function (event) {
-                        var value = user_input_ta.value.trim();
-                        // 判断按下的是否为方向键
-                        if (event.code === 'ArrowUp' || event.code === 'ArrowDown') {
-                            // 如果按下的是方向键，且输入框中有内容，且历史记录中没有该内容，则不执行操作
-                            if (value && key_down_history.indexOf(value) === -1)
-                                return;
-                            // 对于需要响应的动作，阻止默认行为。
-                            event.preventDefault();
-                            var length = key_down_history.length;
-                            if (length === 0) {
-                                currentIndex = -1; // 如果历史记录为空，直接将当前选中的记录重置
-                                return;
-                            }
-                            if (currentIndex === -1) {
-                                currentIndex = length;
-                            }
-                            if (event.code === 'ArrowUp' && currentIndex > 0) {
-                                currentIndex--;
-                                user_input_ta.value = key_down_history[currentIndex];
-                            } else if (event.code === 'ArrowDown' && currentIndex < length - 1) {
-                                currentIndex++;
-                                user_input_ta.value = key_down_history[currentIndex];
-                            }
-                            user_input_ta.selectionStart = user_input_ta.value.length;
-                            user_input_ta.selectionEnd = user_input_ta.value.length;
-                            const input_event = new InputEvent("input", { bubbles: true, cancelable: true });
-                            user_input_ta.dispatchEvent(input_event);
-                        } else if (event.code === "Enter") {
-                            if (value) {
-                                currentIndex = -1;
-                                if (key_down_history.indexOf(value) === -1) {
-                                    key_down_history.push(value);
-                                    if (key_down_history.length > MAX_HISTORY_LENGTH) {
-                                        key_down_history.shift();
-                                    }
-                                }
-                            }
+        if (mutations[i].addedNodes.length) {  
+            gradioContainer = document.querySelector(".gradio-container");
+            user_input_tb = document.getElementById('user_input_tb');
+            userInfoDiv = document.getElementById("user_info");
+            chatbot = document.querySelector('#chuanhu_chatbot');
+
+            if (gradioContainer) {  // user_input_tb 加载出来了没?
+                adjustDarkMode();
+            }
+            if (user_input_tb) {  // user_input_tb 加载出来了没?
+                selectHistory();
+            }
+            if (userInfoDiv) {  // user_input_tb 加载出来了没?
+                setTimeout(showOrHideUserInfo(), 2000);
+            }
+            if (chatbot) {  // user_input_tb 加载出来了没?
+                setChatbotHeight()
+            }
+        }
+    }
+}
+
+function selectHistory() {
+    user_input_ta = user_input_tb.querySelector("textarea");
+    if (user_input_ta) {
+        observer.disconnect(); // 停止监听
+        // 在 textarea 上监听 keydown 事件
+        user_input_ta.addEventListener("keydown", function (event) {
+            var value = user_input_ta.value.trim();
+            // 判断按下的是否为方向键
+            if (event.code === 'ArrowUp' || event.code === 'ArrowDown') {
+                // 如果按下的是方向键，且输入框中有内容，且历史记录中没有该内容，则不执行操作
+                if (value && key_down_history.indexOf(value) === -1)
+                    return;
+                // 对于需要响应的动作，阻止默认行为。
+                event.preventDefault();
+                var length = key_down_history.length;
+                if (length === 0) {
+                    currentIndex = -1; // 如果历史记录为空，直接将当前选中的记录重置
+                    return;
+                }
+                if (currentIndex === -1) {
+                    currentIndex = length;
+                }
+                if (event.code === 'ArrowUp' && currentIndex > 0) {
+                    currentIndex--;
+                    user_input_ta.value = key_down_history[currentIndex];
+                } else if (event.code === 'ArrowDown' && currentIndex < length - 1) {
+                    currentIndex++;
+                    user_input_ta.value = key_down_history[currentIndex];
+                }
+                user_input_ta.selectionStart = user_input_ta.value.length;
+                user_input_ta.selectionEnd = user_input_ta.value.length;
+                const input_event = new InputEvent("input", { bubbles: true, cancelable: true });
+                user_input_ta.dispatchEvent(input_event);
+            } else if (event.code === "Enter") {
+                if (value) {
+                    currentIndex = -1;
+                    if (key_down_history.indexOf(value) === -1) {
+                        key_down_history.push(value);
+                        if (key_down_history.length > MAX_HISTORY_LENGTH) {
+                            key_down_history.shift();
                         }
-                    });
-                    break;
+                    }
                 }
             }
-        }
+        });
     }
 }
-var userInfoDiv = null;
 function toggleUserInfoVisibility(shouldHide) {
     if (userInfoDiv) {
         if (shouldHide) {
@@ -78,7 +100,7 @@ function toggleUserInfoVisibility(shouldHide) {
 }
 function showOrHideUserInfo() {
     userInfoDiv = document.getElementById("user_info");
-    var appTitleDiv = document.getElementById("app_title");
+    appTitleDiv = document.getElementById("app_title");
     var sendBtn = document.getElementById("submit_btn");
 
     // Bind mouse/touch events to show/hide user info
@@ -134,11 +156,30 @@ function showOrHideUserInfo() {
     }, 2000);
 }
 
+function toggleDarkMode(isEnabled) {
+    gradioContainer = document.querySelector(".gradio-container");
+    if (isEnabled) {
+        gradioContainer.classList.add("dark");
+        document.body.style.backgroundColor = "";
+    } else {
+        gradioContainer.classList.remove("dark");
+    }
+}
+function adjustDarkMode() {
+    const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    // 根据当前颜色模式设置初始状态
+    toggleDarkMode(darkModeQuery.matches);
+    // 监听颜色模式变化
+    darkModeQuery.addEventListener("change", (e) => {
+        toggleDarkMode(e.matches);
+    });
+}
+
 function setChatbotHeight() {
     const screenWidth = window.innerWidth;
     const statusDisplay = document.querySelector('#status_display');
     const statusDisplayHeight = statusDisplay ? statusDisplay.offsetHeight : 0;
-    const chatbot = document.querySelector('#chuanhu_chatbot');
+    // const chatbot = document.querySelector('#chuanhu_chatbot');
     const vh = window.innerHeight * 0.01;
     document.documentElement.style.setProperty('--vh', `${vh}px`);
     if (screenWidth <= 320) {
@@ -168,24 +209,21 @@ function setChatbotHeight() {
     }
 }
 
-setChatbotHeight();
 
 var observer = new MutationObserver(function (mutations) {
-    selectHistory(mutations);
-    showOrHideUserInfo();
-}
-);
+    gradioLoaded(mutations);
+});
 observer.observe(targetNode, { childList: true, subtree: true });
 
 
 window.addEventListener("DOMContentLoaded", function () {
-    setChatbotHeight();
-    setTimeout(function () {
-        showOrHideUserInfo();
-        setChatbotHeight();
-    }, 2000);
+    // setChatbotHeight();
+    // setTimeout(function () {
+    //     showOrHideUserInfo();
+    //     setChatbotHeight();
+    // }, 2000);
+    // 本来是为了页面刷出来等两秒重试的，现在这么写不需要了~ 但框架先留着万一需要呢QAQ
 });
-
 window.addEventListener('resize', setChatbotHeight);
 window.addEventListener('scroll', setChatbotHeight);
-  
+window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", adjustDarkMode);