microsoft / microsoft/monaco-editor

[Bug] Unable to Customize Rename Input Text Color Through defineTheme

Open
#4,660 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
46.8k
Forks
4.1k
Avg merge
17h 58m
Merged PRs (30d)
1

Description

Reproducible in vscode.dev or in VS Code Desktop?
  • Not reproducible in vscode.dev or VS Code Desktop
Reproducible in the monaco editor playground?
Monaco Editor Playground Link

Monaco Editor Playground - Example 1

Monaco Editor Playground - Example 2

Monaco Editor Playground Code
monaco.editor.defineTheme('default', {
    base: 'vs-dark',
    inherit: true,
    rules: [
    ],
 colors: {
        // Overall Colors
        foreground: '#eceff1',
        errorForeground: '#f44336',
        descriptionForeground: '#90a4ae',
        focusBorder: '#3867d6',
        contrastBorder: '#4b5563',
        contrastActiveBorder: '#7593e4',

        // Text Selection
        'selection.background': '#252A36',

        // Text Colors
        'textSeparator.foreground': '#4b5563',
        'textLink.foreground': '#3867d6',
        'textLink.activeForeground': '#7593e4',
        'textPreformat.foreground': '#eceff1',
        'textBlockQuote.background': '#252a36',
        'textBlockQuote.border': '#4b5563',
        'textCodeBlock.background': '#252a36',

        // Widgets
        'widget.shadow': '#00000066',

        // Input Box
        'input.background': '#252a36',
        'input.foreground': '#eceff1',
        'input.border': '#3867d6',
        'inputOption.activeBorder': '#7593e4',
        'input.placeholderForeground': '#90a4ae',

        // Input Validation
        'inputValidation.infoBackground': '#3A8FFF',
        'inputValidation.infoBorder': '#3867d6',
        'inputValidation.warningBackground': '#ed8936',
        'inputValidation.warningBorder': '#d97426',
        'inputValidation.errorBackground': '#f44336',
        'inputValidation.errorBorder': '#c62828',

        // Dropdown
        'dropdown.background': '#252a36',
        'dropdown.foreground': '#eceff1',
        'dropdown.border': '#3867d6',

        // Lists and Trees
        'list.focusBackground': '#4b5563',
        'list.focusForeground': '#eceff1',
        'list.activeSelectionBackground': '#4b5563',
        'list.activeSelectionForeground': '#eceff1',
        'list.inactiveSelectionBackground': '#374151',
        'list.inactiveSelectionForeground': '#90a4ae',
        'list.hoverBackground': '#4b5563',
        'list.hoverForeground': '#eceff1',
        'list.dropBackground': '#3867d6',
        'list.highlightForeground': '#7593e4',

        // Picker Group
        'pickerGroup.foreground': '#3867d6',
        'pickerGroup.border': '#4b5563',

        // Buttons
        'button.foreground': '#eceff1',
        'button.background': '#3867d6',
        'button.hoverBackground': '#284da0',

        // Badges
        'badge.background': '#3867d6',
        'badge.foreground': '#eceff1',

        // Scrollbars
        'scrollbar.shadow': '#1b2231',
        'scrollbarSlider.background': '#4b5563',
        'scrollbarSlider.hoverBackground': '#718096',
        'scrollbarSlider.activeBackground': '#A0AEC0',

        // Progress Bar
        'progressBar.background': '#3867d6',

        // Editor Backgrounds
        'editor.background': '#1b2231',
        'editor.foreground': '#eceff1',
        'editorWidget.background': '#252a36',
        'editorWidget.foreground': '#eceff1',
        'editorWidget.border': '#3867d6',
        'editor.selectionBackground': '#374151',
        'editor.selectionForeground': '#eceff1',
        'editor.inactiveSelectionBackground': '#374151',
        'editor.selectionHighlightBackground': '#4b5563',
        'editor.findMatchBackground': '#3867d6',
        'editor.findMatchHighlightBackground': '#7593e4',
        'editor.findRangeHighlightBackground': '#4b5563',
        'editor.hoverHighlightBackground': '#4b5563',
        'editorHoverWidget.background': '#252a36',
        'editorHoverWidget.border': '#3867d6',
        'editorLink.activeForeground': '#7593e4',

        // Diff Editor
        'diffEditor.insertedTextBackground': '#4caf5020',
        'diffEditor.removedTextBackground': '#f4433620',
        'diffEditor.insertedTextBorder': '#4caf50',
        'diffEditor.removedTextBorder': '#f44336',

        // Editor Overview Ruler
        'editorOverviewRuler.border': '#252a36',
        'editorOverviewRuler.currentContentForeground': '#7593e4',
        'editorOverviewRuler.incomingContentForeground': '#4caf50',
        'editorOverviewRuler.commonContentForeground': '#ed8936',

        // Cursor and Line Highlight
        'editorCursor.foreground': '#eceff1',
        'editor.lineHighlightBackground': '#1B2231',
        'editor.lineHighlightBorder': '#333a4a80',
        'editor.rangeHighlightBackground': '#252a36',

        // Whitespace and Guides
        'editorWhitespace.foreground': '#4b5563',
        'editorIndentGuide.background': '#4b5563',
        'editorIndentGuide.activeBackground': '#7593e4',

        // Line Numbers
        'editorLineNumber.foreground': '#90a4ae',
        'editorLineNumber.activeForeground': '#eceff1',

        // Ruler
        'editorRuler.foreground': '#4b5563',

        // CodeLens
        'editorCodeLens.foreground': '#90a4ae',

        // Inlay Hints
        'editorInlayHint.foreground': '#eceff1',
        'editorInlayHint.background': '#252a36',

        // Bracket Match
        'editorBracketMatch.background': '#252a36',
        'editorBracketMatch.border': '#3867d6',

        // Gutter
        'editorGutter.background': '#1b2231',
        'editorGutter.modifiedBackground': '#3A8FFF',
        'editorGutter.addedBackground': '#4caf50',
        'editorGutter.deletedBackground': '#f44336',

        // Errors and Warnings
        'editorError.foreground': '#f44336',
        'editorError.border': '#c62828',
        'editorWarning.foreground': '#ed8936',
        'editorWarning.border': '#d97426',
        'editorInfo.foreground': '#3A8FFF',
        'editorHint.foreground': '#38B2AC',

        // Marker Navigation
        'editorMarkerNavigationError.background': '#f44336',
        'editorMarkerNavigationWarning.background': '#ed8936',
        'editorMarkerNavigation.background': '#252a36',

        // Suggest Widget
        'editorSuggestWidget.background': '#252a36',
        'editorSuggestWidget.border': '#3867d6',
        'editorSuggestWidget.foreground': '#eceff1',
        'editorSuggestWidget.selectedBackground': '#4b5563',
        'editorSuggestWidget.highlightForeground': '#7593e4',

        // Word Highlight
        'editor.wordHighlightBackground': '#252a36',
        'editor.wordHighlightStrongBackground': '#252a36',

        // Peek View
        'peekViewTitle.background': '#252a36',
        'peekViewTitleLabel.foreground': '#eceff1',
        'peekViewTitleDescription.foreground': '#90a4ae',
        'peekView.border': '#3867d6',
        'peekViewResult.background': '#252a36',
        'peekViewResult.lineForeground': '#90a4ae',
        'peekViewResult.fileForeground': '#eceff1',
        'peekViewResult.selectionBackground': '#4b5563',
        'peekViewResult.selectionForeground': '#eceff1',
        'peekViewEditor.background': '#252a36',
        'peekViewEditorGutter.background': '#252a36',
        'peekViewResult.matchHighlightBackground': '#7593e4',
        'peekViewEditor.matchHighlightBackground': '#7593e4',

        // Quick Input
        'quickInput.background': '#252a36',
        'quickInput.foreground': '#eceff1',
        'quickInputTitle.background': '#252a36',
        'quickInputList.focusForeground': '#eceff1',
        'quickInputList.focusBackground': '#4b5563',
      },
    });
monaco.editor.setTheme('default')

const value = /* set from `myEditor.getModel()`: */ `// comment
function hello() {
	AAA // type example

	var variable = "eq";
	console.log(variable); // variable example
}`;

const myEditor = monaco.editor.create(document.getElementById("container"), {
	value,
	language: "javascript",
	automaticLayout: true,
});
Reproduction Steps
  1. Define a custom theme using the monaco.editor.defineTheme function.
  2. Apply the theme to the editor using monaco.editor.setTheme.
  3. Attempt to change the rename input style (e.g., text color) through the colors property in the theme definition.
Actual (Problematic) Behavior

Despite defining the input.foreground color in the theme, the rename input box's text color does not change. The text color remains the default, ignoring the theme setting.
Screenshot 2024-08-27 142355
Screenshot 2024-08-27 143909

Expected Behavior

The text color of the rename input box should change to match the input.foreground color specified in the custom theme.

Additional Context

To work around this issue, I had to apply a custom CSS rule directly:

.monaco-editor .rename-input {
  color: #eceff1 !important;
}

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the defineTheme colors configuration and the rename-input reproduction in the linked Monaco Editor Playground examples. Check how input.foreground is applied after monaco.editor.setTheme; the issue is complete when the configured text color is reflected in the rename input consistently.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.