Skip to content

Redesign Arashiyama theme — refine bamboo-grove dark identity #3351

@gregpriday

Description

@gregpriday

Summary

The Arashiyama theme is a warm dark theme inspired by the bamboo groves of Kyoto's Arashiyama district. The overall concept is strong and the warmth reads well. However the terminal palette is inconsistent with the theme's character, some syntax colors are too vivid for the earthy surface, and the activity indicator palette diverges from the Canopy standard in ways that reduce comprehension.

Problem Statement

Arashiyama uses a warm, slightly dusty surface palette (#25211E canvas, #211D1A sidebar) with amber mid-tones. The concept is clear and the theme is more refined than most. Issues are in the details:

  • activity-active: #3F9366 is set to the Canopy accent green (not the brighter #22c55e used by other themes) — this is intentional for a muted aesthetic, but may be too dim to clearly read as "running/active" in the worktree.
  • activity-working: #C89A3A is set to amber instead of the standard green — this changes the semantic meaning of "working" and may confuse users familiar with the Canopy convention.
  • activity-waiting: #6B9CB8 is a cool slate blue, which is coherent with the theme but is the only blue in the entire palette — it appears isolated and doesn't integrate with the rest of the warm-amber system.
  • terminal-bright-red: #ED6D46 is an orange-red that reads more like "warning" than "bright red" — the semantic mismatch exists here too (same issue as Fiordland).
  • syntax-keyword: #E55A63 is a saturated hot pink-red that feels too vivid against the earthy warm surface. It competes with syntax-number: #ED6A32 (also vivid warm-red), creating a monotone warm-vivid syntax palette where keywords and numbers are hard to differentiate.
  • terminal-selection: #3D2418 is a dark red-brown selection background — this can make selected text difficult to read in low-light terminal content.

Relevant code:

Desired Behavior

Arashiyama should feel like filtered light through bamboo: warm amber and green-gold mid-tones, deep dusty shadow surfaces, and the occasional flash of soft magenta (bamboo flower). The theme should:

  • Restore standard semantic meaning to agent state colors, or clearly document the intentional deviation and ensure it remains readable.
  • Have a syntax palette where keywords, strings, numbers, and functions are distinguishable at a glance — less reliance on saturated warm tones across multiple syntax categories.
  • Terminal selection background should provide good contrast for selected text.
  • terminal-bright-red should be a visually red variant.

Verification Workflow

  1. Apply: await setAppTheme(window, "arashiyama").
  2. Screenshot + contrast measurement.
  3. Evaluate terminal color legibility and semantic correctness (normal vs. bright ANSI pairs should each be differentiable).
  4. AI visual review: does the bamboo grove character read clearly? Are syntax colors distinguishable?
  5. npm run check.

Acceptance Criteria

  • Agent state indicators (activity-active, activity-working, activity-waiting, activity-idle) are clearly legible and distinct from each other against the Arashiyama canvas.
  • terminal-bright-red is a red-family color (not orange).
  • Terminal selection background provides ≥ 3:1 contrast for typical foreground text on Arashiyama canvas.
  • Syntax categories — keyword, string, number, function — are visually distinguishable (distinct enough in hue or lightness to be told apart).
  • The theme's bamboo/amber character is preserved and legible in a screenshot evaluation.
  • 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