From f3703f6212ed06ca626b746dbea2bb2431e9f5ef Mon Sep 17 00:00:00 2001
From: axelray-dev <110029405+axelray-dev@users.noreply.github.com>
Date: Tue, 14 Jul 2026 15:50:44 +0800
Subject: [PATCH] fix(copilot): respect widget theme for logo URL

Fixes #2976

Co-Authored-By: Codex <codex@openai.com>
---
 frontend/src/components/Logo.tsx       |  8 ++++--
 frontend/tests/Logo.spec.tsx           | 34 ++++++++++++++++++++++++++
 libs/copilot/src/components/Header.tsx |  8 +++++-
 3 files changed, 47 insertions(+), 3 deletions(-)
 create mode 100644 frontend/tests/Logo.spec.tsx

diff --git a/frontend/src/components/Logo.tsx b/frontend/src/components/Logo.tsx
index 833e51a8dd..875144cb40 100644
--- a/frontend/src/components/Logo.tsx
+++ b/frontend/src/components/Logo.tsx
@@ -7,16 +7,20 @@ import { useTheme } from './ThemeProvider';
 
 interface Props {
   className?: string;
+  themeVariant?: 'light' | 'dark';
 }
 
-export const Logo = ({ className }: Props) => {
+export const Logo = ({ className, themeVariant }: Props) => {
   const { variant } = useTheme();
   const { config } = useConfig();
   const apiClient = useContext(ChainlitContext);
 
   return (
     <img
-      src={apiClient.getLogoEndpoint(variant, config?.ui?.logo_file_url)}
+      src={apiClient.getLogoEndpoint(
+        themeVariant ?? variant,
+        config?.ui?.logo_file_url
+      )}
       alt="logo"
       className={cn('logo', className)}
     />
diff --git a/frontend/tests/Logo.spec.tsx b/frontend/tests/Logo.spec.tsx
new file mode 100644
index 0000000000..ff142a91a9
--- /dev/null
+++ b/frontend/tests/Logo.spec.tsx
@@ -0,0 +1,34 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { ChainlitAPI, ChainlitContext } from '@chainlit/react-client';
+
+import { Logo } from '@/components/Logo';
+
+vi.mock('@/components/ThemeProvider', () => ({
+  useTheme: () => ({ variant: 'dark' })
+}));
+
+vi.mock('@chainlit/react-client', async () => {
+  const actual = await vi.importActual('@chainlit/react-client');
+
+  return {
+    ...actual,
+    useConfig: () => ({ config: undefined })
+  };
+});
+
+describe('Logo', () => {
+  it('prefers a provided theme variant over the app theme', () => {
+    const apiClient = new ChainlitAPI('http://localhost:8000', 'copilot');
+    const getLogoEndpoint = vi.spyOn(apiClient, 'getLogoEndpoint');
+
+    render(
+      <ChainlitContext.Provider value={apiClient}>
+        <Logo themeVariant="light" />
+      </ChainlitContext.Provider>
+    );
+
+    expect(getLogoEndpoint).toHaveBeenCalledWith('light', undefined);
+  });
+});
diff --git a/libs/copilot/src/components/Header.tsx b/libs/copilot/src/components/Header.tsx
index 81b65c6b37..80a28a5f51 100644
--- a/libs/copilot/src/components/Header.tsx
+++ b/libs/copilot/src/components/Header.tsx
@@ -14,6 +14,7 @@ import {
 } from '@chainlit/app/src/components/ui/dropdown-menu';
 import { IChainlitConfig, useAudio } from '@chainlit/react-client';
 
+import { useTheme } from '../ThemeProvider';
 import { useCopilotInteract } from '../hooks';
 import { DisplayMode } from '../types';
 
@@ -44,13 +45,18 @@ const Header = ({
   const { config } = projectConfig;
   const { audioConnection } = useAudio();
   const { startNewChat } = useCopilotInteract();
+  const { variant } = useTheme();
 
   const hasChatProfiles = !!config?.chatProfiles.length;
 
   return (
     <div className="flex align-center justify-between p-4 pb-0">
       <div className="flex items-center gap-1">
-        {hasChatProfiles ? <ChatProfiles /> : <Logo className="w-[100px]" />}
+        {hasChatProfiles ? (
+          <ChatProfiles />
+        ) : (
+          <Logo className="w-[100px]" themeVariant={variant} />
+        )}
       </div>
       <div className="flex items-center">
         {audioConnection === 'on' ? (