Build your own theme.

A theme is a single JSON file. Copy the example below, rename it, edit the values, then reload themes from Settings → Themes to preview it locally.

download Download example file storefront Browse the theme store
my-theme.json 
{
  "_comment": "This is an example theme. Copy this file, rename it (e.g. my-theme.json), edit the values, and reload themes in Settings. Remove this _comment field.",
  "id": "my-custom-theme",
  "label": "My Custom Theme",
  "preview": [
    "#1a1a2e",
    "#e94560",
    "#0f3460",
    "#a8b2d8"
  ],
  "terminal": {
    "background": "#1a1a2e",
    "foreground": "#a8b2d8",
    "cursor": "#e94560",
    "selectionBackground": "#0f3460"
  },
  "accent": "#e94560",
  "bg": "#1a1a2e",
  "bgSidebar": "#16213e",
  "bgCard": "#0f3460",
  "isLight": false,
  "vars": {
    "--bg-card-hover": "#1a3a6e",
    "--bg-input": "#16213e",
    "--bg-elevated": "#0f3460",
    "--border": "#e9456033",
    "--border-subtle": "#0f3460",
    "--text": "#a8b2d8",
    "--text-2": "#6b7db3",
    "--text-3": "#3d4f7c",
    "--success": "#34c97b",
    "--warning": "#f4a825",
    "--danger": "#f04f62"
  }
}

Field reference

id / label
Unique slug and the display name shown in the theme picker.
preview
4 hex colors used for the small swatch in theme lists — typically bg, accent, card, text.
terminal
Colors applied to the xterm.js instance: background, foreground, cursor, selection.
bg / bgSidebar / bgCard
Base surface colors for the app shell outside the terminal itself.
isLight
Tells the UI whether to use light or dark icon/contrast defaults.
vars
Raw CSS custom properties, applied directly — covers hover states, borders, text tiers, and status colors.