From 0ff8e0eecd2372475d134ee528048bc0beacefc2 Mon Sep 17 00:00:00 2001
From: scotttong <scott.tong@gmail.com>
Date: Mon, 17 Aug 2026 21:04:58 -0700
Subject: [PATCH] fix(markdown): make rendered code blocks follow the active
 theme

Rendered markdown code blocks were pinned to the Catppuccin literals
#1e1e2e and #cdd6f4. Both the normal and the `prose-invert` variables
used the same two values. A code block therefore stayed dark in light
mode. It was the only dark surface on a light page.

Bind the block to existing theme tokens instead:

- surface  --muted       (the value --code-bg-resolved already falls back to)
- text     --foreground
- border   --border
- radius   --radius-lg

These tokens already carry a `.dark` override, so one rule now covers
both modes. No new token is introduced.

Also move the copy and wrap buttons to --background. Their old fill was
`color-mix(--muted 92%, --background 8%)`. That value is almost equal to
the block's new --muted surface, so the buttons would nearly disappear.

The CodeMirror theme inside the MDXEditor keeps the Catppuccin literals.
That surface is an editor, not a rendered snippet. Changing it needs a
full light CodeMirror theme.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 ui/src/components/MarkdownBody.tsx |  2 +-
 ui/src/index.css                   | 30 ++++++++++++++++--------------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/ui/src/components/MarkdownBody.tsx b/ui/src/components/MarkdownBody.tsx
index b1f22126851..81405c4b61f 100644
--- a/ui/src/components/MarkdownBody.tsx
+++ b/ui/src/components/MarkdownBody.tsx
@@ -242,7 +242,7 @@ const codeBlockActionStyle: React.CSSProperties = {
   padding: "0.2rem 0.4rem",
   borderRadius: "calc(var(--radius) - 4px)",
   border: "1px solid color-mix(in oklab, var(--foreground) 14%, transparent)",
-  backgroundColor: "color-mix(in oklab, var(--muted) 92%, var(--background) 8%)",
+  backgroundColor: "var(--background)",
   color: "var(--muted-foreground)",
   fontSize: "var(--text-micro)",
   lineHeight: 1,
diff --git a/ui/src/index.css b/ui/src/index.css
index f8792195e3c..2bc7bc81de0 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -1406,10 +1406,10 @@ a.paperclip-mention-chip[data-mention-kind="agent"]::before {
 .paperclip-mdxeditor-content pre {
   margin: 0.4rem 0;
   padding: 0;
-  border: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent);
-  border-radius: calc(var(--radius) - 3px);
-  background: #1e1e2e;
-  color: #cdd6f4;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--muted);
+  color: var(--foreground);
   overflow-x: auto;
 }
 
@@ -1482,20 +1482,22 @@ a.paperclip-mention-chip[data-mention-kind="agent"]::before {
 }
 
 /* Rendered markdown code blocks & inline code (prose/MarkdownBody context).
-   Dark theme code blocks with compact sizing.
-   Override prose CSS variables so prose-invert can't revert to defaults. */
+   Theme-aware: the block rides --muted/--foreground/--border so it follows
+   light and dark instead of pinning the old Catppuccin #1e1e2e/#cdd6f4 in
+   both modes. Override prose CSS variables so prose-invert can't revert to
+   defaults. */
 .paperclip-markdown {
-  --tw-prose-pre-bg: #1e1e2e;
-  --tw-prose-pre-code: #cdd6f4;
-  --tw-prose-invert-pre-bg: #1e1e2e;
-  --tw-prose-invert-pre-code: #cdd6f4;
+  --tw-prose-pre-bg: var(--muted);
+  --tw-prose-pre-code: var(--foreground);
+  --tw-prose-invert-pre-bg: var(--muted);
+  --tw-prose-invert-pre-code: var(--foreground);
 }
 
 .paperclip-markdown pre {
-  border: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent) !important;
-  border-radius: calc(var(--radius) - 3px) !important;
-  background-color: #1e1e2e !important;
-  color: #cdd6f4 !important;
+  border: 1px solid var(--border) !important;
+  border-radius: var(--radius-lg) !important;
+  background-color: var(--muted) !important;
+  color: var(--foreground) !important;
   padding: 0.5rem 0.65rem !important;
   margin: 0.4rem 0 !important;
   font-size: 1em !important;