Add css variable for controlling chatbot user message border accent (#4989)

* Add css variable

* Fix var name

* Add CHANGELOG

CHANGELOG.md

@@ -12,6 +12,7 @@ No changes to highlight.
 - Add `show_download_button` param to allow the download button in static Image components to be hidden by [@hannahblair](https://github.com/hannahblair) in [PR 4959](https://github.com/gradio-app/gradio/pull/4959)
 - Added autofocus argument to Textbox by [@aliabid94](https://github.com/aliabid94) in [PR 4978](https://github.com/gradio-app/gradio/pull/4978) 
 - Use `gr.State` in `gr.ChatInterface` to reduce latency by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4976](https://github.com/gradio-app/gradio/pull/4976)
+- Add a `chatbot_user_message_border_color_accent` theme variable to control the border color of user messages in a chatbot by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4989](https://github.com/gradio-app/gradio/pull/4989). Set the value of this variable in `Default` theme to `*primary_200`.
 
 ## Bug Fixes:
 

gradio/themes/base.py

@@ -566,6 +566,8 @@ class Base(ThemeClass):
         # Component Atoms: These set the style for elements within components.
         chatbot_code_background_color=None,
         chatbot_code_background_color_dark=None,
+        chatbot_user_message_border_color_accent=None,
+        chatbot_user_message_border_color_accent_dark=None,
         checkbox_background_color=None,
         checkbox_background_color_dark=None,
         checkbox_background_color_focus=None,
@@ -1202,6 +1204,20 @@ class Base(ThemeClass):
         self.section_header_text_weight = section_header_text_weight or getattr(
             self, "section_header_text_weight", "400"
         )
+        self.chatbot_user_message_border_color_accent = (
+            chatbot_user_message_border_color_accent
+            or getattr(
+                self, "chatbot_user_message_border_color_accent", "*border_color_accent"
+            )
+        )
+        self.chatbot_user_message_border_color_accent_dark = (
+            chatbot_user_message_border_color_accent_dark
+            or getattr(
+                self,
+                "chatbot_user_message_border_color_accent_dark",
+                "*border_color_accent",
+            )
+        )
         # Component Atoms
         self.chatbot_code_background_color = chatbot_code_background_color or getattr(
             self, "chatbot_code_background_color", "*neutral_100"

gradio/themes/default.py

@@ -92,4 +92,5 @@ class Default(Base):
             button_cancel_border_color_dark=colors.red.c600,
             button_cancel_text_color=colors.red.c600,
             button_cancel_text_color_dark="white",
+            chatbot_user_message_border_color_accent="*primary_200",
         )

js/chatbot/src/static/ChatBot.svelte

@@ -236,7 +236,7 @@
 		background: var(--background-fill-secondary);
 	}
 	.user {
-		border-color: var(--border-color-accent);
+		border-color: var(--chatbot-user-message-border-color-accent);
 		background-color: var(--color-accent-soft);
 	}
 	.feedback {