Accent tone setting with macOS-style swatches (indigo default)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

ui/src/app/file-panel/file-panel.html

@@ -220,7 +220,7 @@
       (dblclick)="openAt(i)"
       (contextmenu)="rowContextMenu($event, i)"
       class="grid h-(--row-h) grid-cols-[minmax(0,1fr)_5.5rem_8.5rem] items-center text-(length:--list-font)"
-      [class.bg-accent]="i === panel().cursor() && !isSelected(entry)"
+      [class.bg-cursor-tint]="i === panel().cursor() && !isSelected(entry)"
       [class.bg-primary/15]="isSelected(entry)"
       [class.ring-1]="i === panel().cursor() && isActive()"
       [class.ring-inset]="i === panel().cursor() && isActive()"

ui/src/app/settings.service.ts

@@ -5,6 +5,7 @@ import { RpcService } from './rpc.service';
 @Injectable({ providedIn: 'root' })
 export class SettingsService {
   readonly theme = signal<AppSettings['theme']>(DEFAULT_SETTINGS.theme);
+  readonly accent = signal<AppSettings['accent']>(DEFAULT_SETTINGS.accent);
   readonly speedUnit = signal<AppSettings['speedUnit']>(DEFAULT_SETTINGS.speedUnit);
   readonly textSize = signal<AppSettings['textSize']>(DEFAULT_SETTINGS.textSize);
   readonly transferMode = signal<AppSettings['transferMode']>(DEFAULT_SETTINGS.transferMode);
@@ -16,10 +17,13 @@ export class SettingsService {
   private readonly rpc = inject(RpcService);
 
   constructor() {
+    // the default accent is not the CSS default — apply before first paint
+    this.applyAccent();
     if (!this.rpc.available) return;
     void this.rpc.request.getSettings({}).then((res) => {
       if (!res.ok) return;
       this.theme.set(res.settings.theme);
+      this.accent.set(res.settings.accent);
       this.speedUnit.set(res.settings.speedUnit);
       this.textSize.set(res.settings.textSize);
       this.transferMode.set(res.settings.transferMode);
@@ -28,6 +32,7 @@ export class SettingsService {
       this.editor.set(res.settings.editor);
       this.editorApp.set(res.settings.editorApp);
       this.applyTheme();
+      this.applyAccent();
       this.applyTextSize();
     });
   }
@@ -38,6 +43,12 @@ export class SettingsService {
     void this.persist();
   }
 
+  setAccent(tone: AppSettings['accent']): void {
+    this.accent.set(tone);
+    this.applyAccent();
+    void this.persist();
+  }
+
   setSpeedUnit(unit: AppSettings['speedUnit']): void {
     this.speedUnit.set(unit);
     void this.persist();
@@ -83,6 +94,15 @@ export class SettingsService {
     }
   }
 
+  private applyAccent(): void {
+    const tone = this.accent();
+    if (tone === 'graphite') {
+      delete document.documentElement.dataset['accent'];
+    } else {
+      document.documentElement.dataset['accent'] = tone;
+    }
+  }
+
   private applyTextSize(): void {
     const size = this.textSize();
     if (size === 'default') {
@@ -95,6 +115,7 @@ export class SettingsService {
   protected settings(): AppSettings {
     return {
       theme: this.theme(),
+      accent: this.accent(),
       speedUnit: this.speedUnit(),
       textSize: this.textSize(),
       transferMode: this.transferMode(),

ui/src/app/tab-bar/tab-bar.ts

@@ -1,11 +1,24 @@
 import { Component, ElementRef, effect, inject, signal, viewChild } from '@angular/core';
 import { NgIcon } from '@ng-icons/core';
+import type { AccentTone } from '@shared/types';
 import { PanelsService } from '../panels.service';
 import { IS_MAC_CHROME } from '../platform';
 import { RpcService } from '../rpc.service';
 import { SettingsService } from '../settings.service';
 
 const THEMES = ['system', 'light', 'dark'] as const;
+// Swatch colors are fixed mid-tones so every dot reads on both light and dark
+// cards (the live --primary values would vanish against one of them).
+const ACCENTS: readonly { value: AccentTone; swatch: string; label: string }[] = [
+  { value: 'graphite', swatch: 'oklch(0.552 0.016 285.9)', label: 'Graphite' },
+  { value: 'blue', swatch: 'oklch(0.65 0.17 255)', label: 'Blue' },
+  { value: 'indigo', swatch: 'oklch(0.65 0.19 277)', label: 'Indigo' },
+  { value: 'purple', swatch: 'oklch(0.65 0.17 305)', label: 'Purple' },
+  { value: 'rose', swatch: 'oklch(0.65 0.17 8)', label: 'Rose' },
+  { value: 'orange', swatch: 'oklch(0.68 0.17 50)', label: 'Orange' },
+  { value: 'green', swatch: 'oklch(0.65 0.15 150)', label: 'Green' },
+  { value: 'teal', swatch: 'oklch(0.65 0.12 185)', label: 'Teal' },
+];
 const SPEED_UNITS = [
   { value: 'MBps', label: 'MB/s' },
   { value: 'Mbps', label: 'Mbps' },
@@ -119,6 +132,24 @@ const CONCURRENCY_CHOICES = [2, 3, 4, 6, 8] as const;
             </div>
           </div>
 
+          <div class="mt-2.5 flex items-center justify-between gap-2">
+            <span class="text-xs text-muted-foreground">Accent</span>
+            <div class="flex items-center gap-1.5">
+              @for (tone of accents; track tone.value) {
+                <button
+                  (click)="settings.setAccent(tone.value)"
+                  [title]="tone.label"
+                  class="size-4 rounded-full border border-foreground/15"
+                  [style.background-color]="tone.swatch"
+                  [class.ring-2]="settings.accent() === tone.value"
+                  [class.ring-foreground]="settings.accent() === tone.value"
+                  [class.ring-offset-1]="settings.accent() === tone.value"
+                  [class.ring-offset-card]="settings.accent() === tone.value"
+                ></button>
+              }
+            </div>
+          </div>
+
           <div class="mt-2.5 flex items-center justify-between gap-2">
             <span class="text-xs text-muted-foreground">Text size</span>
             <div class="flex rounded-md border border-border p-0.5">
@@ -273,6 +304,7 @@ export class TabBar {
   readonly settingsOpen = signal(false);
   readonly isMacChrome = IS_MAC_CHROME;
   readonly themes = THEMES;
+  readonly accents = ACCENTS;
   readonly speedUnits = SPEED_UNITS;
   readonly textSizes = TEXT_SIZES;
   readonly transferModes = TRANSFER_MODES;