Editor and terminal

A theme sets the appearance of the code editor and terminal. Shell behavior, keyboard shortcuts and indentation belong to separate application settings.

Complete example

Save this document as theme.jsonc in a reading-room folder, import the folder in Settings > Themes > Colors, then choose Use theme. The same file is in examples/reading-room. It needs no additional assets.

{
  "version": 2,
  "name": "Reading Room",
  "appearance": "adaptive",
  "common": {
    "editor": {
      "fontFamily": "\"JetBrains Mono\", monospace",
      "fontSize": 15,
      "syntax": {
        "comment": {
          "fontStyle": "italic"
        },
        "keyword": {
          "fontWeight": 600
        },
        "link": {
          "textDecoration": "underline"
        }
      }
    },
    "terminal": {
      "fontSize": 14,
      "lineHeight": 1.3,
      "cursorStyle": "bar",
      "cursorBlink": false,
      "colors": {
        "cursor": "var(--color-primary)"
      }
    }
  },
  "light": {
    "editor": {
      "colors": {
        "background": "#fafafa",
        "foreground": "#202020",
        "selection": "#d8e7ef"
      },
      "syntax": {
        "comment": {
          "color": "#626c72"
        }
      }
    },
    "terminal": {
      "colors": {
        "background": "#fafafa",
        "foreground": "#202020"
      }
    }
  },
  "dark": {
    "editor": {
      "colors": {
        "background": "#14171a",
        "foreground": "#e5e9ed",
        "selection": "#344651"
      },
      "syntax": {
        "comment": {
          "color": "#929da5"
        }
      }
    },
    "terminal": {
      "colors": {
        "background": "#14171a",
        "foreground": "#e5e9ed"
      }
    }
  }
}

Comments are italic in both modes because fontStyle comes from common. Their color comes from light or dark. Unspecified terminal ANSI colors still use the baseline palette.

Editor colors and typography

Field in editor.colors	Purpose
background, foreground	Code surface and ordinary text.
gutterBackground, gutterForeground	Line-number gutter background and text.
activeLine	Active line and its number; the code surface blends this color with transparency.
selection	Selection; an unfocused editor can display a muted version.
cursor	Editor caret.

fontSize is a number in pixels, such as 15, not the string "15px". fontFamily is a CSS family list. Naming a font does not install it. Choose an available font or bundle it using the resource guide.

Set line height and spacing with --editor-line-height, --editor-content-padding and --editor-line-padding; these are not separate editor fields.

Every syntax category

Lomi uses CodeMirror/Lezer categories. The language parser determines which category a piece of text belongs to. Not every language distinguishes every category.

Name	Styles
keyword	Keywords, modifiers and word operators.
string	Strings, regular expressions, attribute values and inline monospace text.
number	Numbers, booleans, null and atoms.
comment	Comments and parser metadata tags.
type	Types, classes, namespaces and markup tag names.
function	Function names identified by the parser.
variable	Variable names.
property	Object properties and markup attribute names.
operator	Symbolic operators.
punctuation	Punctuation.
heading	Document headings.
strong	Strong emphasis.
emphasis	Emphasized text.
link	Links.
invalid	Tokens the parser marks as invalid.

Each category accepts color, fontStyle, fontWeight and textDecoration. Allowed values are in the reference. A custom theme without syntax settings receives the runtime’s default styles; to preserve DeepMono’s exact syntax styling, start by choosing Duplicate on that theme. The editor’s very-large-file mode omits this syntax-highlighting layer.

Terminal palette and cursor

terminal.colors covers background, text, selections, cursor, 16 ANSI colors and search decorations. cursor colors the cursor; cursorAccent colors text under a block cursor. selectionForeground changes selected text; omitting it retains inherited behavior. searchMatch* covers matches and searchActiveMatch* the current match.

In the theme editor, choose Load terminal presets, then a palette. terminal.preset requires an exact name from that list. The preset is loaded first, then explicit terminal.colors are applied. An unknown preset prevents preview and application.

cursorWidth sets the width of a bar cursor. cursorInactiveStyle applies to an unfocused terminal. drawBoldTextInBrightColors affects the use of bright ANSI colors for bold text. minimumContrastRatio can adjust rendered text colors to increase contrast. All number ranges and 27 color names are in the terminal reference.

When user preferences take precedence

In Settings > Terminal, users can override individual appearance values. Resetting a field restores its theme value. Reset defaults resets terminal settings more broadly, so use the individual field reset when checking one color.

Themes update open terminal and editor instances. They do not start a new shell or discard undo history. The theme editor preview affects only its Settings window; inspect the actual terminal after saving and selecting the theme.

Sources: editor.ts, runtime.ts, TerminalSettingsPage.tsx.