fix: strengthen light mode command palette and diff contrast

kylecarbs · kylecarbs · commit d773cf93e1c4 · 2025-11-17T09:38:25.000-05:00
- add theme tokens for command palette + sidebar tab text
- dark mode values mirror previous appearance; light mode uses darker fg
- darken "light" text token and code keywords for diff readability
diff --git a/src/browser/components/CommandPalette.tsx b/src/browser/components/CommandPalette.tsx
@@ -373,7 +373,7 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
       }}
     >
       <Command
-        className="bg-separator border-border text-lighter font-primary w-[min(720px,92vw)] overflow-hidden rounded-lg border shadow-[0_10px_40px_rgba(0,0,0,0.4)]"
+        className="font-primary w-[min(720px,92vw)] overflow-hidden rounded-lg border border-[var(--color-command-border)] bg-[var(--color-command-surface)] text-[var(--color-command-foreground)] shadow-[0_10px_40px_rgba(0,0,0,0.4)]"
         onMouseDown={(e: React.MouseEvent) => e.stopPropagation()}
         shouldFilter={shouldUseCmdkFilter}
         filter={(value, search) => {
@@ -390,7 +390,7 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
         }}
       >
         <Command.Input
-          className="bg-darker text-lighter border-hover w-full border-b border-none px-3.5 py-3 text-sm outline-none"
+          className="w-full border-b border-[var(--color-command-input-border)] bg-[var(--color-command-input)] px-3.5 py-3 text-sm text-[var(--color-command-foreground)] outline-none placeholder:text-[var(--color-command-subdued)]"
           value={query}
           onValueChange={handleQueryChange}
           placeholder={
@@ -423,13 +423,17 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
           {groupsWithItems.map((group) => (
             <Command.Group
               key={group.name}
-              heading={group.name}
-              className="[&[cmdk-group-heading]]:text-subdued [&[cmdk-group-heading]]:px-2.5 [&[cmdk-group-heading]]:py-1 [&[cmdk-group-heading]]:text-[11px] [&[cmdk-group-heading]]:tracking-[0.08em] [&[cmdk-group-heading]]:uppercase [&[cmdk-group]]:px-1.5 [&[cmdk-group]]:py-2"
+              heading={
+                <div className="px-2.5 py-1 text-[11px] tracking-[0.08em] text-[var(--color-command-subdued)] uppercase">
+                  {group.name}
+                </div>
+              }
+              className="px-1.5 py-2"
             >
               {group.items.map((item) => (
                 <Command.Item
                   key={item.id}
-                  className="hover:bg-hover aria-selected:bg-hover mx-1 my-0.5 grid cursor-pointer grid-cols-[1fr_auto] items-center gap-2 rounded-md px-3 py-2 text-[13px]"
+                  className="hover:bg-hover aria-selected:bg-hover mx-1 my-0.5 grid cursor-pointer grid-cols-[1fr_auto] items-center gap-2 rounded-md px-3 py-2 text-[13px] aria-selected:text-[var(--color-command-foreground)]"
                   onSelect={() => {
                     if ("prompt" in item && item.prompt) {
                       addRecent(item.id);
@@ -454,12 +458,14 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
                     {"subtitle" in item && item.subtitle && (
                       <>
                         <br />
-                        <span className="text-subdued text-xs">{item.subtitle}</span>
+                        <span className="text-xs text-[var(--color-command-subdued)]">
+                          {item.subtitle}
+                        </span>
                       </>
                     )}
                   </div>
                   {"shortcutHint" in item && item.shortcutHint && (
-                    <span className="text-subdued font-monospace text-[11px]">
+                    <span className="font-monospace text-[11px] text-[var(--color-command-subdued)]">
                       {item.shortcutHint}
                     </span>
                   )}
@@ -468,7 +474,9 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
             </Command.Group>
           ))}
           {!hasAnyItems && (
-            <div className="text-gray p-4 text-[13px]">{emptyText ?? "No results"}</div>
+            <div className="p-4 text-[13px] text-[var(--color-command-subdued)]">
+              {emptyText ?? "No results"}
+            </div>
           )}
         </Command.List>
       </Command>
diff --git a/src/browser/components/RightSidebar.tsx b/src/browser/components/RightSidebar.tsx
@@ -225,7 +225,7 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
                 className={cn(
                   "w-full py-2.5 px-[15px] border-none border-solid cursor-pointer font-primary text-[13px] font-medium transition-all duration-200",
                   selectedTab === "costs"
-                    ? "text-white bg-separator border-b-2 border-b-plan-mode"
+                    ? "bg-separator border-b-2 border-b-plan-mode text-[var(--color-sidebar-tab-active)]"
                     : "bg-transparent text-secondary border-b-2 border-b-transparent hover:bg-background-secondary hover:text-foreground"
                 )}
                 onClick={() => setSelectedTab("costs")}
@@ -246,7 +246,7 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
                 className={cn(
                   "w-full py-2.5 px-[15px] border-none border-solid cursor-pointer font-primary text-[13px] font-medium transition-all duration-200",
                   selectedTab === "review"
-                    ? "text-white bg-separator border-b-2 border-b-plan-mode"
+                    ? "bg-separator border-b-2 border-b-plan-mode text-[var(--color-sidebar-tab-active)]"
                     : "bg-transparent text-secondary border-b-2 border-b-transparent hover:bg-background-secondary hover:text-foreground"
                 )}
                 onClick={() => setSelectedTab("review")}
diff --git a/src/browser/styles/globals.css b/src/browser/styles/globals.css
@@ -95,6 +95,13 @@
     --color-line-number-text: rgba(255, 255, 255, 0.4);
     --color-line-number-border: rgba(255, 255, 255, 0.1);
     --color-assistant-border: hsl(207 45% 40%);
+    --color-command-surface: hsl(0 0% 15%);
+    --color-command-border: hsl(240 2% 25%);
+    --color-command-input: hsl(0 0% 9%);
+    --color-command-input-border: hsla(0 0% 100% / 0.08);
+    --color-command-foreground: hsl(0 0% 83%);
+    --color-command-subdued: hsl(0 0% 63%);
+    --color-sidebar-tab-active: hsl(0 0% 100%);
     --color-assistant-border-hover: hsl(207 45% 50%);
     --color-message-header: hsl(0 0% 80%);
 
@@ -317,6 +324,13 @@
   --color-line-number-text: hsl(210 14% 46%);
   --color-line-number-border: hsl(210 22% 84%);
   --color-assistant-border: hsl(207 65% 50%);
+  --color-command-surface: hsl(210 32% 97%);
+  --color-command-border: hsl(210 22% 82%);
+  --color-command-input: hsl(210 36% 95%);
+  --color-command-input-border: hsl(210 24% 84%);
+  --color-command-foreground: hsl(210 18% 18%);
+  --color-command-subdued: hsl(210 14% 46%);
+  --color-sidebar-tab-active: hsl(210 18% 18%);
   --color-assistant-border-hover: hsl(207 65% 40%);
   --color-message-header: hsl(210 18% 20%);
 
@@ -375,8 +389,8 @@
   --color-placeholder: hsl(210 16% 52%);
   --color-subtle: hsl(210 20% 64%);
   --color-dim: hsl(210 16% 50%);
-  --color-light: hsl(210 22% 72%);
-  --color-lighter: hsl(210 32% 86%);
+  --color-light: hsl(210 22% 40%);
+  --color-lighter: hsl(210 24% 52%);
   --color-bright: hsl(210 60% 48%);
   --color-subdued: hsl(210 18% 60%);
   --color-label: hsl(210 18% 46%);
@@ -418,8 +432,8 @@
   --color-warning: hsl(45 100% 50%);
   --color-warning-light: hsl(38 100% 70%);
 
-  --color-code-type: hsl(210 70% 34%);
-  --color-code-keyword: hsl(210 78% 32%);
+  --color-code-type: hsl(200 84% 28%);
+  --color-code-keyword: hsl(210 88% 24%);
 
   --color-toast-success-bg: hsl(207 90% 46% / 0.18);
   --color-toast-success-text: hsl(207 90% 34%);
@@ -436,8 +450,8 @@
   --color-white-overlay: hsl(210 14% 12% / 0.08);
   --color-selection: hsl(204 100% 45% / 0.3);
   --color-vim-status: hsl(210 18% 32% / 0.6);
-  --color-code-keyword-overlay-light: hsl(210 80% 45% / 0.12);
-  --color-code-keyword-overlay: hsl(210 80% 45% / 0.24);
+  --color-code-keyword-overlay-light: hsl(210 88% 28% / 0.16);
+  --color-code-keyword-overlay: hsl(210 88% 28% / 0.32);
 
   --color-info-light: hsl(5 90% 70%);
   --color-info-yellow: hsl(38 100% 60%);
