diff --git a/.changeset/green-hounds-smoke.md b/.changeset/green-hounds-smoke.md
new file mode 100644
index 0000000000000..4de70e3149983
--- /dev/null
+++ 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
index 299c2838d4cc1..c42bb5370d76f 100644
--- 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);
 	}