Skip to content

Redesign Atacama theme — fix flat neutral-grey light surfaces #3355

@gregpriday

Description

@gregpriday

Summary

The Atacama light theme is inspired by the Atacama Desert — arid, mineral, high-altitude neutral grey. The surface palette is intentionally stark and minimal, but this makes it the flattest-looking of all the light themes. Without enough visual hierarchy, the interface looks like a low-contrast grey document rather than a purposeful IDE.

Problem Statement

Atacama uses #F4F4F2 (canvas) and #EBEAE6 (sidebar) — near-white neutral greys with the faintest warm undertone. The problem is that neutrality in a light theme requires more careful tuning than a dark theme:

  • surface-canvas: #F4F4F2 and surface-panel: #FAFAF8 are extremely close — panels barely float above the canvas. The elevated panel (#FFFFFF) is brighter but only by a small step.
  • surface-grid: #E3E2DE and surface-sidebar: #EBEAE6 are nearly identical, meaning the panel grid (which should frame and separate panels) is almost indistinguishable from the sidebar and other surfaces.
  • border-default: #D5D3CE is a barely-there warm grey that's almost invisible against surface-panel: #FAFAF8. With the derived border-subtle and border-divider being even fainter, the entire border system essentially disappears.
  • The Canopy green accent #3F9366 pops strongly against these neutral surfaces — there's no supporting palette to bridge between the neutral surfaces and the vivid green, making it feel like a foreign color injection.
  • activity-active: #1D9B5E is a slightly muted green — better adapted than the raw #22c55e, but still the only saturated element in an otherwise deliberately unsaturated theme.
  • status-info: #1447A4 is a very saturated cobalt blue — the most vivid token in the theme. On the pale neutral canvas it's usable but feels over-injected.
  • The overall theme looks like an unfinished "default system light mode" rather than a considered theme with personality.

Relevant code:

Desired Behavior

Atacama should feel like the high-altitude desert: mineral-white and pale stone with dry, cracked earth mid-tones and the faint blue of altitude. The theme can be clean and minimal — but it needs enough contrast in its surface stack and border system to give the interface structure. Specifically:

  • The surface hierarchy should be legible: canvas → sidebar → panel → elevated panel should be clearly distinguishable steps.
  • Borders should visibly separate components without being heavy or dark.
  • The accent and status colors should feel intentional — like tools designed for a light neutral IDE, not transplanted from a dark theme.
  • Status indicators and activity dots should be adapted for light mode: muted enough to not jump off the surface, vivid enough to communicate state.

Verification Workflow

  1. Apply: await setAppTheme(window, "atacama").
  2. Run getThemeChromeMetrics — verify smoke test checks pass.
  3. Screenshot: full page plus close-ups of the sidebar, worktree dashboard, and a settings dialog.
  4. AI evaluation: does the theme feel designed? Is there enough surface differentiation? Does it look washed out?
  5. Iterate; npm run check.

Acceptance Criteria

  • E2E smoke test passes for Atacama.
  • Canvas, sidebar, panel, and grid are visually distinct — a user can identify the structural regions without looking at the code.
  • border-default is visible against both panel and canvas backgrounds.
  • The overall palette has a coherent identity (mineral/desert neutral) that is distinct from Svalbard (arctic blue) and Hokkaido (cool blue-grey).
  • All E2E tests pass.

Dependencies

Depends on #3346 for improved border and overlay token overridability.

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