From 5c3fa165c84fb60178739a2017be58b04f2a930e Mon Sep 17 00:00:00 2001
From: yuneng-jiang <yuneng@berri.ai>
Date: Mon, 24 Aug 2026 10:12:16 -0700
Subject: [PATCH] fix(ui): theme the created-key box so it follows dark mode
 (#37985)

The virtual key shown after creating a key sits in a div with a
hardcoded #f8f8f8 inline background, so in dark mode the box keeps
the light background while the key text inherits the light foreground
color, leaving the key nearly unreadable. Swap the inline styles for
the bg-muted and text-foreground tokens, which resolve per theme.

(cherry picked from commit 5f56be3294b753e8418defafe36e99f669263720)
---
 .../src/components/shared/CreatedKeyDisplay.test.tsx  |  9 +++++++++
 .../src/components/shared/CreatedKeyDisplay.tsx       | 11 ++---------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.test.tsx b/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.test.tsx
index 6c8cdae6deb..0e10d32f8d1 100644
--- a/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.test.tsx
+++ b/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.test.tsx
@@ -19,6 +19,15 @@ describe("CreatedKeyDisplay", () => {
     expect(screen.getByText("sk-test-123")).toBeInTheDocument();
   });
 
+  it("should theme the key box with tokens instead of a hardcoded light background", () => {
+    render(<CreatedKeyDisplay apiKey="sk-test-123" />);
+
+    const keyBox = screen.getByText("sk-test-123").parentElement as HTMLElement;
+
+    expect(keyBox).not.toHaveAttribute("style");
+    expect(keyBox).toHaveClass("bg-muted");
+  });
+
   it("should display the security warning", () => {
     render(<CreatedKeyDisplay apiKey="sk-test-123" />);
     expect(screen.getByText(/you will not be able to view it again/i)).toBeInTheDocument();
diff --git a/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.tsx b/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.tsx
index c14379378d3..5dbc17b13bf 100644
--- a/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.tsx
+++ b/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.tsx
@@ -29,15 +29,8 @@ const CreatedKeyDisplay: React.FC<CreatedKeyDisplayProps> = ({ apiKey }) => {
       </p>
 
       <p className="text-sm text-muted-foreground mt-3 mb-1">Virtual Key:</p>
-      <div
-        style={{
-          background: "#f8f8f8",
-          padding: "10px",
-          borderRadius: "5px",
-          marginBottom: "10px",
-        }}
-      >
-        <pre style={{ wordWrap: "break-word", whiteSpace: "normal", margin: 0 }}>{apiKey}</pre>
+      <div className="bg-muted rounded-md p-2.5 mb-2.5">
+        <pre className="m-0 whitespace-normal break-words text-foreground">{apiKey}</pre>
       </div>
 
       <CopyToClipboard text={apiKey} onCopy={handleCopy}>