From 756e03c903cda1ca23b63f2ff9b109c79a2051aa Mon Sep 17 00:00:00 2001
From: ryan-crabbe-berri <ryan@berri.ai>
Date: Sat, 29 Aug 2026 10:39:25 -0700
Subject: [PATCH] Merge pull request #38771 from
 BerriAI/litellm_/api-reference-dark-mode-4ec67f

fix(ui): make code blocks follow the theme in dark mode

(cherry picked from commit e585aab3ea76b8672397713159427935978bd779)
---
 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 2e5dd96eef7..8a73ce463e0 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-10"
+        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-10"
         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}