scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-25 05:54:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 125

fix(ui): use the configured dark logo in the Connect/Chat navbar

Browse source 
The navbar rendered on /ui/connect and /ui/chat computed both logo
variants from logoUrl alone, so once any custom logo was configured the
dark <img> showed the light logo and UI_LOGO_PATH_DARK /
logo_url_dark never appeared there - only the main dashboard's leftnav
honored it. The dark variant now uses logoUrlDark with the same
precedence the leftnav uses: dark logo, then light logo, then the
server default (?theme=dark).

Fixes #46316
This commit is contained in:
OrangerXu 2026-10-14 07:39:35 +08:00
parent c581c85559
commit 01394cc6af
2 changed files with 43 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
ui/litellm-dashboard/src/components/navbar.test.tsx
View file

@ -261,6 +261,43 @@ describe("Navbar", () => {
mockUseThemeImpl = () => ({ logoUrl: null });
});
it("should use the dark logo for the dark variant when one is configured", () => {
// Regression test for #46316: the Connect/Chat navbar used the light
// logo for both variants, so UI_LOGO_PATH_DARK never showed there.
mockUseThemeImpl = () => ({
logoUrl: "https://example.com/custom-logo.png",
logoUrlDark: "https://example.com/custom-logo-dark.png",
});
renderWithProviders(<Navbar {...defaultProps} />);
const logoImg = screen.getByAltText("LiteLLM Brand");
expect(logoImg).toHaveAttribute("src", "https://example.com/custom-logo.png");
const darkLogoImg = Array.from(document.querySelectorAll("img")).find(
(img) => img.getAttribute("aria-hidden") === "true"
);
expect(darkLogoImg).toBeDefined();
expect(darkLogoImg).toHaveAttribute("src", "https://example.com/custom-logo-dark.png");
// Reset mock
mockUseThemeImpl = () => ({ logoUrl: null });
});
it("should fall back to the light logo for the dark variant when no dark logo is configured", () => {
mockUseThemeImpl = () => ({ logoUrl: "https://example.com/custom-logo.png" });
renderWithProviders(<Navbar {...defaultProps} />);
const darkLogoImg = Array.from(document.querySelectorAll("img")).find(
(img) => img.getAttribute("aria-hidden") === "true"
);
expect(darkLogoImg).toBeDefined();
expect(darkLogoImg).toHaveAttribute("src", "https://example.com/custom-logo.png");
// Reset mock
mockUseThemeImpl = () => ({ logoUrl: null });
});
it("should hide user dropdown and notifications on public pages", () => {
const publicPageProps = { ...defaultProps, isPublicPage: true };
renderWithProviders(<Navbar {...publicPageProps} />);

8
ui/litellm-dashboard/src/components/navbar.tsx
View file

@ -37,7 +37,7 @@ const Navbar: React.FC<NavbarProps> = ({
onToggleSidebar,
}) => {
const baseUrl = getProxyBaseUrl();
const { logoUrl } = useTheme();
const { logoUrl, logoUrlDark } = useTheme();
const { data: healthData } = useHealthReadinessDetails(accessToken);
const version = healthData?.litellm_version;
const disableBouncingIcon = useDisableBouncingIcon();
@ -45,8 +45,12 @@ const Navbar: React.FC<NavbarProps> = ({
const { isControlPlane, selectedWorker } = useWorker();
const showWorkerSwitch = isControlPlane && selectedWorker !== null;
// Same precedence as the leftnav: an explicit dark logo wins, then the
// light logo, then the server default (which honors UI_LOGO_PATH_DARK via
// ?theme=dark). Using logoUrl for the dark variant silently dropped the
// dark logo on the Connect/Chat pages (#46316).
const imageUrl = logoUrl || `${baseUrl}/get_image`;
const darkImageUrl = logoUrl || `${baseUrl}/get_image?theme=dark`;
const darkImageUrl = logoUrlDark || logoUrl || `${baseUrl}/get_image?theme=dark`;
const handleLogout = useLogout(accessToken);