> ## Documentation Index
> Fetch the complete documentation index at: https://ngquct-docs-fix-500-query-results.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
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. 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 |
| -------------- | -------------------------- | ------------------ |
| 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 |
## 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, 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 sit on macOS system colors until you override one, which is why an untouched theme follows your system accent color. 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 the active theme with every key filled in, 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 |
| ---------------------- | ---------------------------------------------------------------------------------------------------------------- |
| `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` |
```json theme={null}
{
"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, and a color left out of `ui`, `sidebar`, or `toolbar` is the macOS system color rather than a fixed value.
## Connection colors
Assign one in the connection form under **Customization > Appearance > Color**: None, Red, Orange, Yellow, Green, Blue, Purple, Pink, or Gray. With None, the connection takes its database type's brand color from the driver plugin. Connection groups take a color the same way, from their right-click menu on the welcome window.
The color shows on the toolbar connection status indicator, the connection switcher popover, the sidebar connection header, and the welcome window list.
Use red for production databases as a visual reminder to be careful with queries.
