Themes & appearance

#Light, dark, or both

In Settings → Appearance, Mode decides when the app is light or dark:

• Sync with OS (default) switches with your system's appearance.
• Light or Dark keeps one.

You pick a dark theme and a light theme separately, so syncing with the OS can, for example, move between One Light by day and Dracula by night.

#Built-in themes

#Small tweaks without a theme

• Accent colour replaces the theme's accent (selection, focus, primary buttons).
• Font size and Zoom make the interface larger or smaller. Zoom also has shortcuts: ⌘ =, ⌘ - and ⌘ 0, or pinch on a trackpad.
• Panel corners go from Square to Very rounded.
• Color Scheme overrides the colour of each kind of SQL token, separately for dark and light themes, and the environment badge colours.
• The SQL editor's font, size and line height are under Settings → SQL Editor.

#Write your own theme

Themes are JSON files in ~/.tablegrip/themes/. Open themes folder in Settings → Appearance takes you there. The folder is watched, so saving a file updates the app while it runs.

The easiest start is Customize current theme: it copies the current built-in family into the folder for you to edit. A theme in the folder with the same name as a built-in one replaces it.

A theme file holds one or more themes, typically a dark and a light one:

{
  "$schema": "https://tablegrip.dev/schema/theme-v1.json",
  "name": "My Theme",
  "author": "me",
  "themes": [
    {
      "name": "My Dark",
      "appearance": "dark",
      "colors": {
        "accent": "#E5C07B",
        "island.background": "#1E1F22"
      },
      "syntax": {
        "keyword": "#CF8E6D",
        "comment": { "color": "#7A7E85", "fontStyle": "italic" }
      },
      "chart": ["#548AF7", "#E5A33E"]
    }
  ]
}

#Rules

• Every key is optional. Anything you leave out comes from the base theme; unknown keys are ignored.
• Colours are #RRGGBB or #RRGGBBAA.
• appearance is dark or light, and decides which theme list the theme appears in.
• A syntax entry is a colour, or an object with color, fontStyle (normal or italic) and fontWeight (normal or bold).
• chart is the list of colours used for chart series, in order.
• A file that can't be read is listed in Settings with its error, and skipped.

#Colour keys

#Syntax keys

keyword, string, number, comment, quotedIdentifier, parameter.