From c57a4e2729c7945ba09c32a500cd571a05075194 Mon Sep 17 00:00:00 2001
From: Freddy Boulton <alfonsoboulton@gmail.com>
Date: Thu, 20 Jul 2023 15:47:01 -0500
Subject: [PATCH] Add css variable for controlling chatbot user message border
 accent (#4989)

* Add css variable

* Fix var name

* Add CHANGELOG
---
 CHANGELOG.md                         |  1 +
 gradio/themes/base.py                | 16 ++++++++++++++++
 gradio/themes/default.py             |  1 +
 js/chatbot/src/static/ChatBot.svelte |  2 +-
 4 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 68280a3043..297ef74460 100644
--- a/CHANGELOG.md
+++ b/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:
 
diff --git a/gradio/themes/base.py b/gradio/themes/base.py
index 5306b4f3e2..93bc1d0c94 100644
--- a/gradio/themes/base.py
+++ b/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"
diff --git a/gradio/themes/default.py b/gradio/themes/default.py
index e158dab794..0dfe6e3ebe 100644
--- a/gradio/themes/default.py
+++ b/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",
         )
diff --git a/js/chatbot/src/static/ChatBot.svelte b/js/chatbot/src/static/ChatBot.svelte
index 7a52906f29..6c85d9728f 100644
--- a/js/chatbot/src/static/ChatBot.svelte
+++ b/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 {