Monaco editor themes: define the palette and give the page one theme owner

A document review page shows an editable HTML source beside a second Monaco editor containing the approved reference. If each pane tries to choose its own active theme during mounting, their setup calls can compete. Treat the active theme as a page-level choice for editors sharing the same Monaco runtime. A reference pane can remain read-only without needing a separate color scheme.

Define a named theme before selecting it

The following fragment belongs in an application that already imports and initializes Monaco. It does not install the package or configure workers:

import * as monaco from 'monaco-editor';

monaco.editor.defineTheme('review-night', {
  base: 'vs-dark',
  inherit: true,
  rules: [
    { token: 'comment', foreground: 'A9BBC7', fontStyle: 'italic' },
    { token: 'string', foreground: 'C7D99A' }
  ],
  colors: {
    'editor.background': '#15242D',
    'editor.foreground': '#EDF3F5',
    'editorCursor.foreground': '#9EDCE8',
    'editor.selectionBackground': '#365B70',
    'editorLineNumber.foreground': '#A4B6C0'
  }
});

monaco.editor.setTheme('review-night');

base: 'vs-dark' supplies the starting theme. inherit: true keeps inherited rules for tokens this small example does not cover. Token foreground values omit #; interface colors in colors use color strings such as #15242D.

Use a stable application-specific name. The defineTheme API also updates an existing named theme, so two unrelated modules registering the same name can overwrite one another's definition. Keeping registration in one place makes that collision easier to prevent.

Let one control choose the active theme

Monaco exposes theme options under its global editor options. For two panes using the same runtime, route the page's appearance control to one handler:

function setReviewAppearance(isDark) {
  monaco.editor.setTheme(isDark ? 'review-night' : 'vs');
}

Keep the models and editor instances alive while changing the theme. A theme switch does not require copying the source into newly created editors. Recreating a pane adds unnecessary work to preserve selection, scroll position, undo history, and unsaved state.

If independent themes per editor instance are a hard requirement, verify the architecture before implementing pane-local controls. Separate runtimes or isolated documents add loading and communication responsibilities. A theme-name argument on each construction call is not a sound basis for promising independent active themes within one shared runtime.

A token rule only works when that token exists

Changing the background successfully does not prove that a language produces the token names in your rules. Confirm the model's language and inspect the syntax categories it emits before adding increasingly specific rules. HTML tags, strings inside scripts, and ordinary text may use different token paths.

The Monaco HTML setup guide covers models, language support, and worker configuration. Keep those concerns separate: a theme cannot repair a failed language worker or turn a plain-text model into an HTML model.

For the review page, use a reference document containing comments, quoted attributes, ordinary text, and embedded script only if the application supports it. Check all of those against the actual selected palette rather than assuming that two sample token rules color the entire document.

Preserve system high-contrast behavior

The official global options documentation notes that the operating system's high-contrast mode can override the selected theme unless autoDetectHighContrast is false. Leave that accessibility behavior in place unless the application has a considered alternative. An unexpected high-contrast palette can be a deliberate system response rather than a failed setTheme call.

Check the source and reference panes together: normal text, selection, cursor, line numbers, diagnostics, and any search UI the application exposes. Make a small unsaved edit, switch appearance, and confirm that the edit and intended selection remain. Finish by reading the model's value; the saved document should contain the author's HTML, without Monaco's interface palette copied into it.