From 983bd10264fd934e21b0958143c5d9d584c28391 Mon Sep 17 00:00:00 2001
From: Val Alexander <bunsthedev@gmail.com>
Date: Tue, 31 Mar 2026 23:36:13 -0500
Subject: [PATCH] Add accent background override for project headers

- Add app setting for a custom project header background color
- Wire the sidebar to use the override with hover states
- Expose color picker and text input in settings
---
 apps/web/src/appSettings.ts            |  1 +
 apps/web/src/components/Sidebar.tsx    | 19 ++++++++-
 apps/web/src/routes/_chat.settings.tsx | 53 ++++++++++++++++++++++++++
 3 files changed, 72 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/appSettings.ts b/apps/web/src/appSettings.ts
index bd4481aa1..572f00ac3 100644
--- a/apps/web/src/appSettings.ts
+++ b/apps/web/src/appSettings.ts
@@ -82,6 +82,7 @@ export const AppSettingsSchema = Schema.Struct({
   sidebarHideFiles: Schema.Boolean.pipe(withDefaults(() => false)),
   sidebarAccentProjectNames: Schema.Boolean.pipe(withDefaults(() => true)),
   sidebarAccentColorOverride: Schema.optional(Schema.String.check(Schema.isMaxLength(64))),
+  sidebarAccentBgColorOverride: Schema.optional(Schema.String.check(Schema.isMaxLength(64))),
   sidebarWideThreadNames: Schema.Boolean.pipe(withDefaults(() => true)),
   customCodexModels: Schema.Array(Schema.String).pipe(withDefaults(() => [])),
   customClaudeModels: Schema.Array(Schema.String).pipe(withDefaults(() => [])),
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index e8f1b7e79..a24b5e669 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -1329,9 +1329,26 @@ export default function Sidebar() {
           <SidebarMenuButton
             ref={isManualProjectSorting ? dragHandleProps?.setActivatorNodeRef : undefined}
             size="sm"
-            className={`min-w-0 flex-1 gap-2 rounded-lg border border-transparent px-2.5 py-2.5 text-left bg-accent/40 hover:bg-accent/70 group-hover/project-header:bg-accent/70 group-hover/project-header:text-sidebar-accent-foreground dark:bg-accent/30 dark:hover:bg-accent/50 dark:group-hover/project-header:bg-accent/50 ${
+            className={`min-w-0 flex-1 gap-2 rounded-lg border border-transparent px-2.5 py-2.5 text-left ${appSettings.sidebarAccentBgColorOverride ? "" : "bg-accent/40 hover:bg-accent/70 group-hover/project-header:bg-accent/70 dark:bg-accent/30 dark:hover:bg-accent/50 dark:group-hover/project-header:bg-accent/50"} group-hover/project-header:text-sidebar-accent-foreground ${
               isManualProjectSorting ? "cursor-grab active:cursor-grabbing" : "cursor-pointer"
             }`}
+            style={
+              appSettings.sidebarAccentBgColorOverride
+                ? {
+                    backgroundColor: `color-mix(in srgb, ${appSettings.sidebarAccentBgColorOverride} 15%, transparent)`,
+                  }
+                : undefined
+            }
+            onMouseEnter={(e) => {
+              if (appSettings.sidebarAccentBgColorOverride) {
+                e.currentTarget.style.backgroundColor = `color-mix(in srgb, ${appSettings.sidebarAccentBgColorOverride} 25%, transparent)`;
+              }
+            }}
+            onMouseLeave={(e) => {
+              if (appSettings.sidebarAccentBgColorOverride) {
+                e.currentTarget.style.backgroundColor = `color-mix(in srgb, ${appSettings.sidebarAccentBgColorOverride} 15%, transparent)`;
+              }
+            }}
             {...(isManualProjectSorting && dragHandleProps ? dragHandleProps.attributes : {})}
             {...(isManualProjectSorting && dragHandleProps ? dragHandleProps.listeners : {})}
             onPointerDownCapture={handleProjectTitlePointerDownCapture}
diff --git a/apps/web/src/routes/_chat.settings.tsx b/apps/web/src/routes/_chat.settings.tsx
index b553c7775..87635393b 100644
--- a/apps/web/src/routes/_chat.settings.tsx
+++ b/apps/web/src/routes/_chat.settings.tsx
@@ -908,6 +908,59 @@ function SettingsRouteView() {
                 }
               />
 
+              <SettingsRow
+                title="Accent background override"
+                description="Set a custom background color for project headers instead of the theme default."
+                resetAction={
+                  settings.sidebarAccentBgColorOverride ? (
+                    <SettingResetButton
+                      label="accent background override"
+                      onClick={() =>
+                        updateSettings({
+                          sidebarAccentBgColorOverride: undefined,
+                        })
+                      }
+                    />
+                  ) : null
+                }
+                control={
+                  <div className="flex items-center gap-2">
+                    <label
+                      className="relative size-8 shrink-0 cursor-pointer overflow-hidden rounded-md border border-border"
+                      style={{
+                        backgroundColor:
+                          settings.sidebarAccentBgColorOverride || "var(--accent)",
+                      }}
+                    >
+                      <input
+                        type="color"
+                        value={settings.sidebarAccentBgColorOverride || "#000000"}
+                        onChange={(e) =>
+                          updateSettings({
+                            sidebarAccentBgColorOverride: e.target.value,
+                          })
+                        }
+                        className="absolute inset-0 cursor-pointer opacity-0"
+                        aria-label="Accent background color picker"
+                      />
+                    </label>
+                    <input
+                      type="text"
+                      value={settings.sidebarAccentBgColorOverride ?? ""}
+                      placeholder="Theme default"
+                      onChange={(e) => {
+                        const value = e.target.value.trim();
+                        updateSettings({
+                          sidebarAccentBgColorOverride: value || undefined,
+                        });
+                      }}
+                      className="h-8 w-28 rounded-md border border-border bg-background px-2 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring sm:w-32"
+                      aria-label="Accent background color value"
+                    />
+                  </div>
+                }
+              />
+
               <SettingsRow
                 title="Wide thread names"
                 description="Give thread names more room by allowing timestamps to compress."