Ensure chatbot background is consistent with other components (#8607)

gradio-app · Jun 25, 2024 · c7cd0a0 · c7cd0a0
1 parent fe83e64
commit c7cd0a0
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/.changeset/green-hounds-smoke.md b/.changeset/green-hounds-smoke.md
@@ -0,0 +1,6 @@
+---
+"@gradio/chatbot": minor
+"gradio": minor
+---
+
+feat:Ensure chatbot background is consistent with other components
diff --git a/js/chatbot/shared/ChatBot.svelte b/js/chatbot/shared/ChatBot.svelte
@@ -391,11 +391,15 @@
 	.bubble-wrap {
 		width: 100%;
 		overflow-y: auto;
-		background: var(--background-fill-secondary);
+
 		height: 100%;
 		padding-top: var(--spacing-xxl);
 	}
 
+	:global(.dark) .bubble-wrap {
+		background: var(--background-fill-secondary);
+	}
+
 	.message-wrap {
 		display: flex;
 		flex-direction: column;
@@ -469,7 +473,6 @@
 	/* Colors */
 	.bubble .bot {
 		border-color: var(--border-color-primary);
-		background: var(--background-fill-secondary);
 	}
 
 	.bubble .user {
@@ -522,7 +525,6 @@
 
 	.message-row.bubble.bot-row {
 		align-self: flex-start;
-		background: var(--background-fill-secondary);
 		width: calc(100% - var(--spacing-xl) * 6);
 	}