Skip to main content
Summon logo
Summon

Themes

Summon supports extensive visual customization through themes. Choose from built-in themes or create your own to match your workflow and preferences.

Built-in Themes

Summon includes several carefully designed themes:

Dark Themes

| Theme | Description | |-------|-------------| | Midnight | Pure dark with subtle accents | | Nord | Cool blue-grey color palette | | Dracula | Purple and pink accents | | One Dark | Atom-inspired colors | | Tokyo Night | Dark purple-blue gradients |

Light Themes

| Theme | Description | |-------|-------------| | Light | Clean minimal light theme | | Paper | Warm off-white background | | Solarized Light | Easy on the eyes |

Changing Themes

  1. Open Settings → Appearance
  2. Browse the theme grid
  3. Click a theme to apply
  4. Changes apply immediately

Or use the keyboard:

  • ⌘ + , to open Settings
  • Navigate to Appearance tab
  • Use arrow keys to browse
  • Press Enter to apply

Custom Themes

Create your own themes by customizing colors:

Theme Properties

| Property | Description | |----------|-------------| | background | Main window background | | surface | Card and panel backgrounds | | surfaceHover | Hover state backgrounds | | border | Border colors | | text | Primary text color | | textSecondary | Secondary/muted text | | accent | Highlight and focus color | | selection | Selected item background |

Creating a Theme

  1. Go to Settings → Appearance
  2. Click "Create Theme"
  3. Set your colors using the color picker
  4. Name your theme
  5. Click "Save"

Example: Custom Theme

JSON
{
  "name": "My Custom Theme",
  "colors": {
    "background": "#1a1a2e",
    "surface": "#16213e",
    "surfaceHover": "#1f2b4a",
    "border": "#e94560",
    "text": "#eaeaea",
    "textSecondary": "#9a9a9a",
    "accent": "#e94560",
    "selection": "#e9456020"
  }
}

Additional Options

Window Appearance

| Setting | Description | |---------|-------------| | Window width | Main window width (400-800px) | | Window blur | Background blur intensity | | Window shadow | Drop shadow size | | Corner radius | Window corner roundness |

Typography

| Setting | Description | |---------|-------------| | Font family | Choose from system fonts | | Font size | Base text size | | Line height | Text line spacing |

Effects

| Setting | Description | |---------|-------------| | Animations | Enable/disable animations | | Reduced motion | Respect system preference | | Vibrancy | macOS vibrancy effect |

Importing & Exporting

Export Theme

  1. Go to Settings → Appearance
  2. Right-click on a custom theme
  3. Select "Export"
  4. Save as .json file

Import Theme

  1. Go to Settings → Appearance
  2. Click "Import Theme"
  3. Select your .json file
  4. Theme appears in your list

Sharing Themes

Share themes with others by:

  • Exporting and sending the JSON file
  • Sharing color codes for manual recreation
  • Publishing to the community (coming soon)

Tips

Match Your Terminal

If you use iTerm2, Terminal, or Alacritty, match Summon's theme to your terminal for a consistent experience.

Time-Based Themes

macOS can switch between light and dark mode automatically. Summon follows your system preference when set to "Auto".

Per-Display Themes

If you have multiple displays with different lighting conditions, consider using themes optimized for each.

Accessibility

  • Ensure sufficient color contrast
  • Use the high contrast option if needed
  • Test themes with different content types

Resetting

To reset to the default theme:

  1. Go to Settings → Appearance
  2. Select "Midnight" (default)

Or reset all appearance settings:

  1. Go to Settings → Appearance
  2. Click "Reset All" at the bottom