From 54488b0169775caedb3c7f71c9b1bdafb4b92c6e Mon Sep 17 00:00:00 2001
From: kursad-k <67970138+kursad-k@users.noreply.github.com>
Date: Mon, 27 Jul 2026 14:00:25 -0500
Subject: [PATCH] fix(ui): Refine dark theme message surfaces for consistent,
 compliant dark mode UX. (#10693)

Co-authored-by: kursad <kursadk@neoplecxus.com>
---
 ui/desktop/src/components/GooseMessage.tsx |  2 +-
 ui/desktop/src/components/UserMessage.tsx  |  2 +-
 ui/desktop/src/styles/main.css             | 31 ++++++++++++++++++++++
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/ui/desktop/src/components/GooseMessage.tsx b/ui/desktop/src/components/GooseMessage.tsx
index e2a679ad1..dbad9f23f 100644
--- a/ui/desktop/src/components/GooseMessage.tsx
+++ b/ui/desktop/src/components/GooseMessage.tsx
@@ -137,7 +137,7 @@ export default function GooseMessage({
         {(displayText.trim() || imagePaths.length > 0) && (
           <div className="flex flex-col group">
             {displayText.trim() && (
-              <div ref={contentRef} className="w-full">
+              <div ref={contentRef} className="agent-message-bubble w-full">
                 <MarkdownContent content={displayText} />
               </div>
             )}
diff --git a/ui/desktop/src/components/UserMessage.tsx b/ui/desktop/src/components/UserMessage.tsx
index eafefb438..697fedcfd 100644
--- a/ui/desktop/src/components/UserMessage.tsx
+++ b/ui/desktop/src/components/UserMessage.tsx
@@ -260,7 +260,7 @@ export default function UserMessage({ message, onMessageUpdate }: UserMessagePro
             <div className="flex-col max-w-[85%] w-fit">
               <div className="flex flex-col group">
                 {textContent.trim() && (
-                  <div className="flex bg-text-primary text-background-primary rounded-xl py-2.5 px-4">
+                  <div className="user-message-bubble flex bg-text-primary text-background-primary rounded-xl py-2.5 px-4">
                     <div ref={contentRef}>
                       <MarkdownContent
                         content={textContent}
diff --git a/ui/desktop/src/styles/main.css b/ui/desktop/src/styles/main.css
index 65761549b..280048b8b 100644
--- a/ui/desktop/src/styles/main.css
+++ b/ui/desktop/src/styles/main.css
@@ -585,6 +585,37 @@ pre:has(> code.bg-inline-code) {
   margin-bottom: 0 !important;
 }
 
+.dark .user-message-bubble {
+  background-color: #171d30;
+  color: #d2dae6;
+}
+
+.dark .user-message :is(h1, h2, h3, h4, h5, h6, strong) {
+  color: #e7ebf2 !important;
+}
+
+.dark .user-message li {
+  color: #c4cfde !important;
+}
+
+.dark .user-message li::marker {
+  color: #8798b0;
+}
+
+.dark .user-message a {
+  color: #aecfe3 !important;
+}
+
+.dark .user-message em {
+  color: #c6d9df !important;
+}
+
+.dark .agent-message-bubble {
+  background-color: #1f2126;
+  border-radius: 0.75rem;
+  padding: 0.625rem 1rem;
+}
+
 .scrollbar-thin {
   scrollbar-width: thin;
 }