Appearance

Themes, per-theme fonts, color customization, and connection colors

Light and Dark each hold their own theme. The Editing control at the top of the tab says which of the two the theme list writes to, so setting your dark theme never means leaving Light mode; Appearance beside it picks the one in use, or Auto to follow the system.

Appearance settings with theme list and editor

Themes

Four ship with the app: Default Light, Default Dark, and two more dark ones, Dracula and Nord. One theme carries the editor and syntax colors, the data grid colors, the interface colors, and both fonts.

The list groups them into Built-in, Registry, and Custom, and shows the ones that suit the slot you are editing plus whatever that slot already holds. Click a row to assign it; it applies at once if that slot is the one in use.

The editor on the right always edits the active theme, not the row you highlighted. Switch Editing to the slot in use before you change a font or a color, or the change lands on the other theme.

Control	What it does
+ menu	New Theme copies the active theme; Import… reads a theme JSON file
- button	Deletes the selected theme. Custom themes only
Gear menu	Duplicate and Export… act on the active theme; Uninstall removes the selected registry theme

A built-in or registry theme is read-only, so the first change forks it. Changing a font makes “Name (Custom)” and edits that; Duplicate, New Theme, and the Duplicate Theme button on the Colors tab make “Name (Copy)” for you to edit.

Fonts

The pickers list the monospaced families installed on your Mac; the preview renders a sample query in the theme’s own editor colors.

Setting	Options	Default	Applies to
Editor Font	Family + size, 11 to 18 pt	System Mono, 13 pt	SQL editor and the JSON viewer’s Text mode
Data Grid Font	Family + size, 10 to 18 pt	System Mono, 13 pt	Grid cells, the inspector, the cell popovers and the Compare row diff

Colors

Custom themes get color wells here. A built-in or registry theme shows a lock and a Duplicate Theme button instead.

Group	Controls
Editor	Background, text, cursor, current line, selection, line number, invisibles
Syntax Colors	Keyword, string, number, comment, NULL, operator, function, type
Data Grid	Background, text, alternate row, NULL value, bool true/false, row number, modified/inserted/deleted rows, deleted text
Interface	Window, control, and card backgrounds, border, primary/secondary/tertiary text, selection, hover
Status Colors	Success, warning, error, info
Badges	Badge background, primary key, auto increment
Sidebar	Background, text, selected item, hover, section header
Toolbar	Secondary and tertiary text

Interface, Sidebar, and Toolbar colors sit on macOS system colors until you override one, which is why an untouched theme follows your system accent color. So do the grid’s background, text, alternate row, NULL value, and row number. Bool true and false show in the grid’s text color until you set them. An overridden well grows a reset button that puts the system color back.

Theme files

A theme is one JSON file. Export… in the gear menu writes every color the active theme sets, which is the shortest way to start a new one; Import… in the + menu reads one back into ~/Library/Application Support/TablePro/Themes/. Community themes install from the registry under Settings > Plugins > Browse, Themes category.

Key	Holds
id, name, author	Identity. An id that collides with a built-in, a registry theme, or one you already have is replaced on import
version	Format version, 1
appearance	light, dark, or auto. Decides which slot lists the theme; auto lists in both
editor	Editor colors, with syntax colors nested under syntax
dataGrid	Grid colors
ui	Interface colors, with status and badges nested
sidebar, toolbar	Sidebar and toolbar colors
fonts	editorFontFamily, editorFontSize, dataGridFontFamily, dataGridFontSize

{
  "id": "user.midnight",
  "name": "Midnight",
  "version": 1,
  "appearance": "dark",
  "author": "You",
  "editor": {
    "background": "#2E3440",
    "text": "#D8DEE9",
    "currentStatementHighlight": "#FFFFFF0F",
    "syntax": { "keyword": "#81A1C1", "string": "#A3BE8C" }
  },
  "fonts": { "editorFontFamily": "System Mono", "editorFontSize": 13 }
}

Colors are sRGB hex, #RRGGBB or #RRGGBBAA for a translucent overlay such as a selection band. A value that is neither renders as the system label color, which is how a typo shows up.

Every key is optional. A group you leave out falls back to Default Light. A color left out of ui, sidebar, or toolbar is the macOS system color rather than a fixed value, and so is a dataGrid background, text, alternateRow, nullValue, or rowNumber. A missing boolTrue or boolFalse uses the grid’s text color.

Connection colors

Assign one in the connection form under Customization > Appearance > Color: None, Red, Orange, Yellow, Green, Blue, Purple, Pink, or Gray. With None, no color cue appears. Connection groups take a color the same way, from their right-click menu on the welcome window.

In the workspace rail the color is a dot on the corner of the database icon, and it stays visible on the selected row. In the welcome window list, the connection switcher and the query history drawer, it is a dot beside the name. The color’s name is in the connection’s tooltip and its VoiceOver label.

The database icon keeps its engine’s own color everywhere, whichever color the connection carries.

Use red for production databases as a visual reminder to be careful with queries.

Connection color in the workspace rail and the welcome list