Update app.py

app.py

@@ -261,46 +261,53 @@ def create_interface():
     
     js_code = """
     function gradio_init() {
-        document.documentElement.classList.add('dark');
+        const url = new URL(window.location);
         
-        // 設定事件監聽
-        const observer = new MutationObserver((mutations, obs) => {
-            const table = document.getElementById('periodic-table-container');
-            if (table) {
-                console.log("Periodic table found, attaching event listener.");
-                let selectedElementDiv = null;
+        // 檢查 URL 是否已經是 dark mode
+        if (url.searchParams.get('__theme') !== 'dark') {
+            // 如果不是，設定參數並重新載入
+            url.searchParams.set('__theme', 'dark');
+            window.location.href = url.href;
+        } else {
+            // 如果已經是 dark mode，才設定事件監聽
+            const observer = new MutationObserver((mutations, obs) => {
+                const table = document.getElementById('periodic-table-container');
+                if (table) {
+                    console.log("Periodic table found, attaching event listener.");
+                    let selectedElementDiv = null;
 
-                table.addEventListener('click', function(event) {
-                    const targetCell = event.target.closest('.element-cell');
-                    
-                    if (targetCell && !targetCell.classList.contains('empty-cell')) {
-                        const symbol = targetCell.dataset.symbol;
-                        console.log(`Element clicked: ${symbol}`);
+                    table.addEventListener('click', function(event) {
+                        const targetCell = event.target.closest('.element-cell');
+                        
+                        if (targetCell && !targetCell.classList.contains('empty-cell')) {
+                            const symbol = targetCell.dataset.symbol;
+                            console.log(`Element clicked: ${symbol}`);
 
-                        if (selectedElementDiv) {
-                            selectedElementDiv.classList.remove('selected');
-                        }
-                        targetCell.classList.add('selected');
-                        selectedElementDiv = targetCell;
+                            if (selectedElementDiv) {
+                                selectedElementDiv.classList.remove('selected');
+                            }
+                            targetCell.classList.add('selected');
+                            selectedElementDiv = targetCell;
 
-                        const hidden_input_component = document.getElementById('hidden_trigger_for_js');
-                        if (hidden_input_component) {
-                            const textarea = hidden_input_component.querySelector('textarea');
-                            if (textarea) {
-                                textarea.value = symbol;
-                                textarea.dispatchEvent(new Event('input', { bubbles: true }));
+                            const hidden_input_component = document.getElementById('hidden_trigger_for_js');
+                            if (hidden_input_component) {
+                                const textarea = hidden_input_component.querySelector('textarea');
+                                if (textarea) {
+                                    textarea.value = symbol;
+                                    textarea.dispatchEvent(new Event('input', { bubbles: true }));
+                                }
                             }
                         }
-                    }
-                });
-                obs.disconnect(); 
-            }
-        });
+                    });
+                    obs.disconnect(); 
+                }
+            });
 
-        observer.observe(document.body, {
-            childList: true,
-            subtree: true
-        });
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true
+            });
+        }
     }
     """