From 1bc5393f00249d70967f59678a3db40f489316cd Mon Sep 17 00:00:00 2001
From: viettranx <viettranx@gmail.com>
Date: Sun, 8 Mar 2026 00:15:20 +0700
Subject: [PATCH] fix(ui): fix code block text color in light mode for markdown
 renderer

Override Tailwind Typography prose defaults that set dark pre background
with hardcoded light text. Use theme-aware CSS variables (--muted, --foreground)
so code blocks are readable in both light and dark modes.
---
 ui/web/src/components/shared/markdown-renderer.tsx | 10 ++++++++--
 ui/web/src/index.css                               | 10 ++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/ui/web/src/components/shared/markdown-renderer.tsx b/ui/web/src/components/shared/markdown-renderer.tsx
index ed9c7f0e..b45d9672 100644
--- a/ui/web/src/components/shared/markdown-renderer.tsx
+++ b/ui/web/src/components/shared/markdown-renderer.tsx
@@ -16,7 +16,7 @@ function CodeBlock({
   const lang = className?.replace("language-", "") ?? "";
 
   return (
-    <div className="group relative">
+    <div className="group relative overflow-hidden rounded-md">
       <div className="flex items-center justify-between rounded-t-md bg-muted px-3 py-1 text-xs text-muted-foreground">
         <span>{lang || "code"}</span>
         <button
@@ -28,7 +28,7 @@ function CodeBlock({
           {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
         </button>
       </div>
-      <pre className="!mt-0 !rounded-t-none">
+      <pre className="!mt-0 !rounded-t-none !bg-muted/50 !text-foreground overflow-x-auto">
         <code className={className}>{children}</code>
       </pre>
     </div>
@@ -94,6 +94,12 @@ export function MarkdownRenderer({ content, className }: MarkdownRendererProps)
           td({ children, ...props }) {
             return <td className="border-t px-3 py-2" {...props}>{children}</td>;
           },
+          input({ type, checked, ...props }) {
+            if (type === "checkbox") {
+              return <input type="checkbox" checked={checked} disabled className="mr-1" {...props} />;
+            }
+            return <input type={type} {...props} />;
+          },
         }}
       >
         {content}
diff --git a/ui/web/src/index.css b/ui/web/src/index.css
index e4afe940..f051fe38 100644
--- a/ui/web/src/index.css
+++ b/ui/web/src/index.css
@@ -135,4 +135,14 @@
     @apply bg-background text-foreground;
     font-family: system-ui, -apple-system, sans-serif;
   }
+
+  /* Override prose's dark pre background with theme-aware colors */
+  .prose pre {
+    background-color: var(--muted);
+    color: var(--foreground);
+  }
+  .prose pre code,
+  .prose pre code.hljs {
+    color: inherit;
+  }
 }