atrium — Docs
docs/customization/appearance.md

Appearance: text size, code fonts, UI scale, themes, and wallpaper

Set universal text size, shared code typography, UI scale, icon pack, spacing presets, sidebar layout, live theme switching, and an image or video wallpaper behind the mosaic.

atrium separates themes (colors), code typography (terminal, editor, diff, and transcript code), markdown prose typography, interface size (chrome and text together), and text size (an extra text-only multiplier).

UI scale

The app-wide interface size multiplies every chrome dimension — padding, gaps, icon sizes, borders, and radii — and keeps text proportional to that chrome.

  • Settings → Appearance → Interface size — slider from 50% to 200%, with − / + buttons for precise steps. Dragging previews immediately and commits the persisted value when you release.
  • 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.

Text size

Settings → Appearance → Text size adds a 50%–200% multiplier to atrium's text without applying the same multiplier to icons, borders, pane gaps, and other explicitly sized chrome. Interface size and text size compose, so the effective size is base font size × interface size × text size.

Code and markdown font preferences remain the base sizes for those surfaces; changing Text size does not overwrite them. Monaco editors, terminals, markdown panes, the menu-bar panel, capture overlays, and the rest of atrium's first-party UI update live. Websites inside browser panes keep their own page sizing, and saved user-authored drawing text is left unchanged.

Code typography

Under Settings → Appearance → Code, one compact set of controls applies to terminal output, file editors, source-control and review diffs, markdown code and source mode, transcript code blocks, tool output, and code snippets:

  • Font — 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 spacing — multiplier on each code surface's established line height.
  • Letter spacing — additional horizontal padding per glyph.
  • Font ligatures — toggle.
The size composes with the other Appearance controls: effective code size = base code size × interface size × text size. These preferences remain stored under config.terminal in config.json, so existing terminal typography carries forward automatically.

Terminal appearance

Terminal-only controls remain under Settings → Terminal:

  • Cursor style — block / underline / bar.
  • Cursor blink — toggle.
  • Scrollback lines — how many lines of history xterm retains.
  • Padding — pixel padding inside the terminal pane.
  • Background opacity — 0.0 to 1.0.
These values also 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 alignment — left / center / right / justify.
  • Book view — fixed-width centered column for long-form writing, with configurable width and side margin.
Stored under config.markdown_editor. The configured font size is multiplied by Interface size and Text size while rendering.

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.

Four independent switches can make chrome icons, adapter marks, favicons, and emoji monochrome. Chrome covers pane, project, and file-type glyphs; leaving the other switches off preserves brand and user-content color where it carries meaning.

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.

Pane header breadcrumbs optionally show the workspace, project, and wing path ahead of every pane title. Toggle them under Settings → Appearance → Chrome; the path is especially useful when several visible workspaces or remote locations contain similarly named rooms.

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.