atrium — Docs
docs/customization/appearance.md

Appearance

Terminal and editor fonts, UI scale, densities.

atrium has three orthogonal appearance layers: themes (colors), fonts (terminal and editor independently), and UI scale (everything else).

UI scale

The app-wide UI scale multiplies every chrome dimension — padding, gaps, icon sizes, borders, radii. It does not scale terminal or editor content (those have their own font settings).

  • Settings → Appearance → UI scale — slider from ~85% to ~150%.
  • Keyboard shortcuts Cmd+= / Cmd+- / Cmd+0 step zoom in / out / reset.
  • Persisted as uiScale in app state; applied across all projects.
  • Components use scaledPx() for React inline styles and var(--ui-scale) for CSS, so custom themes and third-party components inherit the scale automatically.
  • Scaled surfaces include the launcher overlay (with the xxs tile size), the markdown editor (both the prose layer and the contenteditable font-size), every modal (launch dialogs, confirms, scaffold modals, dictation overlay), the Library / Vault layout, the tab close button, and the per-row chrome of the skills and profile dialogs. Modals also grow with the window via clamp(min, Xvw, max) instead of staying pegged at hardcoded widths.
atrium does not use CSS zoom or inverse-zoom on the mosaic. If you come from an older version that did, the UI scale value migrates; hand-edited zoom rules in custom themes should be removed.

Terminal font

Applies to every terminal pane. Under Settings → Terminal:

  • Font family — a dropdown of detected monospace fonts. The system is scanned with font-kit on launch and known monospace families are cached.
  • Font size (default 11).
  • Line height — multiplier on the font size.
  • Letter spacing — additional horizontal padding per glyph.
  • Font ligatures — toggle.
  • Cursor styleblock / underline / bar.
  • Cursor blink — toggle.
  • Scrollback lines — how many lines of history xterm retains.
  • Padding — pixel padding inside the terminal pane.
  • Background opacity0.0 to 1.0.
All values live under config.terminal in config.json.

Markdown editor font

Applies to panes opened in the markdown editor (both RTE and source mode). Under Settings → General → Markdown editor:

  • Default font — any installed font family, not only monospace.
  • Font size (default 14).
  • Text alignmentleft / center / right / justify.
  • Book view — fixed-width centered column for long-form writing, with configurable width and side margin.
Stored under config.markdown_editor.

Monaco (editor pane) font

Uses the terminal font family by default, so code looks consistent across editor and terminal panes. Override the editor font independently with the Monaco editor settings in Settings → Editor (falls back to the terminal settings if not overridden).

Activity sidebar density

Changes how much per-card detail the sidebar shows.

  • Full — status + last event + progress + tool call summary.
  • Semi — status badge and last event time.
  • Compact — status dot and adapter accent only.
  • Ultra-compact — the tightest rows, fitting the most agents on screen.
Set under Settings → Activity → Density. Stored per-project.

Icon pack

The whole chrome icon set is switchable at runtime under Settings → Appearance:

  • Hugeicons — the default.
  • Lucide.
  • Phosphor (duotone).
The swap is a layer, not a rewrite — every icon in the app, including achievement glyphs, routes through it, so the change is instant and complete.

Layout spacing

Spacing presets control every chrome gap at once — pane padding, sidebar insets, header spacing, tray gutters — so you can tighten the whole app for a dense display or loosen it for a large one without hunting through individual settings.

Either sidebar can mount Home, Activity, File Tree, Timeline, or Skills & Agents. The right header is the mode switcher; the left View options menu has Change view. Picking a view that's open on the other side swaps them. See Panes overview → Pane navigator.

  • Cmd+B — toggle the left sidebar.
  • Cmd+Shift+A — toggle the right sidebar.
  • Cmd+Shift+2 — toggle both side sidebars.
  • Cmd+Shift+1 — toggle those plus the room bar.
  • Ctrl+B — collapse the rooms sidebar; Ctrl+T flips this project between the rooms sidebar and the horizontal tab bar.
  • ` Cmd+Shift+ `` — zen mode: all chrome hidden, only the mosaic.
atrium has no title bar. The macOS traffic lights live in the Home sidebar header, and the horizontal tab bar floats as a detached pill rather than sitting in a strip.

Tab layout diagrams

Every room strip shows a miniature color-coded diagram of that room's pane layout. The diagram reflects split orientation and pane-type accent colors — notepad amber, diff-review teal, browser blue, git red, editor neutral — so you can identify "the room with a split between the browser and the editor" at a glance.

Live theme switching

Switching themes from Settings → Theme, atrium theme switch <name>, or the system light/dark trigger now applies to the running app immediately — no reload required. Every pane reads from the shared CSS custom properties, so the swap flows through chrome, panes, sketches, and overlays in one tick.

Wallpaper

Set a full-window background behind the mosaic. When a wallpaper is active, surfaces go translucent, frosted-glass so the image shows through a single layer per surface — git diffs, sidebar items, activity cards, kanban boards, and composers all composite over it rather than painting opaque panels.

Supported sources:

  • Image (PNG, JPG, …) or animated GIF.
  • Video (mp4, webm, mov) — rendered as a hardware-decoded <video>, so it animates smoothly at a fraction of the CPU a CPU-decoded GIF would cost. Prefer a short looping video over a heavy GIF.

Scope

How far the wallpaper reaches is configurable:

  • Chrome only — the wallpaper sits behind the app frame; panes stay opaque.
  • Panes only — it shows through the mosaic's panes.
  • Panes + sidebars — it shows through both.
With a wallpaper active, pane headers render seamlessly into their pane, and the active pane is marked with an accent border rather than a filled header bar.

Pane lights

An opt-in visual layer that wraps adapter panes in an activity-reactive glow, color-coded per adapter, so a busy pane visibly lights up. The motion is weather-like — traveling wavefronts and volumetric depth that react to each pane's activity. Lights only animate for on-screen panes, so the effect stays cheap.

Enable it under Settings → Activity. It's off by default.