Skip to content

fix: make logos visible in dark mode #1197

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Wendong-Fan merged 4 commits into from
Feb 10, 2026
+50 −9
Merged

fix: make logos visible in dark mode #1197

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
23b0d42
fix: make logos visible in dark mode
eureka928 Feb 9, 2026
2f393bf
Update src/pages/Setting/Models.tsx
eureka928 Feb 9, 2026
4d1b31a
fix: normalize Z.ai provider ID to lowercase and add openai-compatibl…
eureka928 Feb 9, 2026
22b6411
Merge branch 'main' into fix/dark-mode-logos
Wendong-Fan Feb 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions src/pages/Setting.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@

import logoBlack from '@/assets/logo/logo_black.png';
import logoWhite from '@/assets/logo/logo_white.png';
import versionLogo from '@/assets/version-logo.png';
import VerticalNavigation, {
type VerticalNavItem,
} from '@/components/Navigation';
Expand All @@ -34,7 +33,7 @@ export default function Setting() {
const version = useAppVersion();
const { appearance } = useAuthStore();
const { t } = useTranslation();
const _logoSrc = appearance === 'dark' ? logoWhite : logoBlack;
const logoSrc = appearance === 'dark' ? logoWhite : logoBlack;
// Setting menu configuration
const settingMenus = [
{
Expand Down Expand Up @@ -122,7 +121,7 @@ export default function Setting() {
}
className="flex cursor-pointer items-center bg-transparent transition-opacity duration-200 hover:opacity-60"
>
<img src={versionLogo} alt="version-logo" className="h-5" />
<img src={logoSrc} alt="version-logo" className="h-5" />
</button>
</div>
</div>
Expand Down
47 changes: 44 additions & 3 deletions src/pages/Setting/Models.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,9 +97,25 @@ type SidebarTab =
| 'local-sglang'
| 'local-lmstudio';

// Provider logos that use dark fills (black or currentColor) and need inversion in dark mode
const DARK_FILL_MODELS = new Set([
'openai',
'anthropic',
'moonshot',
'ollama',
'openrouter',
'lmstudio',
'Z.ai',
]);

export default function SettingModels() {
const { modelType, cloud_model_type, setModelType, setCloudModelType } =
useAuthStore();
const {
modelType,
cloud_model_type,
setModelType,
setCloudModelType,
appearance,
} = useAuthStore();
const _navigate = useNavigate();
const { t } = useTranslation();
const getValidateMessage = (res: any) =>
Expand Down Expand Up @@ -965,6 +981,16 @@ export default function SettingModels() {
}
};

// Check if a model logo needs inversion in dark mode
const needsInvert = (modelId: string | null): boolean => {
if (!modelId || appearance !== 'dark') return false;
// Strip 'local-' prefix for local model tab IDs
const key = modelId.startsWith('local-')
? modelId.replace('local-', '')
: modelId;
return DARK_FILL_MODELS.has(key);
};

// Helper to get model image based on model ID
const getModelImage = (modelId: string | null): string | null => {
if (!modelId) return null;
Expand Down Expand Up @@ -1030,7 +1056,12 @@ export default function SettingModels() {
>
<div className="flex items-center justify-center gap-3">
{modelImage ? (
<img src={modelImage} alt={label} className="h-5 w-5" />
<img
src={modelImage}
alt={label}
className="h-5 w-5"
style={needsInvert(modelId) ? { filter: 'invert(1)' } : undefined}
/>
) : (
<span className={isActive ? 'text-text-body' : 'text-text-label'}>
{fallbackIcon}
Expand Down Expand Up @@ -1743,6 +1774,11 @@ export default function SettingModels() {
src={modelImage}
alt={item.name}
className="h-4 w-4"
style={
needsInvert(item.id)
? { filter: 'invert(1)' }
: undefined
}
/>
) : (
<Key className="h-4 w-4 text-icon-secondary" />
Expand Down Expand Up @@ -1799,6 +1835,11 @@ export default function SettingModels() {
src={modelImage}
alt={model.name}
className="h-4 w-4"
style={
needsInvert(`local-${model.id}`)
? { filter: 'invert(1)' }
: undefined
}
/>
) : (
<Server className="h-4 w-4 text-icon-secondary" />
Expand Down