Update app.py

app.py

@@ -14,15 +14,74 @@ if my_api_key == "empty":
 
 gr.Chatbot.postprocess = postprocess
 
-css = """
-      #col-container {max-width: 80%; margin-left: auto; margin-right: auto;}
-      #chatbox {min-height: 150px}
-      #header {text-align: center;font-size: 2.8em}
-      #prompt_template_preview {padding: 1em; border-width: 1px; border-style: solid; border-color: #e0e0e0; border-radius: 4px;}
-      #submit {text-align: center; background-color: #e0e0e0;}
-      #label {font-size: 0.8em; padding: 0.5em; margin: 0;}
-      """
-with gr.Blocks() as demo:
+
+with open("custom.css", "r", encoding="utf-8") as f:
+    customCSS = f.read()
+
+with gr.Blocks(
+    css=customCSS,
+    theme=gr.themes.Soft(
+        primary_hue=gr.themes.Color(
+            c50="#02C160",
+            c100="rgba(2, 193, 96, 0.2)",
+            c200="#02C160",
+            c300="rgba(2, 193, 96, 0.32)",
+            c400="rgba(2, 193, 96, 0.32)",
+            c500="rgba(2, 193, 96, 1.0)",
+            c600="rgba(2, 193, 96, 1.0)",
+            c700="rgba(2, 193, 96, 0.32)",
+            c800="rgba(2, 193, 96, 0.32)",
+            c900="#02C160",
+            c950="#02C160",
+        ),
+        secondary_hue=gr.themes.Color(
+            c50="#576b95",
+            c100="#576b95",
+            c200="#576b95",
+            c300="#576b95",
+            c400="#576b95",
+            c500="#576b95",
+            c600="#576b95",
+            c700="#576b95",
+            c800="#576b95",
+            c900="#576b95",
+            c950="#576b95",
+        ),
+        neutral_hue=gr.themes.Color(
+            name="gray",
+            c50="#f9fafb",
+            c100="#f3f4f6",
+            c200="#e5e7eb",
+            c300="#d1d5db",
+            c400="#B2B2B2",
+            c500="#808080",
+            c600="#636363",
+            c700="#515151",
+            c800="#393939",
+            c900="#272727",
+            c950="#171717",
+        ),
+        radius_size=gr.themes.sizes.radius_sm,
+    ).set(
+        button_primary_background_fill="#06AE56",
+        button_primary_background_fill_dark="#06AE56",
+        button_primary_background_fill_hover="#07C863",
+        button_primary_border_color="#06AE56",
+        button_primary_border_color_dark="#06AE56",
+        button_primary_text_color="#FFFFFF",
+        button_primary_text_color_dark="#FFFFFF",
+        button_secondary_background_fill="#F2F2F2",
+        button_secondary_background_fill_dark="#2B2B2B",
+        button_secondary_text_color="#393939",
+        button_secondary_text_color_dark="#FFFFFF",
+        # background_fill_primary="#F7F7F7",
+        # background_fill_primary_dark="#1F1F1F",
+        block_title_text_color="*primary_500",
+        block_title_background_fill="*primary_100",
+        input_background_fill="#F6F6F6",
+    ),
+) as demo:
+    
     history = gr.State([])
     token_count = gr.State([])
     promptTemplates = gr.State(load_template(get_template_names(plain=True)[0], mode=2))