> ## Documentation Index
> Fetch the complete documentation index at: https://ngquct-fix-structure-editing-per-object-kind.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Appearance
> Themes, color customization, theme files, 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.
## Themes
Four ship with the app: Default Light, Default Dark, and two more dark ones, Dracula and Nord. A theme carries the editor and syntax colors, the data grid colors, and the status colors.
A theme declares whether it is light or dark, and only appears in the matching slot, 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 edits the theme selected in the slot named by **Editing**, so a change always lands on the theme you can see highlighted.
| Control | What it does |
| ------------- | ---------------------------------------------------------------------------------------------------------- |
| **+** menu | **Duplicate Selected** copies the selected theme; **Import…** reads a theme JSON file |
| **-** button | Deletes the selected theme. Custom themes only |
| **Gear** menu | **Duplicate** and **Export…** act on the selected theme; **Uninstall** removes the selected registry theme |
A built-in or registry theme is read-only and shows a **Duplicate Theme** button, which makes "Name (Copy)" for you to edit.
Fonts are not part of a theme. Editor Font lives in [Editor settings](/customization/editor-settings) and Data Grid Font in [Data settings](/customization/data-settings), and both stay on the Mac you set them on.
A theme file the app cannot read is listed under **Not Loaded** with the reason, rather than dropped without a word.
## 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, selection, current line, current statement, line number, invisibles |
| Syntax Colors | Keyword, string, number, comment, NULL, operator, function, type |
| Data Grid | Background, text, alternate row, header background, header text, grid line, selection, selected text, inactive selection, focus border, NULL value, bool true/false, row number, modified/inserted/deleted rows, deleted text |
| Status | Success, warning, error |
A slot holds either a hex color or the name of a macOS system color. Default Light and Default Dark keep the data grid surrounds on system colors, which is why an untouched theme follows your system accent and its Increase Contrast setting. Right-click a well that a built-in leaves on a system color to put that system color back.
## Theme files
A theme is one JSON file. **Export…** in the gear menu writes every color the selected 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](/features/plugins) under **Settings > Plugins > Browse**, Themes category.
| Key | Holds |
| ---------------------- | ---------------------------------------------------------------------------------------------------------------- |
| `schema` | Format version. `2` is the version this release reads |
| `id`, `name`, `author` | Identity. An `id` that collides with a built-in, a registry theme, or one you already have is replaced on import |
| `appearance` | `light` or `dark`. Decides which slot lists the theme |
| `content.editor` | Editor colors, with syntax colors nested under `syntax` |
| `content.dataGrid` | Grid colors |
| `content.status` | Success, warning and error colors |
```json theme={null}
{
"schema": 2,
"id": "user.midnight",
"name": "Midnight",
"author": "You",
"appearance": "dark",
"content": {
"editor": {
"background": "#2E3440",
"text": "#D8DEE9",
"syntax": { "keyword": "#81A1C1", "string": "#A3BE8C" }
},
"dataGrid": { "background": "system:textBackground" },
"status": { "error": "#BF616A" }
}
}
```
A color is sRGB hex, `#RRGGBB` or `#RRGGBBAA` for a translucent overlay such as a selection band, or `system:` followed by a macOS system color name such as `system:textBackground`.
Every color a theme declares must be one TablePro reads, and every color TablePro reads must be present. A file that misses one, names one TablePro does not use, carries a color the app cannot parse, or declares a `schema` this release does not read is refused and listed under **Not Loaded** with the reason. Themes written for an earlier version of TablePro are not read and need to be written again.
## 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.
