From ead1774cd3389ff6e9605a31b971c4cc51b2805a Mon Sep 17 00:00:00 2001
From: Jack Kingsman <jack.kingsman@gmail.com>
Date: Wed, 1 Apr 2026 22:17:04 -0700
Subject: [PATCH] Boost sidebar icon color

---
 frontend/src/components/Sidebar.tsx           |  7 +--
 .../settings/SettingsLocalSection.tsx         | 11 ++--
 frontend/src/index.css                        | 52 +++++++++++++++++++
 frontend/src/themes.css                       |  4 --
 4 files changed, 63 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index aa86ece..2176f2d 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -659,8 +659,9 @@ export function Sidebar({
   }) => (
     <div
       key={key}
+      data-active={active ? 'true' : undefined}
       className={cn(
-        'px-3 py-2 cursor-pointer flex items-center gap-2 border-l-2 border-transparent hover:bg-accent transition-colors text-[13px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        'sidebar-action-row px-3 py-2 cursor-pointer flex items-center gap-2 border-l-2 border-transparent hover:bg-accent transition-colors text-[13px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
         active && 'bg-accent border-l-primary'
       )}
       role="button"
@@ -669,10 +670,10 @@ export function Sidebar({
       onKeyDown={handleKeyboardActivate}
       onClick={onClick}
     >
-      <span className="sidebar-tool-icon text-muted-foreground" aria-hidden="true">
+      <span className="sidebar-tool-icon" aria-hidden="true">
         {icon}
       </span>
-      <span className="sidebar-tool-label flex-1 truncate text-muted-foreground">{label}</span>
+      <span className="sidebar-tool-label flex-1 truncate">{label}</span>
     </div>
   );
 
diff --git a/frontend/src/components/settings/SettingsLocalSection.tsx b/frontend/src/components/settings/SettingsLocalSection.tsx
index 9c886dd..92d15ed 100644
--- a/frontend/src/components/settings/SettingsLocalSection.tsx
+++ b/frontend/src/components/settings/SettingsLocalSection.tsx
@@ -347,17 +347,20 @@ function PreviewSidebarRow({
 }) {
   return (
     <div
-      className={`flex items-center gap-2 rounded-md border-l-2 px-3 py-2 text-[13px] ${
+      data-active={active ? 'true' : undefined}
+      className={`sidebar-action-row flex items-center gap-2 rounded-md border-l-2 px-3 py-2 text-[13px] ${
         active ? 'border-l-primary bg-accent text-foreground' : 'border-l-transparent'
       }`}
     >
-      {leading}
-      <span className={`min-w-0 flex-1 truncate ${active ? 'font-medium' : 'text-foreground'}`}>
+      <span className="sidebar-tool-icon" aria-hidden="true">
+        {leading}
+      </span>
+      <span className={`sidebar-tool-label min-w-0 flex-1 truncate ${active ? 'font-medium' : ''}`}>
         {label}
       </span>
       {badge}
       {!badge && (
-        <span className="text-muted-foreground" aria-hidden="true">
+        <span className="sidebar-tool-icon" aria-hidden="true">
           <MessageSquare className="h-3.5 w-3.5" />
         </span>
       )}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index b28e91e..915c632 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -56,6 +56,14 @@
     --badge-mention: var(--destructive);
     --badge-mention-foreground: var(--destructive-foreground);
 
+    /* Sidebar navigation accents */
+    --sidebar-icon-color: hsl(var(--foreground));
+    --sidebar-icon-hover-color: hsl(var(--foreground));
+    --sidebar-icon-active-color: hsl(var(--foreground));
+    --sidebar-label-color: hsl(var(--muted-foreground));
+    --sidebar-label-hover-color: hsl(var(--foreground));
+    --sidebar-label-active-color: hsl(var(--foreground));
+
     /* Error toast */
     --toast-error: 0 30% 14%;
     --toast-error-foreground: 0 56% 77%;
@@ -126,6 +134,50 @@
   animation: message-highlight 2s ease-out forwards;
 }
 
+.sidebar-tool-icon {
+  display: inline-flex;
+  height: 1.5rem;
+  width: 1.5rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.45rem;
+  color: var(--sidebar-icon-color);
+  opacity: 1;
+  transition:
+    color 150ms ease,
+    opacity 150ms ease;
+}
+
+.sidebar-tool-icon svg {
+  stroke-width: 2.35;
+}
+
+.sidebar-tool-label {
+  color: var(--sidebar-label-color);
+  transition: color 150ms ease;
+}
+
+.sidebar-action-row:hover .sidebar-tool-icon,
+.sidebar-action-row:focus-visible .sidebar-tool-icon {
+  color: var(--sidebar-icon-hover-color);
+  opacity: 1;
+}
+
+.sidebar-action-row:hover .sidebar-tool-label,
+.sidebar-action-row:focus-visible .sidebar-tool-label {
+  color: var(--sidebar-label-hover-color);
+}
+
+.sidebar-action-row[data-active='true'] .sidebar-tool-icon {
+  color: var(--sidebar-icon-active-color);
+  opacity: 1;
+}
+
+.sidebar-action-row[data-active='true'] .sidebar-tool-label {
+  color: var(--sidebar-label-active-color);
+}
+
 /* Constrain CodeMirror editor width */
 .cm-editor {
   max-width: 100% !important;
diff --git a/frontend/src/themes.css b/frontend/src/themes.css
index 6642bbe..100979a 100644
--- a/frontend/src/themes.css
+++ b/frontend/src/themes.css
@@ -49,10 +49,6 @@
   --overlay: 220 20% 10%;
 }
 
-:root[data-theme='light'] .sidebar-tool-label {
-  color: hsl(var(--foreground));
-}
-
 /* ── Windows 95 ───────────────────────────────────────────── */
 :root[data-theme='windows-95'] {
   --background: 180 100% 25%;