Update app.py

app.py

@@ -128,7 +128,44 @@ def create_prompt_blocks(count, user_input):
     
     return blocks_ui
 
-with gr.Blocks(title="BATUTO - Generador de Prompts Hiperrealistas", theme=gr.themes.Soft()) as demo:
+# Tema personalizado con colores oscuros y azules
+custom_css = """
+.dark-box textarea {
+    background-color: #1a1a1a !important;
+    color: #4fc3f7 !important;
+    border: 1px solid #1565c0 !important;
+    font-family: monospace;
+}
+
+.dark-box {
+    background: #2d3748 !important;
+    padding: 1.5rem;
+    border-radius: 10px;
+    border: 1px solid #4a5568;
+    margin-bottom: 1rem;
+}
+
+.dark-box h3 {
+    color: #90caf9 !important;
+    margin-top: 0 !important;
+}
+
+.copy-btn {
+    background: #1976d2 !important;
+    color: white !important;
+    border: none !important;
+}
+
+.copy-btn:hover {
+    background: #1565c0 !important;
+}
+"""
+
+with gr.Blocks(
+    title="BATUTO - Generador de Prompts Hiperrealistas", 
+    theme=gr.themes.Soft(),
+    css=custom_css
+) as demo:
     gr.Markdown("""
     # 🎨 BATUTO - Generador de Prompts Hiperrealistas
     Genera prompts detallados para crear imágenes hiperrealistas con IA
@@ -162,17 +199,18 @@ with gr.Blocks(title="BATUTO - Generador de Prompts Hiperrealistas", theme=gr.th
         html_blocks = ""
         for i, prompt in enumerate(prompts, 1):
             html_blocks += f"""
-            <div style="margin-bottom: 2rem; padding: 1.5rem; border: 1px solid #e0e0e0; border-radius: 10px; background: white;">
-                <h3 style="margin-top: 0; color: #2d3748;">Prompt #{i}</h3>
+            <div class="dark-box">
+                <h3>Prompt #{i}</h3>
                 <div style="position: relative;">
                     <textarea 
                         id="prompt-{i}" 
-                        style="width: 100%; height: 200px; padding: 1rem; border: 1px solid #d1d5db; border-radius: 8px; font-family: monospace; resize: vertical;"
+                        style="width: 100%; height: 200px; padding: 1rem; border-radius: 8px; font-family: monospace; resize: vertical; background: #1a1a1a; color: #4fc3f7; border: 1px solid #1565c0;"
                         readonly
                     >{prompt}</textarea>
                     <button 
                         onclick="copyPrompt({i})" 
-                        style="position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.5rem 1rem; background: #4f46e5; color: white; border: none; border-radius: 6px; cursor: pointer;"
+                        class="copy-btn"
+                        style="position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.5rem 1rem; background: #1976d2; color: white; border: none; border-radius: 6px; cursor: pointer;"
                     >
                         📋 Copiar
                     </button>
@@ -193,11 +231,11 @@ with gr.Blocks(title="BATUTO - Generador de Prompts Hiperrealistas", theme=gr.th
             const button = event.target;
             const originalText = button.textContent;
             button.textContent = '✅ Copiado!';
-            button.style.background = '#10b981';
+            button.style.background = '#388e3c';
             
             setTimeout(() => {
                 button.textContent = originalText;
-                button.style.background = '#4f46e5';
+                button.style.background = '#1976d2';
             }, 2000);
         }
         </script>