Skip to content

Redesign Highlands theme — strengthen warm moorland dark identity #3350

@gregpriday

Description

@gregpriday

Summary

The Highlands theme is a warm dark theme with brown-grey surfaces inspired by Scottish moorland. It reads as pleasant but somewhat anonymous — it lacks the distinctiveness of Daintree or Arashiyama. The terminal palette is muted to the point of reduced legibility, and the theme doesn't yet fully express the highlands character: heather purple, pewter sky, peaty shadow.

Problem Statement

Highlands uses surfaces #1A1614 (canvas) and #14110F (sidebar) — a warm charcoal brown. The feel is correct in direction but unfinished:

  • The warmth is subtle to the point of being unnoticeable. At small sizes or quick glances, Highlands looks nearly identical to a generic dark grey theme.
  • Terminal colors are intentionally desaturated (the muted palette approach works for Arashiyama and Galápagos), but terminal-green: #4E8C6A and terminal-blue: #5B7E96 are dark enough to risk legibility issues on the canvas background. terminal-magenta: #8B6A8A in particular is very dim.
  • syntax-string: #C88C45 is a warm amber that's used as the primary syntax color, but this competes with syntax-number: #BE7055 which is also a warm tone — they're hard to differentiate at a glance.
  • The theme has no strong secondary hue that gives it character. Daintree has its cool grey neutrality, Arashiyama has its warm bamboo amber/rust. Highlands needs something — heather purple, moss green, or pewter blue — to anchor its identity.
  • activity-idle: #4A4238 is very close to the surface-canvas value, making idle worktrees barely distinguishable from the background.

Relevant code:

Desired Behavior

Highlands should feel like the Scottish moorlands: warm dark earthy tones with heather purple accents, grey-pewter sky mid-tones, and deep peat-brown surfaces. The theme should:

  • Have a clear identity hue (heather purple or pewter blue) worked into syntax highlighting and/or activity indicators.
  • Terminal colors should be legible — all normal ANSI colors should achieve contrast ≥ 3:1 on the canvas background.
  • syntax-string and syntax-number should be differentiable — distinct enough hues that code doesn't look monochrome.
  • activity-idle should be visually distinct from the canvas surface.

Verification Workflow

  1. Apply the theme: await setAppTheme(window, "highlands").
  2. Capture full-page screenshot.
  3. Measure terminal color contrast against canvas for each ANSI color.
  4. AI visual evaluation: does the theme have a clear highlands character? Are the syntax colors distinguishable? Does it look distinct from Daintree?
  5. Iterate and npm run check.

Acceptance Criteria

  • The theme has a recognizable secondary identity hue beyond warm-brown surfaces (heather, pewter, or similar moorland-inspired tone).
  • All standard ANSI terminal colors meet ≥ 3:1 contrast against surface-canvas.
  • syntax-string and syntax-number are visually distinct from each other.
  • activity-idle is clearly visible against the canvas — it should read as a meaningful UI signal, not blend in.
  • All E2E tests pass.

Edge Cases & Risks

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions