From 9791293fb04c5832ced328b040a03d9d6f837cb8 Mon Sep 17 00:00:00 2001
From: yuneng-jiang <yuneng.jiang@gmail.com>
Date: Mon, 26 Jan 2026 11:22:14 -0800
Subject: [PATCH] Add light/dark mode slider for dev

---
 AGENTS.md                                     |   8 +-
 .../src/app/(dashboard)/layout.tsx            |   4 +-
 ui/litellm-dashboard/src/app/page.tsx         | 433 +++++++++---------
 .../src/components/navbar.test.tsx            |   9 +
 .../src/components/navbar.tsx                 |  16 +-
 .../src/components/public_model_hub.tsx       |   2 +
 6 files changed, 257 insertions(+), 215 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 61afbd035f..5a48049ef4 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -51,12 +51,14 @@ LiteLLM is a unified interface for 100+ LLMs that:
 
 ### MAKING CODE CHANGES FOR THE UI (IGNORE FOR BACKEND)
 
-1. **Use Common Components as much as possible**:
+1. **Tremor is DEPRECATED, do not use Tremor components in new features/changes**
+   - The only exception is the Tremor Table component and its required Tremor Table sub components.
+
+2. **Use Common Components as much as possible**:
    - These are usually defined in the `common_components` directory
    - Use these components as much as possible and avoid building new components unless needed
-   - Tremor components are deprecated; prefer using Ant Design (AntD) as much as possible
 
-2. **Testing**:
+3. **Testing**:
    - The codebase uses **Vitest** and **React Testing Library**
    - **Query Priority Order**: Use query methods in this order: `getByRole`, `getByLabelText`, `getByPlaceholderText`, `getByText`, `getByTestId`
    - **Always use `screen`** instead of destructuring from `render()` (e.g., use `screen.getByText()` not `getByText`)
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/layout.tsx b/ui/litellm-dashboard/src/app/(dashboard)/layout.tsx
index 97837ff8e0..97e4c799e7 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/layout.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/layout.tsx
@@ -56,8 +56,10 @@ export default function Layout({ children }: { children: React.ReactNode }) {
           userRole={userRole}
           premiumUser={premiumUser}
           proxySettings={undefined}
-          setProxySettings={() => {}}
+          setProxySettings={() => { }}
           accessToken={accessToken}
+          isDarkMode={false}
+          toggleDarkMode={() => { }}
         />
         <div className="flex flex-1 overflow-auto">
           <div className="mt-2">
diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx
index 8ac1f756f9..23c80acf97 100644
--- a/ui/litellm-dashboard/src/app/page.tsx
+++ b/ui/litellm-dashboard/src/app/page.tsx
@@ -45,6 +45,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { jwtDecode } from "jwt-decode";
 import { useSearchParams } from "next/navigation";
 import { Suspense, useEffect, useState } from "react";
+import { ConfigProvider, theme } from "antd";
 
 function getCookie(name: string) {
   // Safer cookie read + decoding; handles '=' inside values
@@ -131,6 +132,12 @@ export default function CreateKeyPage() {
   const [showClaudeCodePrompt, setShowClaudeCodePrompt] = useState(false);
   const [showClaudeCodeModal, setShowClaudeCodeModal] = useState(false);
 
+  // Dark mode state
+  const [isDarkMode, setIsDarkMode] = useState(false);
+  const toggleDarkMode = () => {
+    setIsDarkMode(!isDarkMode);
+  };
+
   const invitation_id = searchParams.get("invitation_id");
 
   // Get page from URL, default to 'api-keys' if not present
@@ -282,7 +289,7 @@ export default function CreateKeyPage() {
           const nudgesConfig = await getInProductNudgesCall(accessToken);
           const isUsingClaudeCode = nudgesConfig?.is_claude_code_enabled || false;
           setIsClaudeCode(isUsingClaudeCode);
-          
+
           // Show Claude Code prompt on login if enabled
           if (isUsingClaudeCode) {
             setShowClaudeCodePrompt(true);
@@ -362,225 +369,231 @@ export default function CreateKeyPage() {
   return (
     <Suspense fallback={<LoadingScreen />}>
       <QueryClientProvider client={queryClient}>
-        <ThemeProvider accessToken={accessToken}>
-          {invitation_id ? (
-            <UserDashboard
-              userID={userID}
-              userRole={userRole}
-              premiumUser={premiumUser}
-              teams={teams}
-              keys={keys}
-              setUserRole={setUserRole}
-              userEmail={userEmail}
-              setUserEmail={setUserEmail}
-              setTeams={setTeams}
-              setKeys={setKeys}
-              organizations={organizations}
-              addKey={addKey}
-              createClicked={createClicked}
-            />
-          ) : (
-            <div className="flex flex-col min-h-screen">
-              <Navbar
+        <ConfigProvider theme={{
+          algorithm: isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
+        }}>
+          <ThemeProvider accessToken={accessToken}>
+            {invitation_id ? (
+              <UserDashboard
                 userID={userID}
                 userRole={userRole}
                 premiumUser={premiumUser}
+                teams={teams}
+                keys={keys}
+                setUserRole={setUserRole}
                 userEmail={userEmail}
-                setProxySettings={setProxySettings}
-                proxySettings={proxySettings}
-                accessToken={accessToken}
-                isPublicPage={false}
-                sidebarCollapsed={sidebarCollapsed}
-                onToggleSidebar={toggleSidebar}
+                setUserEmail={setUserEmail}
+                setTeams={setTeams}
+                setKeys={setKeys}
+                organizations={organizations}
+                addKey={addKey}
+                createClicked={createClicked}
               />
-              <div className="flex flex-1">
-                <div className="mt-2">
-                  <SidebarProvider setPage={updatePage} defaultSelectedKey={page} sidebarCollapsed={sidebarCollapsed} />
-                </div>
+            ) : (
+              <div className="flex flex-col min-h-screen">
+                <Navbar
+                  userID={userID}
+                  userRole={userRole}
+                  premiumUser={premiumUser}
+                  userEmail={userEmail}
+                  setProxySettings={setProxySettings}
+                  proxySettings={proxySettings}
+                  accessToken={accessToken}
+                  isPublicPage={false}
+                  sidebarCollapsed={sidebarCollapsed}
+                  onToggleSidebar={toggleSidebar}
+                  isDarkMode={isDarkMode}
+                  toggleDarkMode={toggleDarkMode}
+                />
+                <div className="flex flex-1">
+                  <div className="mt-2">
+                    <SidebarProvider setPage={updatePage} defaultSelectedKey={page} sidebarCollapsed={sidebarCollapsed} />
+                  </div>
 
-                {page == "api-keys" ? (
-                  <UserDashboard
-                    userID={userID}
-                    userRole={userRole}
-                    premiumUser={premiumUser}
-                    teams={teams}
-                    keys={keys}
-                    setUserRole={setUserRole}
-                    userEmail={userEmail}
-                    setUserEmail={setUserEmail}
-                    setTeams={setTeams}
-                    setKeys={setKeys}
-                    organizations={organizations}
-                    addKey={addKey}
-                    createClicked={createClicked}
-                  />
-                ) : page == "models" ? (
-                  <OldModelDashboard
-                    token={token}
-                    keys={keys}
-                    modelData={modelData}
-                    setModelData={setModelData}
-                    premiumUser={premiumUser}
-                    teams={teams}
-                  />
-                ) : page == "llm-playground" ? (
-                  <PlaygroundPage />
-                ) : page == "users" ? (
-                  <ViewUserDashboard
-                    userID={userID}
-                    userRole={userRole}
-                    token={token}
-                    keys={keys}
-                    teams={teams}
-                    accessToken={accessToken}
-                    setKeys={setKeys}
-                  />
-                ) : page == "teams" ? (
-                  <OldTeams
-                    teams={teams}
-                    setTeams={setTeams}
-                    accessToken={accessToken}
-                    userID={userID}
-                    userRole={userRole}
-                    organizations={organizations}
-                    premiumUser={premiumUser}
-                    searchParams={searchParams}
-                  />
-                ) : page == "organizations" ? (
-                  <Organizations
-                    organizations={organizations}
-                    setOrganizations={setOrganizations}
-                    userModels={userModels}
-                    accessToken={accessToken}
-                    userRole={userRole}
-                    premiumUser={premiumUser}
-                  />
-                ) : page == "admin-panel" ? (
-                  <AdminPanel
-                    setTeams={setTeams}
-                    searchParams={searchParams}
-                    accessToken={accessToken}
-                    userID={userID}
-                    showSSOBanner={showSSOBanner}
-                    premiumUser={premiumUser}
-                    proxySettings={proxySettings}
-                  />
-                ) : page == "api_ref" ? (
-                  <APIReferenceView proxySettings={proxySettings} />
-                ) : page == "logging-and-alerts" ? (
-                  <Settings userID={userID} userRole={userRole} accessToken={accessToken} premiumUser={premiumUser} />
-                ) : page == "budgets" ? (
-                  <BudgetPanel accessToken={accessToken} />
-                ) : page == "guardrails" ? (
-                  <GuardrailsPanel accessToken={accessToken} userRole={userRole} />
-                ) : page == "policies" ? (
-                  <PoliciesPanel accessToken={accessToken} userRole={userRole} />
-                ) : page == "agents" ? (
-                  <AgentsPanel accessToken={accessToken} userRole={userRole} />
-                ) : page == "prompts" ? (
-                  <PromptsPanel accessToken={accessToken} userRole={userRole} />
-                ) : page == "transform-request" ? (
-                  <TransformRequestPanel accessToken={accessToken} />
-                ) : page == "router-settings" ? (
-                  <GeneralSettings
-                    userID={userID}
-                    userRole={userRole}
-                    accessToken={accessToken}
-                    modelData={modelData}
-                  />
-                ) : page == "ui-theme" ? (
-                  <UIThemeSettings userID={userID} userRole={userRole} accessToken={accessToken} />
-                ) : page == "cost-tracking" ? (
-                  <CostTrackingSettings userID={userID} userRole={userRole} accessToken={accessToken} />
-                ) : page == "model-hub-table" ? (
-                  isAdminRole(userRole) ? (
-                    <ModelHubTable
-                      accessToken={accessToken}
-                      publicPage={false}
-                      premiumUser={premiumUser}
+                  {page == "api-keys" ? (
+                    <UserDashboard
+                      userID={userID}
                       userRole={userRole}
+                      premiumUser={premiumUser}
+                      teams={teams}
+                      keys={keys}
+                      setUserRole={setUserRole}
+                      userEmail={userEmail}
+                      setUserEmail={setUserEmail}
+                      setTeams={setTeams}
+                      setKeys={setKeys}
+                      organizations={organizations}
+                      addKey={addKey}
+                      createClicked={createClicked}
+                    />
+                  ) : page == "models" ? (
+                    <OldModelDashboard
+                      token={token}
+                      keys={keys}
+                      modelData={modelData}
+                      setModelData={setModelData}
+                      premiumUser={premiumUser}
+                      teams={teams}
+                    />
+                  ) : page == "llm-playground" ? (
+                    <PlaygroundPage />
+                  ) : page == "users" ? (
+                    <ViewUserDashboard
+                      userID={userID}
+                      userRole={userRole}
+                      token={token}
+                      keys={keys}
+                      teams={teams}
+                      accessToken={accessToken}
+                      setKeys={setKeys}
+                    />
+                  ) : page == "teams" ? (
+                    <OldTeams
+                      teams={teams}
+                      setTeams={setTeams}
+                      accessToken={accessToken}
+                      userID={userID}
+                      userRole={userRole}
+                      organizations={organizations}
+                      premiumUser={premiumUser}
+                      searchParams={searchParams}
+                    />
+                  ) : page == "organizations" ? (
+                    <Organizations
+                      organizations={organizations}
+                      setOrganizations={setOrganizations}
+                      userModels={userModels}
+                      accessToken={accessToken}
+                      userRole={userRole}
+                      premiumUser={premiumUser}
+                    />
+                  ) : page == "admin-panel" ? (
+                    <AdminPanel
+                      setTeams={setTeams}
+                      searchParams={searchParams}
+                      accessToken={accessToken}
+                      userID={userID}
+                      showSSOBanner={showSSOBanner}
+                      premiumUser={premiumUser}
+                      proxySettings={proxySettings}
+                    />
+                  ) : page == "api_ref" ? (
+                    <APIReferenceView proxySettings={proxySettings} />
+                  ) : page == "logging-and-alerts" ? (
+                    <Settings userID={userID} userRole={userRole} accessToken={accessToken} premiumUser={premiumUser} />
+                  ) : page == "budgets" ? (
+                    <BudgetPanel accessToken={accessToken} />
+                  ) : page == "guardrails" ? (
+                    <GuardrailsPanel accessToken={accessToken} userRole={userRole} />
+                  ) : page == "policies" ? (
+                    <PoliciesPanel accessToken={accessToken} userRole={userRole} />
+                  ) : page == "agents" ? (
+                    <AgentsPanel accessToken={accessToken} userRole={userRole} />
+                  ) : page == "prompts" ? (
+                    <PromptsPanel accessToken={accessToken} userRole={userRole} />
+                  ) : page == "transform-request" ? (
+                    <TransformRequestPanel accessToken={accessToken} />
+                  ) : page == "router-settings" ? (
+                    <GeneralSettings
+                      userID={userID}
+                      userRole={userRole}
+                      accessToken={accessToken}
+                      modelData={modelData}
+                    />
+                  ) : page == "ui-theme" ? (
+                    <UIThemeSettings userID={userID} userRole={userRole} accessToken={accessToken} />
+                  ) : page == "cost-tracking" ? (
+                    <CostTrackingSettings userID={userID} userRole={userRole} accessToken={accessToken} />
+                  ) : page == "model-hub-table" ? (
+                    isAdminRole(userRole) ? (
+                      <ModelHubTable
+                        accessToken={accessToken}
+                        publicPage={false}
+                        premiumUser={premiumUser}
+                        userRole={userRole}
+                      />
+                    ) : (
+                      <PublicModelHub accessToken={accessToken} isEmbedded={true} />
+                    )
+                  ) : page == "caching" ? (
+                    <CacheDashboard
+                      userID={userID}
+                      userRole={userRole}
+                      token={token}
+                      accessToken={accessToken}
+                      premiumUser={premiumUser}
+                    />
+                  ) : page == "pass-through-settings" ? (
+                    <PassThroughSettings
+                      userID={userID}
+                      userRole={userRole}
+                      accessToken={accessToken}
+                      modelData={modelData}
+                      premiumUser={premiumUser}
+                    />
+                  ) : page == "logs" ? (
+                    <SpendLogsTable
+                      userID={userID}
+                      userRole={userRole}
+                      token={token}
+                      accessToken={accessToken}
+                      allTeams={(teams as Team[]) ?? []}
+                      premiumUser={premiumUser}
+                    />
+                  ) : page == "mcp-servers" ? (
+                    <MCPServers accessToken={accessToken} userRole={userRole} userID={userID} />
+                  ) : page == "search-tools" ? (
+                    <SearchTools accessToken={accessToken} userRole={userRole} userID={userID} />
+                  ) : page == "tag-management" ? (
+                    <TagManagement accessToken={accessToken} userRole={userRole} userID={userID} />
+                  ) : page == "claude-code-plugins" ? (
+                    <ClaudeCodePluginsPanel accessToken={accessToken} userRole={userRole} />
+                  ) : page == "vector-stores" ? (
+                    <VectorStoreManagement accessToken={accessToken} userRole={userRole} userID={userID} />
+                  ) : page == "new_usage" ? (
+                    <NewUsagePage
+                      teams={(teams as Team[]) ?? []}
+                      organizations={(organizations as Organization[]) ?? []}
                     />
                   ) : (
-                    <PublicModelHub accessToken={accessToken} isEmbedded={true} />
-                  )
-                ) : page == "caching" ? (
-                  <CacheDashboard
-                    userID={userID}
-                    userRole={userRole}
-                    token={token}
-                    accessToken={accessToken}
-                    premiumUser={premiumUser}
-                  />
-                ) : page == "pass-through-settings" ? (
-                  <PassThroughSettings
-                    userID={userID}
-                    userRole={userRole}
-                    accessToken={accessToken}
-                    modelData={modelData}
-                    premiumUser={premiumUser}
-                  />
-                ) : page == "logs" ? (
-                  <SpendLogsTable
-                    userID={userID}
-                    userRole={userRole}
-                    token={token}
-                    accessToken={accessToken}
-                    allTeams={(teams as Team[]) ?? []}
-                    premiumUser={premiumUser}
-                  />
-                ) : page == "mcp-servers" ? (
-                  <MCPServers accessToken={accessToken} userRole={userRole} userID={userID} />
-                ) : page == "search-tools" ? (
-                  <SearchTools accessToken={accessToken} userRole={userRole} userID={userID} />
-                ) : page == "tag-management" ? (
-                  <TagManagement accessToken={accessToken} userRole={userRole} userID={userID} />
-                ) : page == "claude-code-plugins" ? (
-                  <ClaudeCodePluginsPanel accessToken={accessToken} userRole={userRole} />
-                ) : page == "vector-stores" ? (
-                  <VectorStoreManagement accessToken={accessToken} userRole={userRole} userID={userID} />
-                ) : page == "new_usage" ? (
-                  <NewUsagePage
-                    teams={(teams as Team[]) ?? []}
-                    organizations={(organizations as Organization[]) ?? []}
-                  />
-                ) : (
-                  <Usage
-                    userID={userID}
-                    userRole={userRole}
-                    token={token}
-                    accessToken={accessToken}
-                    keys={keys}
-                    premiumUser={premiumUser}
-                  />
-                )}
+                    <Usage
+                      userID={userID}
+                      userRole={userRole}
+                      token={token}
+                      accessToken={accessToken}
+                      keys={keys}
+                      premiumUser={premiumUser}
+                    />
+                  )}
+                </div>
+
+                {/* Survey Components */}
+                <SurveyPrompt
+                  isVisible={showSurveyPrompt}
+                  onOpen={handleOpenSurvey}
+                  onDismiss={handleDismissSurveyPrompt}
+                />
+                <SurveyModal
+                  isOpen={showSurveyModal}
+                  onClose={handleSurveyModalClose}
+                  onComplete={handleSurveyComplete}
+                />
+
+                {/* Claude Code Components */}
+                <ClaudeCodePrompt
+                  isVisible={showClaudeCodePrompt}
+                  onOpen={handleOpenClaudeCode}
+                  onDismiss={handleDismissClaudeCodePrompt}
+                />
+                <ClaudeCodeModal
+                  isOpen={showClaudeCodeModal}
+                  onClose={handleClaudeCodeModalClose}
+                  onComplete={handleClaudeCodeComplete}
+                />
               </div>
-
-              {/* Survey Components */}
-              <SurveyPrompt
-                isVisible={showSurveyPrompt}
-                onOpen={handleOpenSurvey}
-                onDismiss={handleDismissSurveyPrompt}
-              />
-              <SurveyModal
-                isOpen={showSurveyModal}
-                onClose={handleSurveyModalClose}
-                onComplete={handleSurveyComplete}
-              />
-
-              {/* Claude Code Components */}
-              <ClaudeCodePrompt
-                isVisible={showClaudeCodePrompt}
-                onOpen={handleOpenClaudeCode}
-                onDismiss={handleDismissClaudeCodePrompt}
-              />
-              <ClaudeCodeModal
-                isOpen={showClaudeCodeModal}
-                onClose={handleClaudeCodeModalClose}
-                onComplete={handleClaudeCodeComplete}
-              />
-            </div>
-          )}
-        </ThemeProvider>
+            )}
+          </ThemeProvider>
+        </ConfigProvider>
       </QueryClientProvider>
     </Suspense>
   );
diff --git a/ui/litellm-dashboard/src/components/navbar.test.tsx b/ui/litellm-dashboard/src/components/navbar.test.tsx
index 5d3c7254ff..5de5127c70 100644
--- a/ui/litellm-dashboard/src/components/navbar.test.tsx
+++ b/ui/litellm-dashboard/src/components/navbar.test.tsx
@@ -52,6 +52,8 @@ describe("Navbar", () => {
     setProxySettings: vi.fn(),
     accessToken: "test-token",
     isPublicPage: false,
+    isDarkMode: false,
+    toggleDarkMode: vi.fn(),
   };
 
   it("should render without crashing", () => {
@@ -198,4 +200,11 @@ describe("Navbar", () => {
     expect(cookieUtils.clearTokenCookies).toHaveBeenCalled();
     expect(window.location.href).toBe("");
   });
+
+  it("should not render dark mode toggle slider", () => {
+    renderWithProviders(<Navbar {...defaultProps} />);
+
+    // DO NOT RENDER THIS UNTIL ALL COMPONENTS ARE CONFIRMED TO SUPPORT DARK MODE STYLES. IT IS AN ISSUE IF THIS TEST FAILS.
+    expect(screen.queryByTestId("dark-mode-toggle")).not.toBeInTheDocument();
+  });
 });
diff --git a/ui/litellm-dashboard/src/components/navbar.tsx b/ui/litellm-dashboard/src/components/navbar.tsx
index 6dac073b3a..846f0d82cc 100644
--- a/ui/litellm-dashboard/src/components/navbar.tsx
+++ b/ui/litellm-dashboard/src/components/navbar.tsx
@@ -16,8 +16,10 @@ import {
   MailOutlined,
   MenuFoldOutlined,
   MenuUnfoldOutlined,
+  MoonOutlined,
   SafetyOutlined,
   SlackOutlined,
+  SunOutlined,
   UserOutlined,
 } from "@ant-design/icons";
 import type { MenuProps } from "antd";
@@ -36,6 +38,8 @@ interface NavbarProps {
   isPublicPage: boolean;
   sidebarCollapsed?: boolean;
   onToggleSidebar?: () => void;
+  isDarkMode: boolean;
+  toggleDarkMode: () => void;
 }
 
 const Navbar: React.FC<NavbarProps> = ({
@@ -49,9 +53,10 @@ const Navbar: React.FC<NavbarProps> = ({
   isPublicPage = false,
   sidebarCollapsed = false,
   onToggleSidebar,
+  isDarkMode,
+  toggleDarkMode
 }) => {
   const baseUrl = getProxyBaseUrl();
-  console.log("baseUrl", baseUrl);
   const [logoutUrl, setLogoutUrl] = useState("");
   const [disableShowNewBadge, setDisableShowNewBadge] = useState(false);
   const { logoUrl } = useTheme();
@@ -227,6 +232,15 @@ const Navbar: React.FC<NavbarProps> = ({
             >
               Star us on GitHub
             </Button>
+            {/* Dark mode is currently a work in progress. To test, you can change 'false' to 'true' below.
+            Do not set this to true by default until all components are confirmed to support dark mode styles. */}
+            {false && <Switch
+              data-testid="dark-mode-toggle"
+              checked={isDarkMode}
+              onChange={toggleDarkMode}
+              checkedChildren={<MoonOutlined />}
+              unCheckedChildren={<SunOutlined />}
+            />}
             <a
               href="https://docs.litellm.ai/docs/"
               target="_blank"
diff --git a/ui/litellm-dashboard/src/components/public_model_hub.tsx b/ui/litellm-dashboard/src/components/public_model_hub.tsx
index e751f4d65b..db316d4410 100644
--- a/ui/litellm-dashboard/src/components/public_model_hub.tsx
+++ b/ui/litellm-dashboard/src/components/public_model_hub.tsx
@@ -962,6 +962,8 @@ const PublicModelHub: React.FC<PublicModelHubProps> = ({ accessToken, isEmbedded
             proxySettings={proxySettings}
             accessToken={accessToken || null}
             isPublicPage={true}
+            isDarkMode={false}
+            toggleDarkMode={() => { }}
           />
         )}