Add custom accent background override for project headers

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(() => [])),

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}

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."