Update app.py

app.py

@@ -534,9 +534,79 @@ def handle_refresh_space_status(hf_api_key_ui, ui_owner_name, ui_space_name):
     for key, val in status.items():
         md += f"- **{key.replace('_', ' ').title()}:** `{val}`\n"
     return md
+custom_theme = gr.themes.Base(
+    primary_hue="teal",
+    secondary_hue="purple",
+    neutral_hue="zinc",
+    text_size="sm",
+    spacing_size="md",
+    radius_size="sm",
+    font=["System UI", "sans-serif"]
+)
+
+custom_css = """
+body {
+  background: linear-gradient(to bottom right, #2c3e50, #34495e);
+  color: #ecf0f1;
+}
+.gradio-container {
+    background: transparent !important;
+}
+.gr-box, .gr-panel, .gr-pill {
+    background-color: rgba(44, 62, 80, 0.8) !important;
+    border-color: rgba(189, 195, 199, 0.2) !important;
+}
+.gr-textbox, .gr-dropdown, .gr-button, .gr-code, .gr-chat-message {
+    border-color: rgba(189, 195, 199, 0.3) !important;
+    background-color: rgba(52, 73, 94, 0.9) !important;
+    color: #ecf0f1 !important;
+}
+.gr-button.gr-button-primary {
+    background-color: #1abc9c !important;
+    color: white !important;
+    border-color: #16a085 !important;
+}
+.gr-button.gr-button-secondary {
+     background-color: #9b59b6 !important;
+     color: white !important;
+     border-color: #8e44ad !important;
+}
+.gr-button.gr-button-stop {
+    background-color: #e74c3c !important;
+    color: white !important;
+    border-color: #c0392b !important;
+}
+.gr-markdown {
+    background-color: rgba(44, 62, 80, 0.7) !important;
+    padding: 10px;
+    border-radius: 5px;
+}
+.gr-markdown h1, .gr-markdown h2, .gr-markdown h3, .gr-markdown h4, .gr-markdown h5, .gr-markdown h6 {
+    color: #ecf0f1 !important;
+    border-bottom-color: rgba(189, 195, 199, 0.3) !important;
+}
+.gr-markdown pre code {
+    background-color: rgba(52, 73, 94, 0.95) !important;
+    border-color: rgba(189, 195, 199, 0.3) !important;
+}
+.gr-chatbot {
+    background-color: rgba(44, 62, 80, 0.7) !important;
+    border-color: rgba(189, 195, 199, 0.2) !important;
+}
+.gr-chatbot .message {
+    background-color: rgba(52, 73, 94, 0.9) !important;
+    color: #ecf0f1 !important;
+    border-color: rgba(189, 195, 199, 0.3) !important;
+}
+.gr-chatbot .message.user {
+    background-color: rgba(46, 204, 113, 0.9) !important;
+    color: black !important;
+}
+"""
 
 # --- Gradio UI Definition ---
-with gr.Blocks(theme=gr.themes.Soft(), css=".gradio-container {background: linear-gradient(to bottom right, #eff6ff, #dbeafe);}") as demo:
+#with gr.Blocks(theme=gr.themes.Soft(), css=".gradio-container {background: linear-gradient(to bottom right, #eff6ff, #dbeafe);}") as demo:
+with gr.Blocks(theme=custom_theme, css=custom_css) as demo:
     gr.Markdown("# 🤖 AI-Powered Hugging Face Space Builder")
     gr.Markdown("Use an AI assistant to create, modify, build, and manage your Hugging Face Spaces directly from this interface.")