Allow theming of parameter hints #26671

src/vs/editor/contrib/parameterHints/browser/parameterHints.css

@@ -5,8 +5,6 @@
 
 .monaco-editor .parameter-hints-widget {
 	z-index: 10;
-	background-color: #F3F3F3;
-	border: 1px solid rgb(200, 200, 200);
 	display: flex;
 	flex-direction: column;
 	line-height: 1.5em;
@@ -41,18 +39,10 @@
 	flex-direction: column;
 }
 
-.monaco-editor .parameter-hints-widget.multiple .body {
-	border-left: 1px solid rgba(204, 204, 204, 0.5);
-}
-
 .monaco-editor .parameter-hints-widget .signature {
 	padding: 4px 5px;
 }
 
-.monaco-editor .parameter-hints-widget .signature.has-docs {
-	border-bottom: 1px solid rgba(204, 204, 204, 0.5);
-}
-
 .monaco-editor .parameter-hints-widget .docs {
 	padding: 0 10px 0 5px;
 	white-space: pre-wrap;
@@ -118,19 +108,7 @@
 	margin-right: 0.5em;
 }
 
-/*** VS Dark */
-
-.monaco-editor.vs-dark .parameter-hints-widget {
-	background-color: #2D2D30;
-	border-color: rgba(85,85,85,0.5);
-}
-
-.monaco-editor.hc-black .parameter-hints-widget .body,
-.monaco-editor.vs-dark .parameter-hints-widget .body,
-.monaco-editor.hc-black .parameter-hints-widget .signature,
-.monaco-editor.vs-dark .parameter-hints-widget .signature {
-	border-color: rgba(85,85,85,0.5);
-}
+/*** VS Dark & High Contrast*/
 
 .monaco-editor.hc-black .parameter-hints-widget .button.previous,
 .monaco-editor.vs-dark .parameter-hints-widget .button.previous {
@@ -140,11 +118,4 @@
 .monaco-editor.hc-black .parameter-hints-widget .button.next,
 .monaco-editor.vs-dark .parameter-hints-widget .button.next {
 	background-image: url('arrow-down-dark.svg');
-}
-
-/*** High Contrast */
-
-.monaco-editor.hc-black .parameter-hints-widget {
-	background-color: #0C141F;
-	border: 2px solid #6FC3DF;
 }
\ No newline at end of file

src/vs/editor/contrib/parameterHints/browser/parameterHintsWidget.ts

@@ -24,6 +24,8 @@ import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableEle
 import { CharacterSet } from 'vs/editor/common/core/characterClassifier';
 import { IConfigurationChangedEvent } from 'vs/editor/common/config/editorOptions';
 import { ICursorSelectionChangedEvent } from 'vs/editor/common/controller/cursorEvents';
+import { registerThemingParticipant, HIGH_CONTRAST } from 'vs/platform/theme/common/themeService';
+import { editorHoverBackground, editorHoverBorder } from 'vs/platform/theme/common/colorRegistry';
 
 const $ = dom.$;
 
@@ -471,4 +473,19 @@ export class ParameterHintsWidget implements IContentWidget, IDisposable {
 		this.disposables = dispose(this.disposables);
 		this.model = null;
 	}
-}
\ No newline at end of file
+}
+
+registerThemingParticipant((theme, collector) => {
+	let border = theme.getColor(editorHoverBorder);
+	if (border) {
+		let borderWidth = theme.type === HIGH_CONTRAST ? 2 : 1;
+		collector.addRule(`.monaco-editor .parameter-hints-widget { border: ${borderWidth}px solid ${border}; }`);
+		collector.addRule(`.monaco-editor .parameter-hints-widget.multiple .body { border-left: 1px solid ${border.transparent(0.5)}; }`);
+		collector.addRule(`.monaco-editor .parameter-hints-widget .signature.has-docs { border-bottom: 1px solid ${border.transparent(0.5)}; }`);
+
+	}
+	let background = theme.getColor(editorHoverBackground);
+	if (background) {
+		collector.addRule(`.monaco-editor .parameter-hints-widget { background-color: ${background}; }`);
+	}
+});
\ No newline at end of file

src/vs/editor/contrib/suggest/browser/suggestWidget.ts

@@ -29,7 +29,7 @@ import { alert } from 'vs/base/browser/ui/aria/aria';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { attachListStyler } from 'vs/platform/theme/common/styler';
 import { IThemeService, ITheme, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
-import { registerColor, editorWidgetBackground, contrastBorder, listFocusBackground, activeContrastBorder, listHighlightForeground, editorForeground } from 'vs/platform/theme/common/colorRegistry';
+import { registerColor, editorWidgetBackground, listFocusBackground, activeContrastBorder, listHighlightForeground, editorForeground, editorWidgetBorder } from 'vs/platform/theme/common/colorRegistry';
 import { Position } from 'vs/editor/common/core/position';
 import { IEditorGroupService } from 'vs/workbench/services/group/common/groupService';
 
@@ -47,7 +47,7 @@ interface ISuggestionTemplateData {
  * Suggest widget colors
  */
 export const editorSuggestWidgetBackground = registerColor('editorSuggestWidget.background', { dark: editorWidgetBackground, light: editorWidgetBackground, hc: editorWidgetBackground }, nls.localize('editorSuggestWidgetBackground', 'Background color of the suggest widget.'));
-export const editorSuggestWidgetBorder = registerColor('editorSuggestWidget.border', { dark: '#454545', light: '#C8C8C8', hc: contrastBorder }, nls.localize('editorSuggestWidgetBorder', 'Border color of the suggest widget.'));
+export const editorSuggestWidgetBorder = registerColor('editorSuggestWidget.border', { dark: editorWidgetBorder, light: editorWidgetBorder, hc: editorWidgetBorder }, nls.localize('editorSuggestWidgetBorder', 'Border color of the suggest widget.'));
 export const editorSuggestWidgetForeground = registerColor('editorSuggestWidget.foreground', { dark: editorForeground, light: editorForeground, hc: editorForeground }, nls.localize('editorSuggestWidgetForeground', 'Foreground color of the suggest widget.'));
 export const editorSuggestWidgetSelectedBackground = registerColor('editorSuggestWidget.selectedBackground', { dark: listFocusBackground, light: listFocusBackground, hc: listFocusBackground }, nls.localize('editorSuggestWidgetSelectedBackground', 'Background color of the selected entry in the suggest widget.'));
 export const editorSuggestWidgetHighlightForeground = registerColor('editorSuggestWidget.highlightForeground', { dark: listHighlightForeground, light: listHighlightForeground, hc: listHighlightForeground }, nls.localize('editorSuggestWidgetHighlightForeground', 'Color of the match highlights in the suggest widget.'));

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

@@ -210,6 +210,13 @@ export const editorBackground = registerColor('editor.background', { light: '#ff
  */
 export const editorForeground = registerColor('editor.foreground', { light: '#333333', dark: '#BBBBBB', hc: Color.white }, nls.localize('editorForeground', "Editor default foreground color."));
 
+/**
+ * Editor widgets
+ */
+export const editorWidgetBackground = registerColor('editorWidget.background', { dark: '#2D2D30', light: '#EFEFF2', hc: '#0C141F' }, nls.localize('editorWidgetBackground', 'Background color of editor widgets, such as find/replace.'));
+export const editorWidgetBorder = registerColor('editorWidget.border', { dark: '#454545', light: '#C8C8C8', hc: contrastBorder }, nls.localize('editorWidgetBorder', 'Border color of the editor widget.'));
+
+
 /**
  * Editor selection colors.
  */
@@ -228,20 +235,14 @@ export const editorFindRangeHighlight = registerColor('editor.findRangeHighlight
  * 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.'));
+export const editorHoverBackground = registerColor('editorHoverWidget.background', { light: editorWidgetBackground, dark: editorWidgetBackground, hc: editorWidgetBackground }, nls.localize('hoverBackground', 'Background color of the editor hover.'));
+export const editorHoverBorder = registerColor('editorHoverWidget.border', { light: editorWidgetBorder, dark: editorWidgetBorder, hc: editorWidgetBorder }, nls.localize('hoverBorder', 'Border color of the editor hover.'));
 
 /**
  * Editor link colors
  */
 export const editorActiveLinkForeground = registerColor('editorLink.activeForeground', { dark: '#4E94CE', light: Color.blue, hc: Color.cyan }, nls.localize('activeLinkForeground', 'Color of active links.'));
 
-/**
- * Find widget
- */
-export const editorWidgetBackground = registerColor('editorWidget.background', { dark: '#2D2D30', light: '#EFEFF2', hc: '#0C141F' }, nls.localize('editorWidgetBackground', 'Background color of editor widgets, such as find/replace.'));
-
-
 // ----- color functions
 
 export function darken(colorValue: ColorValue, factor: number): ColorFunction {