microsoft / microsoft/monaco-editor
[Bug] Unable to Customize Rename Input Text Color Through defineTheme
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?
- Not 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
- Define a custom theme using the
monaco.editor.defineThemefunction. - Apply the theme to the editor using
monaco.editor.setTheme. - Attempt to change the rename input style (e.g., text color) through the
colorsproperty 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.
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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