From 03f64200c2fc5e0d87ae10882bff37baf8759425 Mon Sep 17 00:00:00 2001
From: Yuneng Jiang <yuneng@berri.ai>
Date: Sat, 29 Aug 2026 10:15:05 -0700
Subject: [PATCH] fix(ui): stop CodeBlock painting a hardcoded light background
 in dark mode

The customStyle background only reaches the <pre>, so the prism theme's own
background stayed on the inner <code>. In dark mode that left a white card
with a dark box hugging every line. Let the block inherit the themed surface
from its wrapper instead.
---
 ui/litellm-dashboard/src/components/CodeBlock.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/CodeBlock.tsx b/ui/litellm-dashboard/src/components/CodeBlock.tsx
index 88ef9acf08e..a39d7417302 100644
--- a/ui/litellm-dashboard/src/components/CodeBlock.tsx
+++ b/ui/litellm-dashboard/src/components/CodeBlock.tsx
@@ -20,10 +20,10 @@ const CodeBlock = ({ code, language }: CodeBlockProps) => {
   };
 
   return (
-    <div className="relative rounded-lg border border-border overflow-hidden">
+    <div className="relative rounded-lg border border-border bg-muted overflow-hidden">
       <button
         onClick={copyToClipboard}
-        className="absolute top-3 right-3 p-2 rounded-md bg-muted hover:bg-accent text-muted-foreground z-raised"
+        className="absolute top-3 right-3 p-2 rounded-md border border-border bg-background text-muted-foreground hover:bg-accent hover:text-foreground z-raised"
         aria-label="Copy code"
       >
         {copied ? <CheckIcon size={16} /> : <ClipboardIcon size={16} />}
@@ -36,8 +36,9 @@ const CodeBlock = ({ code, language }: CodeBlockProps) => {
           padding: "1.5rem",
           borderRadius: "0.5rem",
           fontSize: "0.9rem",
-          backgroundColor: "#fafafa",
+          background: "transparent",
         }}
+        codeTagProps={{ style: { background: "transparent" } }}
         showLineNumbers
       >
         {code}