Update app.py

app.py

@@ -17,7 +17,7 @@ css="""
 
 }
 .bot_chat{
-    background: #1c3c9b;
+    background: $bot_c;
     border-radius: 10px 10px 10px 0px;
     padding: 10px;
     max-width: 100%;
@@ -27,8 +27,8 @@ css="""
     
 }
 .chat_card{
-    background: #253251; #background_c
-    color:#FFFFFF; #font_c;
+    background: $background_c;
+    color: $font_c;
     border-radius: 15px;
     border-width: thin;
     padding: 15px;
@@ -72,7 +72,7 @@ def get_screenshot(chat,css_in,w,h,user_c,bot_c,background_c,font_c):
     print(user_c)
     if user_c:
         user_c=user_c.strip('""').strip("''")
-        css_in=css_in.replace("$user_c",user_c)
+        css_in=css_in.replace("$user_c",user_c).replace("$bot_c",bot_c).replace("$background_c",background_c).replace("$font_c",font_c)
     html_body=""
     for user,bot in chat:
         html_body += html_user.replace("$chat",user)
@@ -146,11 +146,11 @@ with gr.Blocks(css=css) as app:
                     im_height=gr.Number(label="Height",value=1000)
                     im_width=gr.Number(label="Width",value=500)
                 with gr.Row():
-                    user_c=gr.ColorPicker(value="#367bb9")
-                    bot_c=gr.ColorPicker(value="#1c3c9b")
+                    user_c=gr.ColorPicker(label="User Color",value="#367bb9")
+                    bot_c=gr.ColorPicker(label="Bot Color",value="#1c3c9b")
                 with gr.Row():
-                    background_c=gr.ColorPicker(value="#253251")
-                    font_c=gr.ColorPicker(value="#FFFFFF")                    
+                    background_c=gr.ColorPicker(label="Background Color",value="#253251")
+                    font_c=gr.ColorPicker(label="Font Color",value="#ffffff")                    
                 chatblock=gr.Dropdown(label="Chatblocks",choices=[c for c in range(1,40)],multiselect=True)
                 
                 im_btn=gr.Button("Screenshot")