fixes #32296

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

@@ -27,15 +27,15 @@
 .colorpicker-header .picked-color {
 	width: 216px;
 	text-align: center;
-	text-shadow: 0.5px 0.5px 0.5px black;
 	line-height: 20px;
 	cursor: pointer;
-}
-
-.colorpicker-header .picked-color {
+	color: white;
 	flex: 1;
 	text-align: center;
-	color: rgba(255, 255, 255, 1);
+}
+
+.colorpicker-header .picked-color.light {
+	color: black;
 }
 
 .colorpicker-header .original-color {

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

@@ -12,6 +12,8 @@ import { ColorPickerModel } from 'vs/editor/contrib/colorPicker/browser/colorPic
 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';
 
 const $ = dom.$;
 
@@ -19,6 +21,7 @@ export class ColorPickerHeader extends Disposable {
 
 	private domNode: HTMLElement;
 	private pickedColorNode: HTMLElement;
+	private backgroundColor: Color;
 
 	constructor(container: HTMLElement, private model: ColorPickerModel) {
 		super();
@@ -31,14 +34,19 @@ export class ColorPickerHeader extends Disposable {
 		const colorBox = dom.append(this.domNode, $('.original-color'));
 		colorBox.style.backgroundColor = Color.Format.CSS.format(this.model.originalColor);
 
+		this._register(registerThemingParticipant((theme, collector) => {
+			this.backgroundColor = theme.getColor(editorHoverBackground) || Color.white;
+		}));
+
 		this._register(dom.addDisposableListener(this.pickedColorNode, dom.EventType.CLICK, () => this.model.selectNextColorFormat()));
 		this._register(model.onDidChangeColor(this.onDidChangeColor, this));
 		this._register(model.onDidChangeFormatter(this.onDidChangeFormatter, this));
-		this.onDidChangeColor();
+		this.onDidChangeColor(this.model.color);
 	}
 
-	private onDidChangeColor(): void {
-		this.pickedColorNode.style.backgroundColor = Color.Format.CSS.format(this.model.color);
+	private onDidChangeColor(color: Color): void {
+		this.pickedColorNode.style.backgroundColor = Color.Format.CSS.format(color);
+		dom.toggleClass(this.pickedColorNode, 'light', color.rgba.a < 128 ? this.backgroundColor.isLighter() : color.isLighter());
 		this.onDidChangeFormatter();
 	}