mirror of
https://github.com/farion1231/cc-switch.git
synced 2026-10-26 01:34:51 +08:00
fix(ui): desaturate inactive brand-colored icons in app switcher
Colored brand icons (Claude, Gemini, OpenCode, OpenClaw, Hermes, MiniMax Code) kept their full color when inactive, so only the pill background distinguished selected vs unselected. Monochrome icons (Codex, Grok Build, Pi) already dimmed via currentColor. Apply grayscale + reduced opacity to inactive colored icons, restoring full color on hover or when active.
This commit is contained in:
1 parent
f8788719a1
commit
3ed5892532
1 file changed
+10
@@ -53,6 +53,10 @@ const APP_DISPLAY_NAME: Record<AppId, string> = {
|
||||
mcode: "MiniMax Code",
|
||||
};
|
||||
|
||||
// 单色图标经 currentColor 继承按钮的 muted 文字色,未选中时自然变灰;
|
||||
// 其余为固定品牌色,需要显式去色才能和选中态区分
|
||||
const CURRENT_COLOR_APPS = new Set<AppId>(["codex", "grokbuild", "pi"]);
|
||||
|
||||
/** 应用图标 + 角标(Claude Code / Desktop 用角标区分终端与桌面) */
|
||||
function AppGlyph({ app, isActive }: { app: AppId; isActive: boolean }) {
|
||||
const badgeConfig = APP_BADGE_ICON[app];
|
||||
@@ -63,6 +67,12 @@ function AppGlyph({ app, isActive }: { app: AppId; isActive: boolean }) {
|
||||
icon={APP_ICON_NAME[app]}
|
||||
name={APP_DISPLAY_NAME[app]}
|
||||
size={20}
|
||||
className={cn(
|
||||
"transition-[filter,opacity] duration-200",
|
||||
!isActive &&
|
||||
!CURRENT_COLOR_APPS.has(app) &&
|
||||
"grayscale opacity-60 group-hover:grayscale-0 group-hover:opacity-100",
|
||||
)}
|
||||
/>
|
||||
{BadgeIcon && (
|
||||
<span
|
||||
|
||||
Reference in new issue
Block a user