Custom editor.background color not applied in Monaco theme via @monaco-editor/react

[Gaurav-Narayan-Varma]

Describe the bug A clear and concise description of what the bug is. Setting editor.background to red via defineTheme doesn't change the background color of the Monaco editor when using it with the @monaco-editor/react package. The property appears to apply only to the minimap, but the background remains unchanged.

To Reproduce

Steps to reproduce the behavior:

1. Set up a Monaco editor using @monaco-editor/react, tailwind, and Next.js version 15.2.0
2. Add a custom theme with editor.background set to red (#FF0000) and set it:

                <Editor
                  key={selectedFile.name}
                  theme="vs-dark"
                  height="100vh"
                  language={selectedFile.codeType}
                  value={selectedFile.content || "// No content available"}
                  beforeMount={(monaco) => {
                    monaco.editor.defineTheme("OneDarkPro", {
                      base: "vs-dark",
                      inherit: true,
                        colors: {
                          "editor.background": "#FF0000",
                          "minimap.background": "#FF0000",
                        },
                        rules: []
                    });
                    monaco.editor.setTheme("OneDarkPro");

                    monaco.languages.typescript.typescriptDefaults.setCompilerOptions(
                      {
                        target: monaco.languages.typescript.ScriptTarget.ESNext,
                        jsx: monaco.languages.typescript.JsxEmit.React,
                        jsxFactory: "createElement",
                      }
                    );
                  }}
                />

3. Observe the editor background remains dark (default), not red

Expected behavior The background of the Monaco editor should be red (#FF0000) as defined in the custom theme.

Screenshots

Desktop (please complete the following information):

• OS: macOS Sonoma 14.6
• Browser: Chrome 132.0.6834.160
• "@monaco-editor/react": "^4.7.0"
• "next": "15.2.0",
• "postcss": "^8.5.3"

Additional context N/a

[fsd-niraj]

I can work on this issue.

[maci-kb24]

The issue you're experiencing is a known limitation with the @monaco-editor/react package. When you define a theme with editor.background property, it doesn't properly apply to the main editing area, though it does affect the minimap.

[Gaurav-Narayan-Varma]

The issue you're experiencing is a known limitation with the @monaco-editor/react package. When you define a theme with editor.background property, it doesn't properly apply to the main editing area, though it does affect the minimap.

Is there any work around for this issue?

[trydev0303]

The issue occurs because the editor.background property in the Monaco editor theme definition is not being applied correctly, likely due to a conflict with the vs-dark base theme or a misconfiguration in the theme setup.

To fix this, ensure the theme is defined and set properly before the editor mounts, and verify that the editor.background property is correctly specified.

Additionally, check for any CSS overrides or external styles that might be interfering with the editor's background color. If the problem persists, try using a different base theme or explicitly setting the background color via inline styles or CSS.

Finally, ensure the Monaco editor and its dependencies are up to date to avoid potential bugs.

[Gaurav-Narayan-Varma]

verify that the editor.background property is correctly specified

I tried all the themes including 'vs', 'hc-black', and 'hc-light', yet the issue still persisted. The theme is defined and set before the editor mounts.

[trydev0303]

So, the code works fine, but the background of the Monaco editor is red?

[Gaurav-Narayan-Varma]

So, the code works fine, but the background of the Monaco editor is red?

Just the minimap as you can see in the photo

[trydev0303]

If only the minimap's background color changes to red while the editor's background remains unchanged, it means the minimap.background property in your custom theme is being applied correctly, but the editor.background property is either being overridden, ignored, or not properly recognized by the Monaco editor.

This suggests a potential issue with how the theme is being applied to the editor itself, possibly due to incorrect configuration, conflicts with the base theme (vs-dark), or external styling interference. Focus on ensuring the editor.background property is correctly defined and applied in the theme setup.

[vanja-veapi]

Try to Force Background Override in Tailwind or CSS

/* styles/globals.css or a custom CSS file */
.monaco-editor {
  background-color: #ff0000 !important;
}

Instead of relying only on defineTheme, explicitly set the background color via editorOptions:

<Editor
  key={selectedFile.name}
  theme="OneDarkPro"
  height="100vh"
  language={selectedFile.codeType}
  value={selectedFile.content || "// No content available"}
  options={{
    minimap: { enabled: false },
    overviewRulerBorder: false,
    scrollbar: { verticalScrollbarSize: 0 },
  }}
  beforeMount={(monaco) => {
    monaco.editor.defineTheme("OneDarkPro", {
      base: "vs-dark",
      inherit: true,
      colors: {
        "editor.background": "#FF0000",
      },
      rules: [],
    });

    monaco.editor.setTheme("OneDarkPro");
  }}
/>

[Gaurav-Narayan-Varma]

Try to Force Background Override in Tailwind or CSS

/* styles/globals.css or a custom CSS file */
.monaco-editor {
  background-color: #ff0000 !important;
}

Instead of relying only on defineTheme, explicitly set the background color via editorOptions:

<Editor
  key={selectedFile.name}
  theme="OneDarkPro"
  height="100vh"
  language={selectedFile.codeType}
  value={selectedFile.content || "// No content available"}
  options={{
    minimap: { enabled: false },
    overviewRulerBorder: false,
    scrollbar: { verticalScrollbarSize: 0 },
  }}
  beforeMount={(monaco) => {
    monaco.editor.defineTheme("OneDarkPro", {
      base: "vs-dark",
      inherit: true,
      colors: {
        "editor.background": "#FF0000",
      },
      rules: [],
    });

    monaco.editor.setTheme("OneDarkPro");
  }}
/>

Thanks for the guidance, Vanja — that worked!

However, after applying the One Dark Pro theme, the semantic highlighting seems off. Currently, it looks like this:

Whereas it should look more like this:

[suren-atoyan]

The issue you're experiencing is a known limitation with the @monaco-editor/react package. When you define a theme with editor.background property, it doesn't properly apply to the main editing area, though it does affect the minimap.

@maci-kb24 could you please share more about this - I am not aware of this issue.

Hi @Gaurav-Narayan-Varma

The issue is that you have a different theme in the theme prop on the Editor component:

<Editor
  ...
  theme="vs-dark"
...

So, you have two different themes defined in different places.

Here is a working examine.

You only need to change this line.

[github-actions[bot]]

This issue has been marked as stale due to inactivity. It will be closed in 7 days unless further activity occurs.

[github-actions[bot]]

Closing due to inactivity. Feel free to reopen if needed.