fix: make logos visible in dark mode #1197
Conversation
Use theme-aware logo for Eigent branding in Settings and apply CSS invert filter to provider SVGs with dark fills on the Models page.
There was a problem hiding this comment.
Thanks @eureka928 for the quick fix! Left some minor comments. But I am not sure if we should do this by inverting the images or collecting the dark mode version of these logos? @Douglasymlai may have an opinion on this.
Co-authored-by: Guohao Li <lightaime@gmail.com>
|
@eureka928 Hi—thanks for the PR. Adding the dark-mode logo by inverting the image is a good approach, and it looks solid. @lightaime This might be something we’ll want to keep an eye on for future maintenance, but overall it’s a nice UX improvement. One potential issue though: I’m seeing that the Z AI and LM Studio logos don’t switch to the white version in dark mode. Are you seeing the same on your side? |
|
@Douglasymlai have you run using my branch? can you compare with my screenshot? |
…e-model to dark mode inversion Rename provider ID 'Z.ai' to 'z.ai' for naming consistency across DARK_FILL_MODELS, the image map, and backend PLATFORM_MAPPING. Add 'openai-compatible-model' to DARK_FILL_MODELS so its logo inverts correctly in dark mode.
|
@Douglasymlai The code for both Z.ai and LM Studio looks correct — both are in |
|
@eureka928 Yes, I was running on the latest branch. Let me pull the code and test it again. |
|
@eureka928 Yes, it looks great now! |
|
Cool, would you merge? |
4 participants
Description
Fixes logos that are invisible or hard to see in dark mode:
Eigent logo in Settings page: The
version-logo.png(always black) was used instead of the existing theme-aware logo variable. Switched to uselogoSrcwhich selectslogo_white.pngin dark mode andlogo_black.pngin light mode.Provider logos in Models page: Several provider SVGs use
fill="black"orfill="currentColor"which renders as black in<img>tags, making them invisible on dark backgrounds. Applied CSSfilter: invert(1)in dark mode for affected providers (OpenAI, Anthropic, Moonshot, Ollama, OpenRouter, LM Studio, Z.ai).Related Issue
Fixes #1193
Changes Made
src/pages/Setting.tsx: Removed unusedversionLogoimport, renamed_logoSrctologoSrc, replaced hardcoded black logo with theme-awarelogoSrcsrc/pages/Setting/Models.tsx: AddedDARK_FILL_MODELSset,needsInvert()helper, extractedappearancefrom store, appliedfilter: invert(1)style to affected provider logo<img>tags in sidebar, custom model dropdown, and local model dropdownWhat is the purpose of this pull request?