From b94a1b890c434106b740133b620c5ff99839cb03 Mon Sep 17 00:00:00 2001
From: Yuneng Jiang <yuneng@berri.ai>
Date: Sat, 22 Aug 2026 17:02:47 -0700
Subject: [PATCH] fix(ui): theme the created-key box so it follows dark mode

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.
---
 .../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 6c8cdae6debb..0e10d32f8d1e 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 c14379378d32..5dbc17b13bfb 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}>