Color Theme Sample - uCodeEditor

Color Themes

uCodeEditor supports below themes for now:

  • Visual Studio
  • Visual Studio Dark
  • Monokai
  • Material Palenight
  • Monokai One

And we can add a new color theme using json file, see the monokai sample (the monokai.json file) in package.

Monokai.json

{
    "name": "Monokai",
    "type": "dark",
    "colors": {
        "foreground": "#ddffff",
        "focusBorder": "#00f9ff",
        "dropdown.background": "#383852",
        "list.inactiveFocusBackground": "#303052",
        "list.activeSelectionBackground": "#303070",
        "list.focusBackground": "#394770",
        "list.focusAndSelectionBackground": "#383852",
        "list.inactiveSelectionBackground": "#303d45",
        "list.hoverBackground": "#005070",
        "list.dropBackground": "#505590",
        "button.background": "#5088a3",
        "button.hoverBackground": "#6099a3",
        "editor.background": "#272822",
        "editor.foreground": "#f8f8f2",
        "editor.selectionBackground": "#49483e",
        "editor.lineHighlightBackground": "#3e3d32",
        "editor.cursor": "#f8f8f0",
        "editor.whitespaces": "#383880",
        "editor.indentGuides": "#505037"
    },
    "rules": [
        { "token": "comment", "foreground": "75715e" },
        { "token": "string", "foreground": "e6db74" },
        { "token": "punctuation.definition.template-expression", "foreground": "f92672" },
        { "token": "constant.numeric", "foreground": "ae81ff" },
        { "token": "constant.language", "foreground": "ae81ff" },
        { "token": "constant.character", "foreground": "ae81ff" },
        { "token": "constant.other", "foreground": "ae81ff" },
        { "token": "keyword", "foreground": "f92672" },
        { "token": "storage", "foreground": "aae354" },
        { "token": "storage.type", "foreground": "66d9ef", "fontStyle": "italic" },
        { "token": "entity.name.type", "foreground": "a6e22e", "fontStyle": "underline" },
        { "token": "entity.name.class", "foreground": "a6e22e", "fontStyle": "underline" },
        { "token": "entity.other.inherited-class", "foreground": "a6e22e", "fontStyle": "italic underline" },
        { "token": "entity.name.function", "foreground": "a6e22e" },
        { "token": "entity.name.tag", "foreground": "f92672" },
        { "token": "entity.other.attribute-name", "foreground": "a6e22e" },
        { "token": "variable", "foreground": "f8f8f2" },
        { "token": "variable.parameter", "foreground": "fd971f", "fontStyle": "italic" },
        { "token": "variable.other.const", "foreground": "eaebf2" },
        { "token": "support.function", "foreground": "66d9ef" },
        { "token": "support.constant", "foreground": "66d9ef" },
        { "token": "support.type", "foreground": "66d9ef" },
        { "token": "support.class", "foreground": "66d9ef", "fontStyle": "italic" },
        { "token": "invalid", "foreground": "f8f8f0", "background": "F92672" },
        { "token": "invalid.deprecated", "foreground": "f8f8f0", "background": "AE81FF" },
        { "token": "meta.diff", "foreground": "75715e" },
        { "token": "meta.diff.header", "foreground": "75715e" }
    ]
}