Themes

Syncline Editor ships with 6 polished built-in themes and a full API for registering and switching your own.

Built-in Themes

VR Dark

Default

vr-dark

Deep charcoal background with violet accents — the default Syncline theme.

VS Code Dark+

Popular

vscode-dark

Matches Visual Studio Code's shipped Dark+ colour theme exactly.

Monokai

monokai

The iconic bright palette from Sublime Text.

Dracula

dracula

Dark theme with a purple palette — a fan favourite.

GitHub Light

Light

github-light

GitHub's official light theme as used on github.com code views.

Solarized Light

Light

solarized-light

Ethan Schoonover's classic low-contrast light palette.

Switching Themes

Use editor.setTheme(id) to switch at any time. The change applies instantly — no flicker, no repaint loop:

switch-theme.ts

// Set a built-in theme by ID
editor.setTheme('monokai');
editor.setTheme('github-light');
editor.setTheme('dracula');

// getThemes() lists everything that is registered
const all = editor.getThemes();
// ['vr-dark', 'vscode-dark', 'monokai', 'dracula', 'github-light', 'solarized-light']

console.log(all);

Custom Themes

Define a ThemeDefinition object and register it once with editor.registerTheme(). The theme is then available by its id across all editor instances:

nord-theme.ts

import { createEditor, type ThemeDefinition } from '@synclineapi/editor';

const myTheme: ThemeDefinition = {
  id: 'nord',
  displayName: 'Nord',
  background: '#2e3440',
  foreground: '#d8dee9',
  selection: 'rgba(163, 190, 140, 0.2)',
  cursor: '#88c0d0',
  lineHighlight: 'rgba(255,255,255,0.04)',
  gutterBackground: '#2a303c',
  gutterForeground: '#4c566a',
  gutterBorder: '#3b4252',
  statusBarBackground: '#3b4252',
  statusBarForeground: '#d8dee9',
  scrollbarThumb: 'rgba(255,255,255,0.12)',
  minimapBackground: '#272c36',
  tokenColors: {
    keyword: '#81a1c1',
    string: '#a3be8c',
    number: '#b48ead',
    comment: '#616e88',
    function: '#88c0d0',
    type: '#8fbcbb',
    variable: '#d8dee9',
    operator: '#81a1c1',
    property: '#d8dee9',
    tag: '#81a1c1',
    attribute: '#8fbcbb',
    namespace: '#8fbcbb',
    decorator: '#88c0d0',
    constant: '#b48ead',
  },
};

// Register once — available to all instances
editor.registerTheme(myTheme);
editor.setTheme('nord');

Token Colour Overrides

For lightweight adjustments — changing a handful of colours without writing a full theme — pass a tokenColors map:

token-overrides.ts

// Lightweight per-token overrides — no need to define a full theme.
// Colours are merged on top of the active theme.
const editor = createEditor(container, {
  theme: 'vscode-dark',
  tokenColors: {
    keyword: '#ff79c6',  // override keyword colour only
    string:  '#f1fa8c',
    comment: '#6272a4',
  },
});

// Also available at runtime
editor.updateConfig({
  tokenColors: { keyword: '#c792ea' },
});

TokenColors Keys

Key	Description
`keyword`	Language keywords — if, return, const…
`string`	String and template literals.
`number`	Numeric literals.
`comment`	Line and block comments.
`function`	Function and method identifiers.
`type`	Type names, interfaces, classes.
`variable`	Variable identifiers.
`operator`	Operators and punctuation.
`property`	Object property accesses.
`tag`	HTML/JSX tag names.
`attribute`	HTML/JSX attribute names.
`namespace`	Module / namespace identifiers.
`decorator`	Decorator expressions.
`constant`	Compile-time constant identifiers.

Configuration

Autocomplete

Docs Playground npm