From 2db0e31fe77c7f626293f44a19d9f6c18db36ac5 Mon Sep 17 00:00:00 2001
From: kursad-k <67970138+kursad-k@users.noreply.github.com>
Date: Mon, 3 Aug 2026 11:26:57 -0500
Subject: [PATCH] style: add dark mode inline code styling for message bubbles
 (#10861)

Co-authored-by: kursad <kursadk@neoplecxus.com>
---
 ui/desktop/src/components/MarkdownContent.tsx |  1 +
 ui/desktop/src/styles/main.css                | 17 +++++++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/ui/desktop/src/components/MarkdownContent.tsx b/ui/desktop/src/components/MarkdownContent.tsx
index 76a031a43..30163c49c 100644
--- a/ui/desktop/src/components/MarkdownContent.tsx
+++ b/ui/desktop/src/components/MarkdownContent.tsx
@@ -127,6 +127,7 @@ const CodeBlock = memo(function CodeBlock({
         language={language}
         PreTag="div"
         customStyle={{
+          background: 'var(--code-block-background, #282c34)',
           margin: 0,
           width: '100%',
           maxWidth: '100%',
diff --git a/ui/desktop/src/styles/main.css b/ui/desktop/src/styles/main.css
index 280048b8b..b1406695b 100644
--- a/ui/desktop/src/styles/main.css
+++ b/ui/desktop/src/styles/main.css
@@ -586,10 +586,15 @@ pre:has(> code.bg-inline-code) {
 }
 
 .dark .user-message-bubble {
+  --code-block-background: #0f1628;
   background-color: #171d30;
   color: #d2dae6;
 }
 
+.dark .user-message pre {
+  background-color: var(--code-block-background);
+}
+
 .dark .user-message :is(h1, h2, h3, h4, h5, h6, strong) {
   color: #e7ebf2 !important;
 }
@@ -616,6 +621,18 @@ pre:has(> code.bg-inline-code) {
   padding: 0.625rem 1rem;
 }
 
+.dark :is(.agent-message-bubble, .user-message-bubble) :not(pre) > code.bg-inline-code {
+  background-color: transparent;
+  color: #8cd3d6;
+  padding: 0;
+}
+
+.dark :is(.agent-message-bubble, .user-message-bubble) pre > code.bg-inline-code {
+  background-color: transparent;
+  color: #b8c4d1;
+  padding: 0;
+}
+
 .scrollbar-thin {
   scrollbar-width: thin;
 }