themejson

Themejson, often written as theme.json, is a JSON-based configuration file used by Visual Studio Code and related editors to define a color theme. It serves to specify both the colors of the user interface and the syntax highlighting for the editor in a single, centralized file. Theme authors place the file in a theme package or extension, commonly under a themes directory, and the editor loads it to apply the chosen appearance.

The typical structure of a theme.json file includes a top-level name, a colors object, and a tokenColors array. The colors object maps keys to UI colors, such as editor background and foreground, as well as workbench elements like the activity bar, titles, and borders. The tokenColors array defines syntax coloring by scope or scopes (which can include keywords, strings, comments, and language-specific tokens) and a settings object that specifies foreground, background, and fontStyle. Some themes also support semanticTokenColors to customize colors for semantic tokens provided by the editor’s language services.

Usage in VS Code involves packaging theme.json within an extension or theme package. The extension contributes the theme through its manifest, pointing to the path of the theme.json file. When VS Code starts, it reads the file to render the color theme across the editor and UI. Users can override aspects of the theme using workbench.colorCustomizations or editor.tokenColorCustomizations if supported.

Example (plain text):

{

"name": "Example Theme",

"colors": {

"editor.background": "#1e1e1e",

"editor.foreground": "#d4d4d4"

},

"tokenColors": [

{ "scope": "keyword", "settings": { "foreground": "#569CD6" } },

{ "scope": ["string", "constant.string"], "settings": { "foreground": "#CE9178" } }

]

}

Themejson has become a standard for cohesive theming in code editors, balancing readability and consistency across editor and UI elements.