updated UI to add colours

app.py

@@ -132,8 +132,9 @@ def respond(message, chat_history):
     # Return the updated chat history and the image paths
     return chat_history, image_paths
 
+
 # Gradio UI ---
-with gr.Blocks(theme=gr.themes.Soft()) as demo:
+with gr.Blocks(theme=custom_theme, css=css) as demo:
     gr.Markdown("## Fashioneer - your fashion pioneer!")
     gr.Markdown("Ask me what to wear and I'll suggest clothing with images from the database.")
 
@@ -148,5 +149,47 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
     # This is the original line that connects the input and output
     user_input.submit(fn=respond, inputs=[user_input, chatbot], outputs=[chatbot, gallery])
 
-# This starts the Gradio app
+# Define custom colors from your palette
+pink_bg = "#EBBAB9"
+dark_blue_output = "#407076"
+light_blue_input = "#698996"
+gold_border = "#D3AF37"
+
+# Create a custom theme based on the Soft theme
+custom_theme = gr.themes.Soft(
+    # Set the primary color (affects buttons, etc.)
+    primary_hue="zinc", 
+    # Set the secondary color (affects backgrounds, etc.)
+    secondary_hue="zinc", 
+).set(
+    # Set the main background color
+    body_background_fill=pink_bg,
+    # Set the border color for the image gallery
+    block_border_color=gold_border,
+    # Set the background color for all components
+    input_background_fill=light_blue_input,
+    block_background_fill=light_blue_input,
+    # Set the background for the output components like the chatbot and gallery
+    input_background_fill_dark=light_blue_input,
+    block_background_fill_dark=dark_blue_output
+)
+
+# Custom CSS for the golden border around images
+css = """
+.gallery-item {
+    border: 3px solid var(--gold_border) !important;
+}
+"""
+custom_theme = gr.themes.Soft(
+    # Set the primary color (affects buttons, etc.)
+    primary_hue="zinc", 
+    # Set the secondary color (affects backgrounds, etc.)
+    secondary_hue="zinc", 
+).set(
+    # ... your other color definitions
+).add_css_body(
+    name="gold_border",
+    value="#D3AF37"
+)
+
 demo.launch()