From 665ffd89e3b8a06e0f58bd4bc93a5558dac68bdd Mon Sep 17 00:00:00 2001
From: Jinjing <6427696+AmethystLiang@users.noreply.github.com>
Date: Sat, 28 Mar 2026 00:11:39 -0700
Subject: [PATCH] fix: improve repo badge and branch label visibility in dark
 mode (#157)

Use bg-accent with dark mode variants instead of bg-background/50 so badges remain readable on dark backgrounds.
---
 src/renderer/src/components/sidebar/WorktreeCard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/components/sidebar/WorktreeCard.tsx b/src/renderer/src/components/sidebar/WorktreeCard.tsx
index b320c9af5..3b9fbd76f 100644
--- a/src/renderer/src/components/sidebar/WorktreeCard.tsx
+++ b/src/renderer/src/components/sidebar/WorktreeCard.tsx
@@ -300,7 +300,7 @@ const WorktreeCard = React.memo(function WorktreeCard({
           {/* Subtitle row: Repo badge + Branch */}
           <div className="flex items-center gap-1.5 min-w-0">
             {repo && !hideRepoBadge && (
-              <div className="flex items-center gap-1.5 shrink-0 px-1.5 py-0.5 rounded-[4px] bg-background/50 border border-border/40">
+              <div className="flex items-center gap-1.5 shrink-0 px-1.5 py-0.5 rounded-[4px] bg-accent border border-border dark:bg-accent/50 dark:border-border/60">
                 <div
                   className="size-1.5 rounded-full"
                   style={{ backgroundColor: repo.badgeColor }}
@@ -314,7 +314,7 @@ const WorktreeCard = React.memo(function WorktreeCard({
             {isPrimaryBranch(worktree.branch) ? (
               <Badge
                 variant="secondary"
-                className="h-[16px] px-1.5 text-[10px] font-medium rounded shrink-0 text-muted-foreground bg-accent/60 border-none leading-none"
+                className="h-[16px] px-1.5 text-[10px] font-medium rounded shrink-0 text-muted-foreground bg-accent border border-border dark:bg-accent/80 dark:border-border/50 leading-none"
               >
                 main
               </Badge>