Themes

Apply editor and syntax colours with an EditorTheme. You need the core stylesheet and a mounted editor.

1. Set the editor colours

import { Editor } from '@singapore-editor/core/editor'import type { EditorTheme } from '@singapore-editor/core/rendering'import '@singapore-editor/core/style.css'const theme: EditorTheme = {  type: 'dark',  backgroundColor: '#18202b',  foregroundColor: '#dce5ef',  caretColor: '#a4d7c2',  selectionColor: '#315066',}const editor = new Editor(document.querySelector<HTMLElement>('#editor')!, { theme })editor.setText('Hello, theme\n')

2. Convert existing VS Code colours

The /shiki entry point converts VS Code theme definitions. It supplies theme colours; language features still come from plugins.

import { editorThemeFromVscodeTheme } from '@singapore-editor/core/shiki'const theme = editorThemeFromVscodeTheme({  colors: { 'editor.background': '#18202b', 'editor.foreground': '#dce5ef' },})console.log(theme)

3. Update a mounted editor

Call editor.setTheme(theme). React and Solid adapters accept theme options that update the live view. Plugin colour ids use the theme's colors map. registerEditorColor in the rendering entry point declares a token and its defaults for a plugin.

Result

Editor background, foreground, selection and caret use the supplied colours. Add a syntax plugin for token colours. Syntax paint uses ::highlight(), which supports colour but cannot set font weight or font style.

If it doesn't work

The gutter has a different background

Set gutter colour options and check your plugin stylesheet imports. gutterLeadingInset controls the gutter's leading space.

Syntax colours never change

Check that the syntax plugin has loaded its language and that your theme supplies syntax colours for the token categories it produces.

Continue with languages and tree-sitter and the generated rendering reference.