This commit is contained in:
OrangerXu 2026-10-21 05:01:49 +00:00 • committed by GitHub
commit ff1d78cdea
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 43 additions and 2 deletions

View file

@ -262,6 +262,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} />);

View file

@ -39,7 +39,7 @@ const Navbar: React.FC<NavbarProps> = ({
deploymentHealth,
}) => {
const baseUrl = getProxyBaseUrl();
const { logoUrl } = useTheme();
const { logoUrl, logoUrlDark } = useTheme();
const { data: healthData } = useHealthReadinessDetails(accessToken);
const version = healthData?.litellm_version;
const disableBouncingIcon = useDisableBouncingIcon();
@ -47,8 +47,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);