Skip to main content

themesModule

MS Code Extension API

MS Code Extension API / core/extensionAPI/modules/themesModule

core/extensionAPI/modules/themesModule

Functions​

createThemesModule()​

createThemesModule(extId): object

Defined in: core/extensionAPI/modules/themesModule.ts:89

Mango Studio Theme Extension API​

Extension developers can contribute beautiful themes to Mango Studio in three flexible ways. Choose the method that best fits your extension's workflow:

Method 1: Contribution (The Declarative No-Code Way)​

This follows the standard VS Code approach. No JavaScript or TypeScript logic is required. The editor automatically reads your manifest.json at boot time to register the theme asset path.

Manifest Approach

This is the recommended approach for static theme distributions.

manifest.json
{
"id": "my-studio.ocean-blue",
"version": "1.0.0",
"contributes": {
"themes": [
{
"label": "Ocean Blue",
"uiTheme": "vs-dark",
"path": "./themes/ocean-blue.json"
}
]
}
}

Method 2: mscode.themes.register() (In-Memory Runtime Registration)​

Use this when your theme is defined dynamically as a Type-Safe JavaScript/TypeScript object already loaded or generated in memory.

extension.js
import oceanBlueTheme from './themes/ocean-blue.js';
* export function activate(mscode) {
// Pass the theme object directly into the registry
const disposable = mscode.themes.register(oceanBlueTheme);
* // Ensure the theme is unmounted when the extension is deactivated
return {
deactivate: () => disposable.dispose()
};
}

Method 3: mscode.themes.registerFromJson() (Remote & File-System Streams)​

Ideal for advanced use cases where themes are fetched dynamically from a remote database/API or read as raw text streams from the local file system. This method handles parsing safely.

Pro Tip

Use this to build extensions like "Daily Theme Updates" or cloud-synced themes!

extension.js
export async function activate(mscode) {
try {
// Example: Fetching from a remote server/database
const response = await fetch('[https://api.my-studio.com/daily-theme.json](https://api.my-studio.com/daily-theme.json)');
const rawData = await response.text();

// Registrations accept both raw stringified JSON or parsed structures
const disposable = mscode.themes.registerFromJson(rawData);
* return {
deactivate: () => disposable.dispose()
};
} catch (err) {
console.error("Failed to load dynamic theme", err);
}
}

Parameters​

extId​

string

Returns​

object

themes​

themes: object

themes.getActiveThemeId​

getActiveThemeId: () => string

Returns the unique ID of the currently active theme.

Returns​

string

The active theme ID.

themes.getAll​

getAll: () => ThemeRegistryEntry[]

Retrieves a list of all registered themes (built-in and extension-contributed).

Returns​

ThemeRegistryEntry[]

Array of theme definitions.

themes.onDidChangeColorTheme​

onDidChangeColorTheme: (callback) => () => void

Parameters​
callback​

(themeId) => void

Returns​

() => void

themes.register​

register: (def) => object

Registers a pre-defined TypeScript/JavaScript theme object.

Parameters​
def​

ThemeDefinition

The theme definition object.

Returns​

object

A disposable object to unregister the theme on deactivation.

dispose​

dispose: () => void

Returns​

void

themes.registerFromJson​

registerFromJson: (json) => object

Registers a theme from a raw JSON string or object.

Parameters​
json​

string | object

A valid theme JSON string or object.

Returns​

object

A disposable object to unregister the theme.

dispose​

dispose: () => void

Returns​

void

themes.setTheme​

setTheme: (id) => void

Switches the editor to a registered theme.

Parameters​
id​

string

The unique ID of the theme to apply.

Returns​

void