Allow configuring the background color of matching HTML tags

[nilslindemann]

Hello, dear people of Microsoft,

(#64289 is related but closed and unanswered)

When putting the cursor into an HTML tag, both the tag name and the name of the matching closing tag get highlighted in a pink color. Screenshot:

The highlighting also appears with all extensions disabled (Code.exe --disable-extensions).

While this is useful sometimes, it is also a constant distraction when moving around with the cursor, especially as the highlighting is so prominent. As you see, it is close to the color of the font and so it has the partial (psychological?) effect to hide that tag text from my perception.

I therefore request an option to disable this, or better, to configure the background color of the highlighting. I guess a very light yellow wouldn't disturb at all.

I am not talking of similar matches, which get highlighted when double-clicking a word (aka, I am not talking of the setting editor.selectionHighlight).

Below are my settings (not all are related, but maybe I am accidentally effing things up, so I post them all):

{
    "breadcrumbs.enabled": false,
    "code-runner.clearPreviousOutput": true,
    "code-runner.enableAppInsights": false,
    "code-runner.saveAllFilesBeforeRun": true,
    "code-runner.saveFileBeforeRun": true,
    "code-runner.showExecutionMessage": false,
    "css.format.maxPreserveNewLines": 2,
    "css.format.newlineBetweenSelectors": false,
    "css.format.spaceAroundSelectorSeparator": true,
    "debug.terminal.clearBeforeReusing": true,
    "editor.cursorSmoothCaretAnimation": "on",
    "editor.detectIndentation": false,
    "editor.fontFamily": "'Lucida Console', 'Go Mono', 'Cascadia Code Light', Consolas, 'Courier New', monospace",
    "editor.fontLigatures": true,
    "editor.fontSize": 15,
    "editor.formatOnSave": true,
    "editor.guides.highlightActiveBracketPair": false,
    "editor.guides.highlightActiveIndentation": false,
    "editor.guides.indentation": false,
    "editor.lightbulb.enabled": "off",
    "editor.lineNumbers": "off",
    "editor.linkedEditing": true,
    "editor.matchBrackets": "never",
    "editor.minimap.renderCharacters": false,
    "editor.minimap.showSlider": "always",
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.occurrencesHighlight": "off",
    "editor.overviewRulerBorder": false,
    "editor.renderLineHighlight": "none",
    "editor.scrollbar.horizontal": "hidden",
    "editor.scrollbar.horizontalScrollbarSize": 0,
    "editor.scrollbar.vertical": "hidden",
    "editor.scrollbar.verticalScrollbarSize": 0,
    "editor.smoothScrolling": true,
    "editor.showFoldingControls": "always",
    "editor.unfoldOnClickAfterEndOfLine": true,
    "editor.unicodeHighlight.allowedCharacters": {
        "ä": true,
        "ö": true,
        "ü": true,
        "Ä": true,
        "Ö": true,
        "Ü": true,
        "ß": true
    },
    "editor.wordSeparators": "`~!@#$%^&*()-_=+[{]}\\|;:'\",.<>/?",
    "editor.wordWrap": "on",
    "[javascript][html]": {
        "editor.tabSize": 2
    },
    "explorer.confirmDelete": false,
    "explorer.confirmDragAndDrop": false,
    "files.autoGuessEncoding": true,
    "files.autoSaveWorkspaceFilesOnly": true,
    "files.enableTrash": false,
    "files.eol": "\n",
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "git.autofetch": true,
    "html.format.wrapLineLength": 0,
    "markdown.preview.fontSize": 18,
    "markdown.preview.lineHeight": 1.5,
    "markdown.preview.typographer": true,
    "plantuml.jar": "C:\\PlantUML\\run\\plantuml-1.2024.8.jar",
    "scm.diffDecorations": "minimap",
    "terminal.integrated.defaultProfile.windows": "Command Prompt",
    "terminal.integrated.focusAfterRun": "terminal",
    "terminal.integrated.smoothScrolling": true,
    "window.commandCenter": false,
    "window.title": "${dirty} ${activeEditorLong}",
    "window.titleSeparator": " – ",
    "window.zoomLevel": 1.2,
    "workbench.colorTheme": "Night Owl Light (No Italics)",
    "workbench.colorCustomizations": {
        "minimapSlider.activeBackground": "#00000044",
        "minimapSlider.background": "#00000022",
        "minimapSlider.hoverBackground": "#00000044",
        "editor.background": "#ffffff",  // I searched for all types of "highlight" and "background" here, but nothing seems to match
    },
    "workbench.editor.highlightModifiedTabs": true,
    "workbench.editor.pinnedTabSizing": "compact",
    "workbench.iconTheme": "material-icon-theme",
    "workbench.layoutControl.enabled": false,
    "workbench.list.defaultFindMode": "filter",
    "workbench.list.smoothScrolling": true,
    "workbench.tree.indent": 22,
    "workbench.tree.renderIndentGuides": "none",
    "zenMode.centerLayout": false,
}

VS Code Info:

Version: 1.96.2 (system setup)
Commit: fabdb6a30b49f79a7aba0f2ad9df9b399473380f
Date: 2024-12-19T10:22:47.216Z
Electron: 32.2.6
ElectronBuildId: 10629634
Chromium: 128.0.6613.186
Node.js: 20.18.1
V8: 12.8.374.38-electron.0
OS: Windows_NT x64 10.0.19045

Greetings!

[IllusionMH]

If you type there does it update closing tag was well? You have Linked Editing feature enabled and its background controlled by editor.linkedEditingBackground

[aeschli]

Yes, what you see is the editor.linkedEditingBackground