Change Themes and Import a VS Code Theme

Change Themes and Import a VS Code Theme

Markdown Explorer separates the base appearance mode from optional theme plugins. This lets you follow the operating system, choose a stable light or dark mode, or apply a workspace look you prefer.

Choose the base mode

Open Settings and select:

• System to follow the device appearance;
• Light for a bright editor and preview;
• Dark for a low-light workspace.

The choice is stored locally. UI and code font sizes can be adjusted separately when color is not the only readability concern.

Apply a built-in theme

Open Plugins & Themes, select the Themes category, and enable a registered theme such as One Dark Pro or Tokyo Night. Apply the theme after enabling it. Return to the base mode by clearing the active custom theme.

Theme plugins change shared tokens used by the file tree, editor chrome, panels, active states, and text. Previewed content can still have its own document-specific styling.

Import a VS Code theme

The theme importer accepts a VS Code theme JSON definition:

1. Open Plugins & Themes.
2. Expand the VS Code theme importer.
3. Enter a stable ID and a readable name.
4. Paste the theme JSON.
5. Import and apply it.

A minimal starting point looks like:

{
  "name": "Quiet Blue",
  "type": "dark",
  "colors": {
    "editor.background": "#0b1020",
    "editor.foreground": "#dbeafe",
    "sideBar.background": "#111827",
    "focusBorder": "#60a5fa"
  }
}

Not every VS Code-specific token has a direct Markdown Explorer equivalent. The importer maps relevant colors into the application theme model.

Review before keeping a theme

Check the editor, Preview, selected file row, active tab, dialogs, code blocks, and muted text. A theme that looks good in the editor can still have insufficient contrast in secondary panels.

Imported themes are stored locally and can be deleted later. For functional extensions rather than color, read Manage plugins and themes.