Update app.py

app.py

@@ -493,13 +493,32 @@ input[type=range] { accent-color: #c2410c; }
 
 # ── JAVASCRIPT (theme switcher + prompt enhancer hint) ────────────────────────
 
+JS_INIT = """
+# ── JAVASCRIPT ──
 JS_INIT = """
 function() {
-    // expose accent-color CSS var for metadata panel
+    // புது பங்க்ஷன்: இது எல்லா பிரைமரி கலர்களையும் மாத்தும்
+    window.applyTheme = function(color) {
+        if(!color.startsWith('#')) return;
+        
+        // CSS Variables-ஐ மாற்றுதல்
+        document.documentElement.style.setProperty('--drex-acc', color);
+        
+        // பட்டன்கள் மற்றும் ஸ்லைடர்களை மாற்றுதல்
+        const style = document.createElement('style');
+        style.innerHTML = `
+            button.primary { background: ${color} !important; }
+            input[type=range] { accent-color: ${color} !important; }
+            .theme-dot.selected { border-color: white !important; }
+            #lora-gallery .thumbnail-item.selected { border-color: ${color} !important; box-shadow: 0 0 0 1px ${color} !important; }
+            .tab-nav button.selected { color: ${color} !important; border-bottom-color: ${color} !important; }
+        `;
+        document.head.appendChild(style);
+    }
+    
     document.documentElement.style.setProperty('--drex-acc', '#c2410c');
 }
 """
-
 # ── GRADIO UI ─────────────────────────────────────────────────────────────────
 
 with gr.Blocks(title="D-REX Studio") as app:
@@ -528,30 +547,34 @@ with gr.Blocks(title="D-REX Studio") as app:
     with gr.Row():
         gr.LoginButton(scale=0)
 
+    # ── THEME BAR ──
     # ── THEME BAR ──
     with gr.Row():
         theme_selector = gr.HTML("""
         <div id="theme-bar">
           <span style="font-size:10px;font-family:monospace;color:#524e4a;margin-right:4px">THEME</span>
-          <span class="theme-dot" style="background:#c2410c" title="Orange Red"></span>
-          <span class="theme-dot" style="background:#7c3aed" title="Violet"></span>
-          <span class="theme-dot" style="background:#0369a1" title="Ocean"></span>
-          <span class="theme-dot" style="background:#047857" title="Emerald"></span>
-          <span class="theme-dot" style="background:#be185d" title="Rose"></span>
-          <span class="theme-dot" style="background:#b45309" title="Amber"></span>
+          
+          <span class="theme-dot" style="background:#c2410c" title="Orange Red" 
+                onclick="applyTheme('#c2410c')"></span>
+          <span class="theme-dot" style="background:#7c3aed" title="Violet" 
+                onclick="applyTheme('#7c3aed')"></span>
+          <span class="theme-dot" style="background:#0369a1" title="Ocean" 
+                onclick="applyTheme('#0369a1')"></span>
+          <span class="theme-dot" style="background:#047857" title="Emerald" 
+                onclick="applyTheme('#047857')"></span>
+          <span class="theme-dot" style="background:#be185d" title="Rose" 
+                onclick="applyTheme('#be185d')"></span>
+          <span class="theme-dot" style="background:#b45309" title="Amber" 
+                onclick="applyTheme('#b45309')"></span>
+          
           <span style="font-size:10px;font-family:monospace;color:#524e4a;margin-left:8px">CUSTOM</span>
         </div>
+
         <div style="display:flex;justify-content:center;gap:8px;margin-bottom:12px">
           <input id="custom-theme-hex" type="text" maxlength="7" placeholder="#hex color"
             style="width:100px;background:#1a1816;border:1px solid #272422;border-radius:5px;
                    padding:4px 8px;font-size:11px;font-family:monospace;color:#f0ebe5;outline:none"/>
-          <button onclick="
-            const v=document.getElementById('custom-theme-hex').value.trim();
-            if(/^#[0-9a-fA-F]{6}$/.test(v)){
-              document.querySelectorAll('button.primary').forEach(b=>b.style.background=v);
-              document.querySelectorAll('input[type=range]').forEach(r=>r.style.accentColor=v);
-              document.documentElement.style.setProperty('--drex-acc',v);
-            }"
+          <button onclick="applyTheme(document.getElementById('custom-theme-hex').value.trim())"
             style="background:#1a1816;border:1px solid #272422;border-radius:5px;
                    padding:4px 12px;font-size:11px;font-family:monospace;color:#9a9088;cursor:pointer">
             apply