> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tablepro.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Appearance

> Theme engine with built-in presets, custom themes, color and font customization, import/export

# Appearance Settings

Configure how TablePro looks in **Settings** > **Appearance**.

<Frame caption="Appearance settings with theme editor">
  <img className="block dark:hidden" src="https://mintlify.s3.us-west-1.amazonaws.com/ngquct/images/settings-appearance.png" alt="Appearance settings" />

  <img className="hidden dark:block" src="https://mintlify.s3.us-west-1.amazonaws.com/ngquct/images/settings-appearance-dark.png" alt="Appearance settings" />
</Frame>

## Theme Engine

TablePro ships with 9 built-in themes and supports custom themes. Community themes are available from the plugin registry. Each theme controls editor syntax colors, data grid colors, sidebar/toolbar styling, and fonts. UI colors use native macOS semantic colors by default, adapting automatically to system appearance, accent color, and high contrast settings.

### Theme Editor Layout

The Appearance tab is a split view with two panels:

* **Left panel**: Sections for "Built-in", "Registry", and "Custom". Each row shows a color thumbnail, theme name, and source label. Select a theme to activate and edit it.
* **Right panel**: Two tabs: Fonts and Colors.

At the bottom of the sidebar, an action bar provides:

| Button        | Action                                                            |
| ------------- | ----------------------------------------------------------------- |
| **+** menu    | New Theme, Import...                                              |
| **-** button  | Delete selected theme (disabled for built-in and registry themes) |
| **Gear** menu | Duplicate, Export..., Uninstall (registry themes only)            |

### Built-in Themes

| Theme               | Appearance | Based On                     |
| ------------------- | ---------- | ---------------------------- |
| **Default Light**   | Light      | macOS system colors          |
| **Default Dark**    | Dark       | macOS system colors          |
| **Dracula**         | Dark       | Dracula color scheme         |
| **Solarized Light** | Light      | Ethan Schoonover's Solarized |
| **Solarized Dark**  | Dark       | Ethan Schoonover's Solarized |
| **One Dark**        | Dark       | Atom One Dark                |
| **GitHub Light**    | Light      | GitHub UI                    |
| **GitHub Dark**     | Dark       | GitHub UI                    |
| **Nord**            | Dark       | Arctic north-bluish palette  |

### Appearance Mode

Pick **Light**, **Dark**, or **Auto** at the top. Light and Dark each store a separate preferred theme. Auto follows the system and switches between the two automatically.

When you select a theme from the list, it becomes the preferred theme for that theme's appearance (light or dark). Selecting a dark theme while in Light mode switches to Dark mode so you see the change right away.

<Frame caption="Light vs Dark theme">
  <img className="block dark:hidden" src="https://mintlify.s3.us-west-1.amazonaws.com/ngquct/images/theme-comparison.png" alt="Theme comparison" />

  <img className="hidden dark:block" src="https://mintlify.s3.us-west-1.amazonaws.com/ngquct/images/theme-comparison-dark.png" alt="Theme comparison" />
</Frame>

## Customizing Themes

Select a theme and edit directly. Built-in themes auto-duplicate when you change colors, preserving the original. Font changes apply without duplication, and font family pickers list installed monospaced fonts from your Mac. Interface colors (text, backgrounds, borders) default to macOS system colors and show a reset button when overridden.

## Import, Export & Registry

Export custom themes as JSON. Import from files or install from the plugin registry (**Settings > Plugins > Browse**, filter by Themes). Registry themes are read-only; duplicate to customize.

## Connection Colors

Color-code connections for quick identification:

| Color  | Suggested Use        |
| ------ | -------------------- |
| None   | Default, neutral     |
| Red    | Production databases |
| Orange | Staging environments |
| Yellow | Testing databases    |
| Green  | Development/local    |
| Blue   | Shared databases     |
| Purple | Special purpose      |
| Pink   | Personal projects    |

### Setting Connection Color

1. Open the connection form (edit or create)
2. In the **Appearance** section, click **Color**
3. Select a color from the palette
4. Save the connection

<Frame caption="Connection color picker">
  <img className="block dark:hidden" src="https://mintlify.s3.us-west-1.amazonaws.com/ngquct/images/connection-colors.png" alt="Connection colors" />

  <img className="hidden dark:block" src="https://mintlify.s3.us-west-1.amazonaws.com/ngquct/images/connection-colors-dark.png" alt="Connection colors" />
</Frame>

### Connection Color Display

Connection colors show up in:

* Sidebar connection list
* Tab headers
* Connection status bar
* Window title (when connected)

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

<Frame caption="Connection colors displayed in sidebar and tabs">
  <img className="block dark:hidden" src="https://mintlify.s3.us-west-1.amazonaws.com/ngquct/images/connection-colors-sidebar.png" alt="Connection colors in sidebar and tabs" />

  <img className="hidden dark:block" src="https://mintlify.s3.us-west-1.amazonaws.com/ngquct/images/connection-colors-sidebar-dark.png" alt="Connection colors in sidebar and tabs" />
</Frame>

## Database Type Colors

Each database type has a fixed color for quick identification:

| Database   | Color  |
| ---------- | ------ |
| MySQL      | Orange |
| MariaDB    | Cyan   |
| PostgreSQL | Blue   |
| SQLite     | Green  |

These appear on:

* Database type icons
* Connection type indicators
* Sidebar icons

<Frame caption="Database type color coding: MySQL, MariaDB, PostgreSQL, SQLite">
  <img className="block dark:hidden" src="https://mintlify.s3.us-west-1.amazonaws.com/ngquct/images/database-type-colors.png" alt="Database type colors" />

  <img className="hidden dark:block" src="https://mintlify.s3.us-west-1.amazonaws.com/ngquct/images/database-type-colors-dark.png" alt="Database type colors" />
</Frame>