Changing theme in one editor should change all editors · Issue #338 · microsoft/monaco-editor · GitHub

monaco-editor: 0.8.0
Browser: Chrome
OS: Centos 7

When I have two editors in two different html DOM elements, if I dynamically change theme on one editor using updateOptions() function, theme properly changes on the editor, but the other editor takes some changes, for example font colors change but background does not.
The other editor should stay unchanged.

It is currently not possible to have two editors have different themes.

The problem is that I can't dynamically change theme at all, because if I change to one editor, the other one gets messed up.

Is it not possible to change it on both editors?

e.g.
var editor1 = monaco.editor.create(...);
var editor2 = monaco.editor.create(...);
...
editor1.updateOptions({ theme: ... });
editor2.updateOptions({ theme: ... });

It is possible and that's the only way to do it in the current state, but that could add some unnecessary code.
What I wanted to say is that changing theme on one editor should either affect all the editors in the same way as the editor we changed theme on, or not affect them at all. This way, it just makes some changes to other editors which makes the text in them unreadable.
So I think this is more of a bug than a feature-request.

Why is not possible to have multiple editors of different themes?

-1 to Changing theme in one editor should change all editors

This is counter intuitive as the create editor function leads one to believe that themes should work on a per editor basis. There are many use cases (I have one right now which is broken) that require having multiple editors on a page styled differently. This also worked fine a few versions ago so not sure why it was changed... I'm interested in why the monaco-token-styles is injected globally as I would be open to working on a PR to fix this if necessary.

Geekeren (@geekeren) excited you may have potentially found a solution to this! What is defaultTheme, is that anything special? Also, while your component successfully creates the CSS variables and scopes it, I am getting this:

That is, the style highlighted span elements have a class like mtk20 which is not scoped to monaco-editor or the CSS variables, and it uses that for color. Any ideas what I'm missing or how to get those to change?

Thanks for all the help here!

Geekeren (@geekeren) also, my theme is defined like this, do I need to define it differently to make this work?

// https://code.visualstudio.com/api/references/theme-color

const theme = ({
  background,
  string,
  highlight,
  cursor,
}: {
  string: string
  background: string
  highlight: string
  cursor: string
}) => ({
  base: 'vs-dark',
  inherit: true,
  rules: [
    { token: 'invalid', foreground: 'f44747' },
    { token: 'emphasis', fontStyle: 'italic' },
    { token: 'strong', fontStyle: 'bold' },

    { token: 'variable', foreground: '111111' },
    { token: 'variable.predefined', foreground: '111111' },
    { token: 'variable.parameter', foreground: '111111' },
    { token: 'constant', foreground: '111111', fontStyle: 'bold' },
    { token: 'comment', foreground: 'cccccc', fontStyle: 'italic' },
    { token: 'number', foreground: '10B981' },
    { token: 'number.hex', foreground: '10B981', fontStyle: 'bold' },
    { token: 'regexp', foreground: string },
    { token: 'annotation', foreground: 'cc6666' },
    { token: 'type', foreground: '111111', fontStyle: 'bold' },

    { token: 'delimiter', foreground: 'BBBBBB' },
    { token: 'delimiter.html', foreground: 'BBBBBB' },
    { token: 'delimiter.xml', foreground: 'BBBBBB' },

    { token: 'tag', foreground: '111111', fontStyle: 'bold' },
    { token: 'tag.id.pug', foreground: '111111', fontStyle: 'bold' },
    { token: 'tag.class.pug', foreground: '111111', fontStyle: 'bold' },
    { token: 'meta.scss', foreground: '555555' },
    { token: 'meta.tag', foreground: '555555' },
    { token: 'metatag', foreground: '555555' },
    { token: 'metatag.content.html', foreground: '555555' },
    { token: 'metatag.html', foreground: '111111', fontStyle: 'bold' },
    { token: 'metatag.xml', foreground: '111111', fontStyle: 'bold' },
    { token: 'metatag.php', fontStyle: 'bold' },

    { token: 'key', foreground: '9CDCFE' },
    {
      token: 'string',
      foreground: string,
      fontStyle: 'bold',
    },
    {
      token: 'string.key.json',
      foreground: '111111',
      fontStyle: 'bold',
    },
    {
      token: 'string.value.json',
      foreground: string,
      fontStyle: 'bold',
    },

    { token: 'attribute.name', foreground: '111111' },
    { token: 'attribute.value', foreground: string, fontStyle: 'bold' },
    {
      token: 'attribute.value.number.css',
      foreground: '10B981',
      fontStyle: 'bold',
    },
    {
      token: 'attribute.value.unit.css',
      foreground: '10B981',
      fontStyle: 'bold',
    },
    {
      token: 'attribute.value.hex.css',
      foreground: '10B981',
      fontStyle: 'bold',
    },

    { token: 'string.sql', foreground: string, fontStyle: 'bold' },

    { token: 'keyword', foreground: '555555' },
    { token: 'keyword.flow', foreground: 'C586C0', fontStyle: 'bold' },
    { token: 'keyword.json', foreground: 'CE9178', fontStyle: 'bold' },
    {
      token: 'keyword.flow.scss',
      foreground: '555555',
    },

    { token: 'operator.scss', foreground: 'BBBBBB' },
    { token: 'operator.sql', foreground: 'BBBBBB' },
    { token: 'operator.swift', foreground: 'BBBBBB' },
    { token: 'predefined.sql', foreground: 'FF00FF' },
    {
      background: x(background),
      token: '',
    },
  ],
  colors: {
    'editor.foreground': '#111111',
    'editor.background': background,
    'editor.selectionBackground': highlight,
    'editor.lineHighlightBackground': highlight,
    'editor.selectionHighlightBackground': highlight,
    'editor.wordHighlightBackground': highlight,
    'editor.wordHighlightStrongBackground': highlight,
    'editorCursor.foreground': cursor,
    'terminalCursor.foreground': cursor,
    'editorWhitespace.foreground': '#3B3A32',
    'editorIndentGuide.activeBackground': '#9D550FB0',
    'editor.selectionHighlightBorder': highlight,
    'editorBracketHighlight.foreground1': cursor,
    'editorBracketHighlight.foreground2': cursor,
    'editorBracketHighlight.foreground3': cursor,
  },
})

export default theme

function x(t: string) {
  return t.replace(/#/g, '')
}

Lance Pollard (@lancejpollard) it's unfortunately that the solution is not well solve the grammar highlight. the class name "mk-xxx" is dynamic generated differently in different theme.

Lance Pollard (@lancejpollard) the defaultTheme in my code is vs theme, or vs-dark theme, I just keep the two monaco editors' base theme is same. if they are different, the class name "mk-xxx" will be confilict

Dang, didn't know if mk-xxx was dynamic or fixed, anyhow, here is what I landed on that works for my limited theme choice:

.MonacoThemeScope-theme-mytheme-light-violet .mtk6 {
  color: #7c3aed;
}

.MonacoThemeScope-theme .monaco-editor .bracket-highlighting-0,
.MonacoThemeScope-theme .monaco-editor .bracket-highlighting-1,
.MonacoThemeScope-theme .monaco-editor .bracket-highlighting-2 {
  color: #777777;
}

.MonacoThemeScope-theme-mytheme-light-violet .cursors-layer .cursor {
  background-color: #5b21b6;
  border-color: #5b21b6;
}

.MonacoThemeScope-theme-mytheme-light-violet
  .monaco-editor
  .view-overlays
  .current-line,
.MonacoThemeScope-theme-mytheme-light-violet
  .monaco-editor
  .selected-text {
  background-color: #ede9fe;
}

.MonacoThemeScope-theme-mytheme-light-blue .mtk6 {
  color: #2563eb;
}

.MonacoThemeScope-theme-mytheme-light-blue
  .monaco-editor
  .cursors-layer
  .cursor {
  background-color: #1e40af;
  border-color: #1e40af;
}

.MonacoThemeScope-theme-mytheme-light-blue
  .monaco-editor
  .view-overlays
  .current-line,
.MonacoThemeScope-theme-mytheme-light-blue
  .monaco-editor
  .selected-text {
  background-color: #dbeafe;
}
/*  */

.monaco-editor .lines-content {
  margin-left: 16px;
  /* margin-right: 16px; */
}

.monaco-editor .decorationsOverviewRuler {
  display: none !important;
}
/*

In another thought, because Sandpack does not use Monaco (it uses CodeMirror it looks like, because CodeMirror works better on mobile it sounds like), I might switch to using CodeMirror so I only have one technology in the app, if I chose to use Sandpack one of these days for something else too.

Any updates on the issue?

I have run into the same issue here. In my case, I have a list component where, each list item is an expandable card with editors. That particular editor has a specific style because its wrapped by the expandable card. To add list items I have a modal where i need to have another code editor instance. However, since my modal styles are different, the colors do not match so I need another style. My problem was that since the styles are different, every time I opened the modal, the global styles were changed and then, every editor on the page had the style of the modal.

I fixed this issue by using the global keyword in my scss file. I did it like so:

.CodeEditorWrapper {
         // other styles from the wrapper
	:global {
		.monaco-editor {
			--vscode-editor-background: #{#121212};
			--vscode-editorGutter-background: #{#2a2a2a};
		}
	}
}

Please also note that I am using scss modules, so, even if I have another instances of CodeEditorWrapper with other styles, this will still work be conscious that this might not work with simple css.

Bumping because I'm trying to solve a problem where a new editor instance causes all editors to revert back to the default theme, even though I have already called monaco.editor.defineTheme(themeName, themeData) and monaco.editor.setTheme(themeName) long before.

Partial solution is to call editor.updateOptions({ theme: currentMonacoTheme }) during the provided onMount callback, but this still leaves a momentarily flash of the ugly default white theme.

EDIT: Solved my flashing issue! The trick here, at least for @monaco-editor/react is to include the current theme in the JSX options like so as the theme:

<MonacoEditorReact
  path={path}
  options={options} // even though we have options.theme here
  theme={theme} // add this here
  language={language}
  value={value}
  beforeMount={beforeMount}
  onMount={onMount}
  onChange={onChange}
/>

EDIT2: It still flashes un-syntax-highlighted code but I think this is good enough for me for now.

What about setting different language for each editor? Wouldn't that help?

It doesn't help unfortunately as Monaco would still use the same CSS variable names for all editors.

The workaround that we used was ensuring that each editor's language has unique token names so they don't overlap. It seems that for each theme rule for a specific token, Monaco creates a unique CSS variable. So for example, if you want the comments in one editor to be one color and in another editor another color, you need to give them unique token names (e.g. comment.lang1, comment.lang2, etc) and make theme rules for each of them accordingly. But if something should have the same color in all editors, it's okay to have a common token name for all of them.

Regarding the theme editor colors (e.g. editor.foreground), that unfortunately can't be solved with the above approach and all editors would need to have the same colors, which luckily worked for our use case.

It was created on January 24th, 2017, and a total of 2,950 days have passed until February 21st, 2025. I can hardly believe that there still hasn't been a good solution for it.

Can we generate a prefix for classes that are used inside the editor to make them local instead of global? For example with some prop to generate unique classes?

`frontend`: Make `ReadOnlyCodeViewer` respond to theme changes. Howev…

`frontend` Solve theming conflicts between `mermaid` and `vs` light t…

Is there a solution to this problem?

Changing theme in one editor should change all editors · Issue #338 · microsoft/monaco-editor · GitHub

Repository navigation

Changing theme in one editor should change all editors #338

43 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Changing theme in one editor should change all editors · Issue #338 · microsoft/monaco-editor · GitHub

Repository navigation

Changing theme in one editor should change all editors #338

Description

Activity

alexdima commented on Jan 24, 2017

fzafiroski commented on Jan 24, 2017

alexdima commented on Jan 25, 2017

fzafiroski commented on Jan 25, 2017

waltonseymour commented on Feb 28, 2017

jrshust commented on Feb 28, 2017

43 remaining items

lancejpollard commented on Jan 5, 2024

lancejpollard commented on Jan 5, 2024

geekeren commented on Jan 21, 2024

geekeren commented on Jan 21, 2024

lancejpollard commented on Jan 22, 2024

lancejpollard commented on Jan 22, 2024

studylss commented on Sep 5, 2024

GoncaloCamaz commented on Sep 19, 2024

calvinusesyourcode commented on Nov 27, 2024

ElenaStoeva commented on Jan 16, 2025

shanhexi commented on Feb 21, 2025

Serpentarius13 commented on Jun 12, 2025

MyMaNong commented on Jan 16, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions