> ## Documentation Index
> Fetch the complete documentation index at: https://ngquct-feat-721-compare-sync.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Appearance

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

Configure how TablePro looks in **Settings > Appearance** (`Cmd+,`).

<Frame caption="Appearance settings with theme list and editor">
  <img className="block dark:hidden" src="https://mintcdn.com/ngquct-feat-721-compare-sync/Px1jOVnHwSdgRuFN/images/settings-appearance.png?fit=max&auto=format&n=Px1jOVnHwSdgRuFN&q=85&s=2ea6bc30d48fcf6c1689b769acf09bcb" alt="Appearance settings" width="1560" height="960" data-path="images/settings-appearance.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/ngquct-feat-721-compare-sync/Px1jOVnHwSdgRuFN/images/settings-appearance-dark.png?fit=max&auto=format&n=Px1jOVnHwSdgRuFN&q=85&s=0ca8c4e161eac3e2d5a932b993e1727b" alt="Appearance settings" width="1560" height="960" data-path="images/settings-appearance-dark.png" />
</Frame>

## Themes

Four themes ship with the app: Default Light, Default Dark, Dracula (dark), and Nord (dark). A theme controls editor and syntax colors, data grid colors, interface colors, and the editor and data grid fonts. Interface colors default to macOS system colors, so they follow the system appearance and accent color unless a theme overrides them.

### Appearance Mode

Two segmented controls sit at the top of the tab. **Appearance** picks Light, Dark, or Auto; Auto follows the system and switches between the two. **Editing** picks which slot the theme list writes to, Light or Dark, so you can set your dark theme without leaving Light mode. It starts on the slot in use. Light and Dark each keep their own theme.

### Theme List

Below the controls, the tab is a split view:

* **Left**: theme list grouped into Built-in, Registry, and Custom. Each row shows a preview thumbnail, name, and source. Selecting a theme assigns it to the slot named in the **Editing** control, and it applies right away if that slot is the one in use.
* **Right**: the editor, with **Fonts** and **Colors** tabs. It always edits the active theme, not the highlighted row, so switch **Editing** to the slot in use before you change fonts or colors.

The action bar below the list:

| Button        | Action                                                                                         |
| ------------- | ---------------------------------------------------------------------------------------------- |
| **+** menu    | New Theme (duplicates the active theme), Import...                                             |
| **-** button  | Delete the selected theme. Enabled only for custom themes.                                     |
| **Gear** menu | Duplicate and Export... act on the active theme; Uninstall removes the selected registry theme |

## Fonts

The **Fonts** tab sets the editor and data grid fonts per theme. Family pickers list the monospaced fonts installed on your Mac, and a preview renders a sample query with the theme's editor colors.

| Setting        | Options                    | Default            |
| -------------- | -------------------------- | ------------------ |
| Editor Font    | Family + size, 11 to 18 pt | System Mono, 13 pt |
| Data Grid Font | Family + size, 10 to 18 pt | System Mono, 13 pt |

Changing a font on a built-in theme does not modify the original: TablePro creates a copy named "Theme (Custom)" and applies the change there.

## Colors

The **Colors** tab is editable only on custom themes. Built-in and registry themes show a lock and a **Duplicate Theme** button; the copy (named "Theme (Copy)") is fully editable.

| 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, focus border |
| 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 fall back to macOS system colors until you override them. Overridden values show a reset button that restores the system default.

## Import, Export & Registry

Export the active theme as JSON from the gear menu; import a JSON theme from the **+** menu. Community themes install from the [plugin registry](/features/plugins) (**Settings > Plugins > Browse**, Themes category). Colors on registry themes are locked, same as built-ins: duplicate the theme to edit them. Remove a registry theme with the gear menu's **Uninstall**.

## Connection Colors

Assign a color to a connection in the connection form: **Customization > Appearance > Color**. Nine options: None, Red, Orange, Yellow, Green, Blue, Purple, Pink, Gray. With no color set, the connection uses its database type's brand color, supplied by the driver plugin. Connection groups take a color the same way, from their right-click menu on the welcome window.

The color appears on:

* The toolbar connection status indicator
* The connection switcher popover
* The sidebar connection header
* The welcome window connection list

<Tip>
  Use red for production databases as a visual reminder to be careful with queries.
</Tip>

<Frame caption="Connection color on the toolbar status indicator and welcome list">
  <img className="block dark:hidden" src="https://mintcdn.com/ngquct-feat-721-compare-sync/TlGri84ui62H4Saf/images/connection-colors-sidebar.png?fit=max&auto=format&n=TlGri84ui62H4Saf&q=85&s=8008f4c9bb8a22726a07923d5de8c56c" alt="Connection colors in the toolbar and welcome list" width="1560" height="960" data-path="images/connection-colors-sidebar.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/ngquct-feat-721-compare-sync/TlGri84ui62H4Saf/images/connection-colors-sidebar-dark.png?fit=max&auto=format&n=TlGri84ui62H4Saf&q=85&s=46c24b0bae52565606f4c902b051ef97" alt="Connection colors in the toolbar and welcome list" width="1560" height="960" data-path="images/connection-colors-sidebar-dark.png" />
</Frame>
