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

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

src/shared/types.ts

@@ -41,8 +41,20 @@ export interface ConnectionsFile {
 	connections: SavedConnection[];
 }
 
+export type AccentTone =
+	| "graphite"
+	| "blue"
+	| "indigo"
+	| "purple"
+	| "rose"
+	| "orange"
+	| "green"
+	| "teal";
+
 export interface AppSettings {
 	theme: "system" | "light" | "dark";
+	/** Accent tone for chrome and selection tint; graphite = neutral zinc. */
+	accent: AccentTone;
 	speedUnit: "MBps" | "Mbps";
 	/** Font size of the path bar and file list. */
 	textSize: "compact" | "default" | "large";
@@ -60,6 +72,7 @@ export interface AppSettings {
 
 export const DEFAULT_SETTINGS: AppSettings = {
 	theme: "system",
+	accent: "indigo",
 	speedUnit: "MBps",
 	textSize: "default",
 	transferMode: "single",

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;

ui/src/styles.css

@@ -95,6 +95,7 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
+  --color-cursor-tint: var(--cursor-tint);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
@@ -125,6 +126,43 @@
   --path-ctl-h: 32px;
 }
 
+/* Accent tone (data-accent set by SettingsService; absent = graphite/zinc).
+   Each tone is one hue+chroma line; the formula blocks below derive --primary,
+   --ring and the cursor-row tint for light and both dark states. The dark
+   formula blocks (0,3,0) outrank the base dark token blocks and the light
+   formula block (0,2,0) in every dark state; graphite matches no [data-accent]
+   selector and keeps the zinc tokens untouched. */
+:root {
+  /* graphite: cursor row identical to the old bg-accent highlight */
+  --cursor-tint: var(--accent);
+}
+:root[data-accent='blue'] { --tone-h: 255; --tone-c: 0.17; }
+:root[data-accent='indigo'] { --tone-h: 277; --tone-c: 0.19; }
+:root[data-accent='purple'] { --tone-h: 305; --tone-c: 0.17; }
+:root[data-accent='rose'] { --tone-h: 8; --tone-c: 0.17; }
+/* darkest orange that still reads orange; white button text lands ≈ 4.3:1 */
+:root[data-accent='orange'] { --tone-h: 50; --tone-c: 0.18; --tone-l: 0.58; }
+:root[data-accent='green'] { --tone-h: 150; --tone-c: 0.15; }
+:root[data-accent='teal'] { --tone-h: 185; --tone-c: 0.12; }
+
+:root[data-accent] {
+  --primary: oklch(var(--tone-l, 0.55) var(--tone-c) var(--tone-h));
+  --ring: oklch(0.62 calc(var(--tone-c) * 0.55) var(--tone-h));
+  --cursor-tint: color-mix(in oklab, var(--primary) 8%, transparent);
+}
+:root[data-theme='dark'][data-accent] {
+  --primary: oklch(0.72 calc(var(--tone-c) * 0.85) var(--tone-h));
+  --ring: oklch(0.62 calc(var(--tone-c) * 0.55) var(--tone-h));
+  --cursor-tint: color-mix(in oklab, var(--primary) 12%, transparent);
+}
+@media (prefers-color-scheme: dark) {
+  :root[data-accent]:not([data-theme='light']) {
+    --primary: oklch(0.72 calc(var(--tone-c) * 0.85) var(--tone-h));
+    --ring: oklch(0.62 calc(var(--tone-c) * 0.55) var(--tone-h));
+    --cursor-tint: color-mix(in oklab, var(--primary) 12%, transparent);
+  }
+}
+
 html,
 body {
   height: 100%;