Themes & Typography

Codemux's look is two independent settings: a theme (every color in the app, the terminal, and syntax highlighting) and typography (which fonts and sizes each surface uses). Both live under Settings → Appearance, and both sync with your account (following an Omarchy desktop theme is the one per-device exception).

Picking a Theme

Themes are chosen from the command palette, not from a grid in Settings.

Press Ctrl+K and type. Themes are search-only — the resting palette doesn't list them. The Themes group answers to a theme's own name or to any of the words theme, colors, palette, and appearance. The theme you're on is marked current.

• Arrow up and down to preview. Highlighting a row repaints the whole app live, so you judge a theme against your actual work rather than a swatch strip.
• Enter keeps it. Escape puts back the theme you started on.
• The footer spells this out while you browse: ↑↓ preview · ↵ keep it · esc back to <theme>, plus a reminder that the choice syncs to your account.

Themes are hidden in command mode (>) and path queries (/), so they never crowd out those results.

Settings → Appearance → Theme carries a Change button that opens the palette already seeded with the query, and a Customize button that opens the studio.

Built-in themes

Five dark themes — Graphite (the default), Warm Stone, Ember, Abyss, and Iris — and one light theme, Graphite Light. Each row in the palette names its scheme, so typing light finds the light theme.

Your saved custom themes list after the built-ins. Custom themes can be light or dark too: the background you pick decides.

There's no automatic light/dark switching that follows your operating system — you pick a theme, and it stays.

The Match app theme / System (Omarchy) choice under Settings → Terminal is a separate thing: it decides where the terminal's 16 ANSI colors come from, not which app theme is on.

Following Omarchy

On an Omarchy desktop, the Themes group also offers Follow Omarchy, listed first. Codemux then reads the desktop's current theme (~/.config/omarchy/current/theme/colors.toml) and repaints automatically whenever you change it there. The Appearance theme row reads "Following this desktop's theme. Changes apply automatically.", and Customize becomes Customize a copy, which opens the studio seeded with the Omarchy palette so you can save it as your own theme.

Following Omarchy is a per-device choice: it doesn't sync, and picking any other theme switches it off. A fresh install on Omarchy follows the desktop by default as long as you haven't picked a theme before. If the Omarchy theme can't be read, Codemux keeps your saved theme until it returns.

Theme Studio

Settings → Appearance → Theme → Customize opens the Customize theme modal. The command palette's Themes group also carries two direct entries: Make a theme from two colors… and Paste a VS Code or shadcn theme….

The right half of the modal is a live preview — a miniature shell, diff, and terminal — so you see the theme in context. It never repaints the running app, so cancelling leaves nothing to undo.

Generate — from two colors

Pick a Background and an Accent (hex or oklch(...)), give the theme a Name, and Codemux solves the other 24 roles for you. Either polarity works — a light background makes a light theme. A Solved roles grid shows all 26 tokens, with a contrast readout underneath:

Body text 8.4:1 · accent on surface 4.1:1

It turns green once body text clears 7:1 and the accent clears 3:1, so you can tell a legible theme from a pretty one before you save it.

Import — from somewhere else

The Import tab takes a theme from three sources:

• VS Code — search the VS Code Marketplace by name. Codemux lists matches with publisher and install counts, fetches the .vsix, and offers its variants. Light and dark variants both import — the theme's own background decides which one you end up with.
• shadcn / Tailwind — paste a CSS variable block containing --background and --primary.
• A .codemux-theme file — paste it, drag it in, or use Choose file (.json, .jsonc, .txt, .css).

Parsing happens as you type. The result reads "Recognised a shadcn theme · 19 of 26 roles mapped" and then names up to four roles Codemux derived for you, so an incomplete source is an honest state rather than a silent one.

Editing roles by hand

Edit roles by hand at the foot of either tab reveals every token as a color picker plus hex field, in two groups:

• Application roles — 26 tokens: background, foreground, card, popover, primary, secondary, muted, accent, border, input, ring, the seven sidebar* roles, brandAccent, and each one's *Foreground pair.
• ANSI and syntax — the 16 terminal slots: black, red, green, yellow, blue, magenta, cyan, white, and their bright counterparts.

Colors accept 3-, 4-, 6-, and 8-digit hex or oklch(...).

Saving, exporting, deleting

• Save and apply writes the theme and switches to it. The id is derived from the name (max 48 characters).
• Export downloads <theme-id>.codemux-theme.json.
• The trash icon deletes it; if it was the active theme, you fall back to Graphite.

Export and delete appear only once a custom theme has been saved.

A theme applies to the shell, terminal, code, and editor together — there is no per-surface theme.

Typography

Settings → Appearance → Typography sets the fonts. (Settings → Terminal's Font row is just a pointer with an Open Appearance button.)

Only font family and font size are configurable. There is no line-height, weight, letter-spacing, or ligature setting — code line height is derived from the code size, and terminal cell metrics are fixed.

Simple mode

The default. Two cards, two decisions:

• Interface & conversation — one typeface across the app (default DM Sans) and one size. Conversation text follows automatically at two pixels smaller for a calmer reading rhythm; the card badge shows what that works out to.
• Developer font — one monospace face (default JetBrains Mono) and one size, shared by code blocks, diffs, the file editor, and terminal cells.

Advanced mode

Tune each surface independently:

Sizes are dropdowns of whole pixel values, not sliders. An empty family choice inherits the closest matching font rather than falling back to a system default, so Conversation tracks Interface and Terminal tracks Code until you say otherwise. Switching back to Simple doesn't discard your per-surface overrides.

Which fonts you can pick

The picker lists the fonts actually installed on the device. Where the browser engine exposes local font access it enumerates everything; on WebKit it probes a curated catalog instead (Berkeley Mono, Cascadia Code, Fira Code, Geist, Hack, IBM Plex, Inconsolata, Iosevka, JetBrains Mono, Menlo, SF Mono, Source Code Pro, Ubuntu Mono, and similar), plus the bundled DM Sans and JetBrains Mono and the CSS generics.

You can also type any family name and choose Use "<name>". The Code and Terminal pickers filter to monospace faces only.

Restore defaults appears once anything is customized.

Changes apply immediately everywhere, including to live terminal panes — no restart, no pane remount.

What Syncs

Font names sync, not font files. If a face isn't installed on another device, Codemux falls back safely there without changing the saved choice, so it comes back the moment you're on a machine that has it.

Sync requires being signed in. Offline or signed-out changes are cached locally and flushed on the next sign-in.

Related

• Settings — the full settings reference
• Command Palette — where themes are picked
• Terminal — cursor style, ANSI color sourcing, renderer