Fixes Microsoft/monaco-editor#773

src/vs/editor/contrib/colorPicker/colorPickerWidget.ts

@@ -13,7 +13,7 @@ import { Disposable } from 'vs/base/common/lifecycle';
 import { GlobalMouseMoveMonitor, IStandardMouseMoveEventData, standardMouseMoveMerger } from 'vs/base/browser/globalMouseMoveMonitor';
 import { Color, RGBA, HSVA } from 'vs/base/common/color';
 import { editorHoverBackground } from 'vs/platform/theme/common/colorRegistry';
-import { registerThemingParticipant } from 'vs/platform/theme/common/themeService';
+import { registerThemingParticipant, IThemeService } from 'vs/platform/theme/common/themeService';
 
 const $ = dom.$;
 
@@ -23,7 +23,7 @@ export class ColorPickerHeader extends Disposable {
 	private pickedColorNode: HTMLElement;
 	private backgroundColor: Color;
 
-	constructor(container: HTMLElement, private model: ColorPickerModel) {
+	constructor(container: HTMLElement, private model: ColorPickerModel, themeService: IThemeService) {
 		super();
 
 		this.domNode = $('.colorpicker-header');
@@ -34,6 +34,7 @@ export class ColorPickerHeader extends Disposable {
 		const colorBox = dom.append(this.domNode, $('.original-color'));
 		colorBox.style.backgroundColor = Color.Format.CSS.format(this.model.originalColor);
 
+		this.backgroundColor = themeService.getTheme().getColor(editorHoverBackground) || Color.white;
 		this._register(registerThemingParticipant((theme, collector) => {
 			this.backgroundColor = theme.getColor(editorHoverBackground) || Color.white;
 		}));
@@ -332,7 +333,7 @@ export class ColorPickerWidget extends Widget {
 
 	body: ColorPickerBody;
 
-	constructor(container: Node, private model: ColorPickerModel, private pixelRatio: number) {
+	constructor(container: Node, private model: ColorPickerModel, private pixelRatio: number, themeService: IThemeService) {
 		super();
 
 		this._register(onDidChangeZoomLevel(() => this.layout()));
@@ -340,7 +341,7 @@ export class ColorPickerWidget extends Widget {
 		const element = $('.colorpicker-widget');
 		container.appendChild(element);
 
-		const header = new ColorPickerHeader(element, this.model);
+		const header = new ColorPickerHeader(element, this.model, themeService);
 		this.body = new ColorPickerBody(element, this.model, this.pixelRatio);
 
 		this._register(header);

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

@@ -19,7 +19,7 @@ import { ICodeEditor, IEditorMouseEvent, MouseTargetType } from 'vs/editor/brows
 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 { registerThemingParticipant, IThemeService } from 'vs/platform/theme/common/themeService';
 import { editorHoverHighlight, editorHoverBackground, editorHoverBorder, textLinkForeground, textCodeBlockBackground } from 'vs/platform/theme/common/colorRegistry';
 import { EditorContextKeys } from 'vs/editor/common/editorContextKeys';
 import { MarkdownRenderer } from 'vs/editor/contrib/markdown/markdownRenderer';
@@ -57,7 +57,8 @@ export class ModesHoverController implements editorCommon.IEditorContribution {
 
 	constructor(editor: ICodeEditor,
 		@IOpenerService private readonly _openerService: IOpenerService,
-		@IModeService private readonly _modeService: IModeService
+		@IModeService private readonly _modeService: IModeService,
+		@IThemeService private readonly _themeService: IThemeService
 	) {
 		this._editor = editor;
 
@@ -159,7 +160,7 @@ export class ModesHoverController implements editorCommon.IEditorContribution {
 
 	private _createHoverWidget() {
 		const renderer = new MarkdownRenderer(this._editor, this._modeService, this._openerService);
-		this._contentWidget = new ModesContentHoverWidget(this._editor, renderer);
+		this._contentWidget = new ModesContentHoverWidget(this._editor, renderer, this._themeService);
 		this._glyphWidget = new ModesGlyphHoverWidget(this._editor, renderer);
 	}
 

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

@@ -23,6 +23,7 @@ import { ColorDetector } from 'vs/editor/contrib/colorPicker/colorDetector';
 import { Color, RGBA } from 'vs/base/common/color';
 import { IDisposable, empty as EmptyDisposable, dispose, combinedDisposable } from 'vs/base/common/lifecycle';
 import { getColorPresentations } from 'vs/editor/contrib/colorPicker/color';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 const $ = dom.$;
 
 class ColorHover {
@@ -169,7 +170,11 @@ export class ModesContentHoverWidget extends ContentHoverWidget {
 	private renderDisposable: IDisposable = EmptyDisposable;
 	private toDispose: IDisposable[] = [];
 
-	constructor(editor: ICodeEditor, markdownRenderner: MarkdownRenderer) {
+	constructor(
+		editor: ICodeEditor,
+		markdownRenderner: MarkdownRenderer,
+		private readonly _themeService: IThemeService
+	) {
 		super(ModesContentHoverWidget.ID, editor);
 
 		this._computer = new ModesContentComputer(this._editor);
@@ -331,7 +336,7 @@ export class ModesContentHoverWidget extends ContentHoverWidget {
 
 				// create blank olor picker model and widget first to ensure it's positioned correctly.
 				const model = new ColorPickerModel(color, [], 0);
-				const widget = new ColorPickerWidget(fragment, model, this._editor.getConfiguration().pixelRatio);
+				const widget = new ColorPickerWidget(fragment, model, this._editor.getConfiguration().pixelRatio, this._themeService);
 
 				getColorPresentations(editorModel, colorInfo, msg.provider).then(colorPresentations => {
 					model.colorPresentations = colorPresentations;