Themes & appearance
Switch between 9 built-in themes, build custom themes, and scale the UI font.
Tablyne ships with nine built-in themes, a custom-theme editor, and a font-scale control that zooms the entire interface — all under Settings → Appearance (or the quick Appearance menu).
Built-in themes
There are nine presets. Eight are dark; one (Light) is light.
| Theme | Mode |
|---|---|
| Synthwave | dark (default) |
| Dracula | dark |
| Nord | dark |
| Gruvbox | dark |
| Royal Indigo | dark |
| Terminal Amethyst | dark |
| Midnight | dark |
| High-Contrast | dark |
| Light | light |
The active theme affects the whole app, including the data grid and the query/console editors.
Switching themes
There are three places to change theme, and they all take effect instantly:
- Settings → Appearance → Presets tab — a grid of theme previews; click one to apply. The selected theme is marked with a ✓ and shows whether it’s dark or light.
- Appearance menu (in the top bar) — a quick list of every theme with a colored dot for each.
- The theme switcher — a compact dropdown showing the current theme’s color dot and name.
Your choice is saved locally and restored on the next launch.
Custom themes
You can build your own themes from the Custom tab under Settings → Appearance.
Creating a theme
- Go to Settings → Appearance and switch to the Custom tab (labelled My themes).
- Click + create theme. The editor opens pre-filled from your current theme, so you’re tweaking a known-good starting point rather than a blank slate.
- Give it a name, choose dark or light, and set each color token.
- Save. The new theme is applied immediately and added to your theme lists everywhere (Appearance menu, switcher, onboarding).
Color tokens
A theme is ten color tokens. The editor exposes them in this order:
| Token | Role |
|---|---|
bg | App background |
panel | Panel surface |
panel2 | Secondary panel surface |
line | Borders / dividers |
text | Primary text |
muted | Secondary / muted text |
violet | Primary accent |
magenta | Secondary accent |
cyan | Links / highlights |
ok | Success / positive |
The grid derives its own colors from these tokens, so a custom theme styles the data grid too.
Editing and deleting
In the Custom tab, each saved theme has an edit (✎) and delete (×) control. Editing a theme that’s currently active re-applies it live as you save. Deleting the active theme falls back to Synthwave.
Custom themes are stored locally on your machine.
Font & UI scale
Tablyne scales the entire interface like browser zoom — text, spacing, the grid, everything — rather than just changing a font size.
| Control | Where |
|---|---|
| Ctrl++ / Ctrl+− / Ctrl+0 | Keyboard |
A− / A+ / ⟲ | Appearance menu and Settings → Appearance |
The scale ranges from 80% to 160% in 10% steps. The default is 110% — a touch larger than 100%, because the base text reads small at exactly 1.0. The ⟲ button resets to that default. Your scale is remembered between sessions.
Under the hood Tablyne uses the WebView’s native zoom, which behaves correctly with fixed and overlay elements (unlike CSS zoom).
Where it’s all configured
The full appearance controls live in Settings → Appearance: the font-scale row at the top, then a Presets / My themes tab switch with theme previews and the custom-theme editor.
Related
- Settings — every preference, including appearance.
- Language — switch the interface language.
- The interface — where the theme switcher and Appearance menu live.