Debug Hover Widget Not Themed (fixes #25905)

src/vs/editor/contrib/hover/browser/hover.ts

@@ -21,7 +21,7 @@ import { ModesContentHoverWidget } from './modesContentHover';
 import { ModesGlyphHoverWidget } from './modesGlyphHover';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { registerThemingParticipant } from 'vs/platform/theme/common/themeService';
-import { registerColor } from 'vs/platform/theme/common/colorRegistry';
+import { editorHoverHighlight, editorHoverBackground, editorHoverBorder } from 'vs/platform/theme/common/colorRegistry';
 import { EditorContextKeys } from 'vs/editor/common/editorContextKeys';
 
 @editorContribution
@@ -173,11 +173,6 @@ class ShowHoverAction extends EditorAction {
 }
 
 // theming
-
-export const editorHoverHighlight = registerColor('editor.hoverHighlightBackground', { light: '#ADD6FF26', dark: '#264f7840', hc: '#ADD6FF26' }, nls.localize('hoverHighlight', 'Highlight below the word for which a hover is shown.'));
-export const editorHoverBackground = registerColor('editorHoverWidget.background', { light: '#F3F3F3', dark: '#2D2D30', hc: '#0C141F' }, nls.localize('hoverBackground', 'Background color of the editor hover.'));
-export const editorHoverBorder = registerColor('editorHoverWidget.border', { light: '#CCCCCC', dark: '#555555', hc: '#CCCCCC' }, nls.localize('hoverBorder', 'Border color of the editor hover.'));
-
 registerThemingParticipant((theme, collector) => {
 	let editorHoverHighlightColor = theme.getColor(editorHoverHighlight);
 	if (editorHoverHighlightColor) {

src/vs/platform/theme/common/colorRegistry.ts

@@ -206,6 +206,13 @@ export const editorFindMatch = registerColor('editor.findMatchBackground', { lig
 export const editorFindMatchHighlight = registerColor('editor.findMatchHighlightBackground', { light: '#EA5C0055', dark: '#EA5C0055', hc: null }, nls.localize('findMatchHighlight', "Color of the other search matches."));
 export const editorFindRangeHighlight = registerColor('editor.findRangeHighlightBackground', { dark: '#3a3d4166', light: '#b4b4b44d', hc: null }, nls.localize('findRangeHighlight', "Color the range limiting the search."));
 
+/**
+ * Editor hover
+ */
+export const editorHoverHighlight = registerColor('editor.hoverHighlightBackground', { light: '#ADD6FF26', dark: '#264f7840', hc: '#ADD6FF26' }, nls.localize('hoverHighlight', 'Highlight below the word for which a hover is shown.'));
+export const editorHoverBackground = registerColor('editorHoverWidget.background', { light: '#F3F3F3', dark: '#2D2D30', hc: '#0C141F' }, nls.localize('hoverBackground', 'Background color of the editor hover.'));
+export const editorHoverBorder = registerColor('editorHoverWidget.border', { light: '#CCCCCC', dark: '#555555', hc: '#CCCCCC' }, nls.localize('hoverBorder', 'Border color of the editor hover.'));
+
 /**
  * Editor link colors
  */

src/vs/workbench/parts/debug/browser/media/debugHover.css

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 
 .monaco-editor .debug-hover-widget {
-	border: 1px solid #CCC;
 	position: absolute;
 	margin-top: -1px;
 	cursor: default;
@@ -13,8 +12,6 @@
 	animation-name: fadeIn;
 	-webkit-user-select: text;
 	word-break: break-all;
-	background-color: #F3F3F3;
-	border: 1px solid #CCC;
 	padding: 4px 5px;
 }
 
@@ -87,12 +84,6 @@
 
 /* Dark theme */
 
-.monaco-editor.vs-dark .debug-hover-widget,
-.monaco-editor.hc-black .debug-hover-widget {
-	background-color: #2D2D30;
-	border-color: #555;
-}
-
 .monaco-editor.vs-dark .debug-hover-widget .value,
 .monaco-editor.hc-black .debug-hover-widget .value {
 	color: rgba(204, 204, 204, 0.6);
@@ -118,11 +109,6 @@
 	color: #CE9178;
 }
 
-.monaco-editor.vs-dark .debug-hover-widget,
-.monaco-editor.hc-black .debug-hover-widget {
-	border-color: #555;
-}
-
 .monaco-editor.vs-dark .debugHoverHighlight,
 .monaco-editor.hc-theme .debugHoverHighlight {
 	background-color: rgba(38, 79, 120, 0.25);

src/vs/workbench/parts/debug/electron-browser/debugHover.ts

@@ -21,8 +21,9 @@ import { IDebugService, IExpression, IExpressionContainer } from 'vs/workbench/p
 import { Expression } from 'vs/workbench/parts/debug/common/debugModel';
 import { VariablesRenderer, renderExpressionValue, VariablesDataSource } from 'vs/workbench/parts/debug/electron-browser/debugViewer';
 import { IListService } from 'vs/platform/list/browser/listService';
-import { attachListStyler } from 'vs/platform/theme/common/styler';
+import { attachListStyler, attachStylerCallback } from 'vs/platform/theme/common/styler';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { editorHoverBackground, editorHoverBorder } from "vs/platform/theme/common/colorRegistry";
 
 const $ = dom.$;
 const MAX_ELEMENTS_SHOWN = 18;
@@ -88,6 +89,14 @@ export class DebugHoverWidget implements IContentWidget {
 
 		this.toDispose.push(attachListStyler(this.tree, this.themeService));
 		this.toDispose.push(this.listService.register(this.tree));
+		this.toDispose.push(attachStylerCallback(this.themeService, { editorHoverBackground, editorHoverBorder }, colors => {
+			this.domNode.style.backgroundColor = colors.editorHoverBackground;
+			if (colors.editorHoverBorder) {
+				this.domNode.style.border = `1px solid ${colors.editorHoverBorder}`;
+			} else {
+				this.domNode.style.border = null;
+			}
+		}));
 	}
 
 	private registerListeners(): void {