Skip to content

Redesign Fiordland theme — refine dark teal-blue identity #3349

@gregpriday

Description

@gregpriday

Summary

The Fiordland theme is a deep blue-black dark theme inspired by New Zealand's fjords. The bones are good but several token choices undermine the theme's potential: the surface hierarchy is thin, the terminal palette borrows Tokyo Night colors without adapting them to Fiordland's cooler, more muted character, and the accent green feels disconnected from the slate-blue surface.

Problem Statement

Fiordland uses very dark blue-black surfaces (#070D12 canvas, #0A1520 sidebar) with cold blue overtones. The overall feel is close to correct — dark, cold, deep water — but it has some rough edges:

  • Surface differentiation is weak: canvas #070D12 and sidebar #0A1520 are separated by only a few luminance steps, making the sidebar barely read as distinct.
  • border-default (#1A2B38) has enough blue in it to read as a UI element rather than a receding separator — it draws too much attention.
  • The terminal colors (terminal-red: #F7768E, terminal-green: #9ECE6A, etc.) are visually lifted from Tokyo Night. On the Fiordland surface they're bright and slightly incongruous — the theme's own surface palette is much more restrained.
  • terminal-bright-red is set to #FF9E64 — an orange, not a bright red. This semantic mismatch is confusing in terminal output.
  • syntax-keyword: #E86A33 is a warm orange, the hottest color in the palette, and it contrasts sharply with the cold surface in a way that feels accidental rather than intentional.
  • The activity indicators use Daintree's defaults (activity-active: #22c55e, activity-waiting: #fbbf24) — both work but could better integrate with the fjord's cold blue-grey character.

Relevant code:

Desired Behavior

Fiordland should evoke deep fjord waters and granite cliffs: cold, dark, with a clear blue-teal mid-tone palette. Refinements should:

  • Strengthen sidebar-to-canvas separation so the sidebar clearly anchors the layout.
  • Bring terminal colors into the theme's own vocabulary — cooler, more muted analogues of the standard ANSI palette that still meet legibility contrast.
  • Use a more coherent syntax highlighting palette that feels at home on cold-blue surfaces rather than borrowed from a warmer theme.
  • Optionally adapt activity-active to a cooler blue-green that fits the fjord character while still reading as "active/running."

Verification Workflow

  1. Apply the theme: await setAppTheme(window, "fiordland").
  2. Capture full-page screenshot.
  3. Measure: sidebar vs. canvas, toolbar text, worktree card contrast.
  4. AI visual evaluation: does the theme read as cold fjord? Is the terminal legible? Are syntax colors coherent with the surface?
  5. Iterate; run npm run check.

Acceptance Criteria

  • Sidebar and canvas have visually clear separation (contrast ratio ≥ 1.08 between the two surfaces).
  • terminal-bright-red is a red variant, not orange — semantic correctness for terminal output.
  • Terminal colors (normal and bright ANSI set) are legible against the Fiordland canvas background.
  • The theme reads as a coherent cold blue-teal dark theme — cold, deep, minimal — when evaluated via screenshot.
  • All existing E2E tests pass.

Edge Cases & Risks

  • The explicitly-set overlay-* tokens in Fiordland (currently the only theme that overrides them) should be reviewed: they may need adjusting after surface changes.
  • The paired terminal scheme from PR feat(terminal): match terminal color scheme to app theme automatically #3345 maps Fiordland to a specific terminal palette — verify the app/terminal pairing still looks cohesive after token changes.

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