Update app.py

app.py

@@ -780,7 +780,90 @@ def handle_refresh_space_status(hf_api_key_ui, ui_owner_name, ui_space_name):
     yield _status_display_md
 
 
-with gr.Blocks(theme=gr.themes.Soft(primary_hue="teal", secondary_hue="orange")) as demo:
+# Define a custom theme with a dark background and contrasting colors
+# And add custom CSS for a background gradient and component styling
+custom_theme = gr.themes.Base(
+    primary_hue="teal", # Teal for primary actions
+    secondary_hue="purple", # Purple for secondary elements
+    neutral_hue="zinc", # Zinc for neutral/backgrounds (dark gray)
+    text_size="sm", # Smaller text size for a denser, professional look
+    spacing_size="md", # Medium spacing
+    radius_size="sm", # Small border radius
+    font=["System UI", "sans-serif"] # Use system font
+)
+
+custom_css = """
+body {
+  background: linear-gradient(to bottom right, #2c3e50, #34495e); /* Dark blue-gray gradient */
+  color: #ecf0f1; /* Light text color for dark background */
+}
+/* Adjust main Gradio container background to be transparent to see body gradient */
+.gradio-container {
+    background: transparent !important;
+}
+/* Adjust component backgrounds for contrast against the body gradient */
+.gr-box, .gr-panel, .gr-pill {
+    background-color: rgba(44, 62, 80, 0.8) !important; /* Slightly lighter transparent dark blue-gray */
+    border-color: rgba(189, 195, 199, 0.2) !important; /* Light border for contrast */
+}
+/* Adjust inputs, dropdowns, buttons etc. for visibility */
+.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; /* Slightly different dark blue-gray */
+    color: #ecf0f1 !important; /* Ensure text is light */
+}
+.gr-button.gr-button-primary {
+    background-color: #1abc9c !important; /* Teal from primary_hue */
+    color: white !important;
+    border-color: #16a085 !important;
+}
+.gr-button.gr-button-secondary {
+     background-color: #9b59b6 !important; /* Purple from secondary_hue */
+     color: white !important;
+     border-color: #8e44ad !important;
+}
+.gr-button.gr-button-stop {
+    background-color: #e74c3c !important; /* Red for stop/delete */
+    color: white !important;
+    border-color: #c0392b !important;
+}
+/* Adjust markdown backgrounds */
+.gr-markdown {
+    background-color: rgba(44, 62, 80, 0.7) !important; /* Transparent dark background */
+    padding: 10px; /* Add some padding */
+    border-radius: 5px; /* Rounded corners */
+}
+/* Style markdown headers for better contrast */
+.gr-markdown h1, .gr-markdown h2, .gr-markdown h3, .gr-markdown h4, .gr-markdown h5, .gr-markdown h6 {
+    color: #ecf0f1 !important; /* Ensure headers are light */
+    border-bottom-color: rgba(189, 195, 199, 0.3) !important; /* Light separator */
+}
+/* Style code blocks within markdown */
+.gr-markdown pre code {
+    background-color: rgba(52, 73, 94, 0.95) !important; /* Darker code background */
+    border-color: rgba(189, 195, 199, 0.3) !important;
+}
+
+/* Chatbot specific styling */
+.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; /* Dark background for messages */
+    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; /* Greenish background for user messages */
+    color: black !important; /* Dark text for green background */
+}
+
+
+"""
+
+
+with gr.Blocks(theme=custom_theme, css=custom_css) as demo:
     gr.Markdown("# 🤖 AI Code & Space Generator")
     gr.Markdown("Configure settings, chat with AI to generate/modify Hugging Face Spaces, then build, preview, and edit.")
     with gr.Row():