Update app.py

app.py

@@ -16,22 +16,73 @@ def respond(message, history):
     return response['choices'][0]['message']['content'].strip()
 messages = [{"role":"system","content":"you are a friendly chatbot"}]
 
-custom_theme = gr.themes.Base(
-    primary_hue=gr.themes.Color(c100="#782dba", c200="#f89e19", c300="#fff4c6", c400="#782dba", c50="#782dba", c500="#782dba", c600="#782dba", c700="#782dba", c800="#782dba", c900="#782dba", c950="#782dba"),
-    secondary_hue=gr.themes.Color(c50="#782dba",c100="#782dba",c200="#f89e19", c300="#fff4c6", c400="#782dba", c500="#782dba", c600="#782dba", c700="#782dba", c800="#782dba", c900="#782dba", c950="#782dba"),
-    neutral_hue="gray",
-    spacing_size="lg",
-    radius_size="lg",
-    text_size="lg",
-    font=[gr.themes.GoogleFont("IBM Plex Sans"), "sans-serif"],
-    font_mono=[gr.themes.GoogleFont("IBM Plex Mono"), "monospace"]
+gr.themes.builder()
+custom_theme = gr.themes.Citrus(
+    primary_hue=gr.themes.Color(c100="#fff4c6", c200="#f89e19", c300="#fcd34d", c400="#fbbf24", c50="rgba(0, 0, 0, 1)", c500="#f59e0b", c600="#d97706", c700="#b45309", c800="#92400e", c900="#78350f", c950="#6c370f"),
+    neutral_hue=gr.themes.Color(c100="#f89e19", c200="#f89e19", c300="#782dba", c400="rgba(255, 219.05424040450472, 76.05263157894738, 1)", c50="#fefce8", c500="rgba(255, 222.06596413600374, 119.67105263157895, 1)", c600="rgba(255, 195.35087719298247, 70.46052631578947, 1)", c700="rgba(255, 186.82715311004787, 88.35526315789473, 1)", c800="rgba(255, 185.52631578947367, 107.36842105263158, 1)", c900="rgba(255, 167.29224376731304, 88.35526315789473, 1)", c950="rgba(255, 195.00951173113506, 136.44736842105263, 1)"),
 ).set(
-    # Input area
-    input_background_fill="*secondary_100",
-    input_border_color_focus="*primary_300",
-    # Button styling
-    button_primary_background_fill="*primary_200",
-    button_primary_background_fill_hover="*primary_200"
+    background_fill_primary='*primary_100',
+    background_fill_primary_dark='*neutral_300',
+    background_fill_secondary='*primary_100',
+    background_fill_secondary_dark='*primary_100',
+    border_color_accent='*primary_100',
+    border_color_accent_dark='*primary_100',
+    border_color_accent_subdued='*primary_100',
+    border_color_accent_subdued_dark='*primary_100',
+    border_color_primary='*primary_100',
+    border_color_primary_dark='*primary_100',
+    color_accent='*primary_100',
+    color_accent_soft='*primary_100',
+    color_accent_soft_dark='*primary_100',
+    link_text_color='*primary_50',
+    link_text_color_dark='*primary_50',
+    link_text_color_active='*primary_50',
+    link_text_color_active_dark='*primary_50',
+    link_text_color_hover='*primary_50',
+    link_text_color_hover_dark='*primary_50',
+    link_text_color_visited='*primary_50',
+    link_text_color_visited_dark='*primary_50',
+    code_background_fill='*primary_50',
+    code_background_fill_dark='*primary_100',
+    block_background_fill_dark='*primary_100',
+    block_border_color='*primary_100',
+    block_border_color_dark='*primary_100',
+    block_info_text_color='*primary_50',
+    block_info_text_color_dark='*primary_100',
+    block_label_background_fill='*primary_100',
+    block_label_background_fill_dark='*primary_100',
+    block_label_border_color='*primary_100',
+    block_label_border_color_dark='*primary_100',
+    block_label_text_color='*primary_50',
+    block_label_text_color_dark='*primary_50',
+    block_title_border_color_dark='*primary_50',
+    accordion_text_color='*primary_100',
+    accordion_text_color_dark='*primary_100',
+    checkbox_background_color_dark='*primary_100',
+    input_background_fill_dark='*primary_100',
+    input_background_fill_focus='*primary_100',
+    input_background_fill_focus_dark='*primary_100',
+    input_background_fill_hover='*primary_100',
+    input_background_fill_hover_dark='*primary_100',
+    table_odd_background_fill_dark='*primary_100',
+    button_primary_background_fill='*primary_50',
+    button_primary_background_fill_dark='*primary_100',
+    button_primary_background_fill_hover='*primary_200',
+    button_primary_border_color='*primary_100',
+    button_primary_border_color_dark='*primary_100',
+    button_primary_border_color_hover='*primary_100',
+    button_primary_border_color_hover_dark='*primary_100',
+    button_primary_text_color='*primary_50',
+    button_primary_text_color_dark='*primary_50',
+    button_primary_text_color_hover='*primary_50',
+    button_primary_text_color_hover_dark='*primary_50',
+    button_secondary_background_fill='*primary_200',
+    button_secondary_background_fill_dark='*primary_100',
+    button_secondary_border_color='*primary_100',
+    button_secondary_border_color_dark='*primary_100',
+    button_secondary_border_color_hover='*primary_100',
+    button_secondary_border_color_hover_dark='*primary_100',
+    button_secondary_text_color_dark='*primary_50'
 )
 
 chatbot = gr.ChatInterface(respond, type="messages",theme=custom_theme)