CODEWITHSUNDEEP
typescriptnext.jscustomizationmonaco-editor
Tata Choudhary
Tata Choudhary

Reputation: 69

How do I customize themes in monaco editor

I am currently making a code editor with Monaco. Javascript and typescript syntax highlighting in Monaco only highlights keywords like dark blue, string as brown, and number as light greenish yellow.

I want to customize the vs-dark theme such that variables are marked with light blue, types are dark green, and functions with yellow. Will this work :

monaco.editor.defineTheme('default', {
    base: 'vs-dark',
    inherit: true,
    rules: [
      {
        token: "identifier",
        foreground: "#9CDCFE"
      },
      {
        token: "identifier.function",
        foreground: "#DCDCAA"
      },
      {
        token: "type",
        foreground: "#1AAFB0"
      },
    ],
    colors: {}
    });
monaco.editor.setTheme('default')

If possible, please give me a list of all such tokens to help me customize even more.

Upvotes: 2

Views: 15364

Answers (1)

waterstopper
waterstopper

Reputation: 588

Yes, it is partially possible. Unfortunately, I don't think you can highlight function names separately from variables (I didn't find it). But you can create your custom tokenizer for JS (which I think is an overkill) to support different color for function names.

Here is a monaco-editor playground link with your theme.

Also, there is a repository with different monaco-editor themes to try, you can look for other customizable tokens there.

Upvotes: 3

Related Questions