Update app.py

app.py

@@ -525,10 +525,45 @@ import atexit
 atexit.register(file_manager.cleanup_all)
 
 # Create custom theme
-theme = Monochrome().set(
-    primary_hue="blue",
-    secondary_hue="slate",
-    neutral_hue="zinc",
+theme = gr.themes.Monochrome(
+    primary_hue=gr.themes.Color(
+        c50="#EBEFFF",
+        c100="#D3DEFF",
+        c200="#A6B9FF",
+        c300="#7B97FF",
+        c400="#4C73FF",
+        c500="#0047FF",
+        c600="#0037DB",
+        c700="#0029B7",
+        c800="#001D93",
+        c900="#00126F",
+    ),
+    secondary_hue=gr.themes.Color(
+        c50="#F4F7FF",
+        c100="#E9EEFF",
+        c200="#D3DEFF",
+        c300="#BED0FF",
+        c400="#A8C1FF",
+        c500="#93B3FF",
+        c600="#7595DB",
+        c700="#5978B7",
+        c800="#3E5A93",
+        c900="#223C6F",
+    ),
+    neutral_hue=gr.themes.Color(
+        c50="#F7F7F8",
+        c100="#EFEFEF",
+        c200="#DCDCDC",
+        c300="#BDBDBD",
+        c400="#989898",
+        c500="#7C7C7C",
+        c600="#656565",
+        c700="#525252",
+        c800="#464646",
+        c900="#3D3D3D",
+    ),
+    font=("Inter", "sans-serif"),
+    font_mono=("IBM Plex Mono", "monospace"),
 )
 
 # Create Gradio interface with modern UI
@@ -536,11 +571,19 @@ with gr.Blocks(
     title="Text to Speech Studio", 
     theme=theme,
     css="""
-        .container { max-width: 1200px; margin: auto; }
-        .title { text-align: center; margin-bottom: 2rem; }
-        .input-group { margin-bottom: 1.5rem; }
-        .help-text { font-size: 0.9em; color: #666; }
-        .status-area { margin: 1rem 0; }
+        .container { max-width: 1200px; margin: auto; padding: 2rem; }
+        .title { text-align: center; margin-bottom: 2.5rem; }
+        .title h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; }
+        .title h3 { font-size: 1.2rem; font-weight: 400; color: var(--neutral-600); }
+        .input-group { margin-bottom: 1.5rem; border-radius: 8px; }
+        .help-text { font-size: 0.9rem; color: var(--neutral-600); padding: 0.5rem 0; }
+        .status-area { margin: 1.5rem 0; padding: 1rem; border-radius: 8px; }
+        .error-message { color: var(--error-500); }
+        .preview-audio { margin: 1rem 0; }
+        .download-file { padding: 1rem; }
+        /* Modern Button Styles */
+        button.primary { background: var(--primary-500); }
+        button.secondary { background: var(--neutral-100); color: var(--neutral-800); }
     """
 ) as app:
     with gr.Group(elem_classes="container"):