Use css vars for lightbulb (#165186)

Fixes #165169
microsoft · Nov 1, 2022 · 25c6529 · 25c6529
1 parent a9a1373
commit 25c6529
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 35 deletions.
diff --git a/src/vs/editor/contrib/codeAction/browser/lightBulbWidget.css b/src/vs/editor/contrib/codeAction/browser/lightBulbWidget.css
@@ -3,14 +3,38 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.monaco-editor .contentWidgets .codicon-light-bulb,
-.monaco-editor .contentWidgets .codicon-lightbulb-autofix {
+.monaco-editor .lightBulbWidget {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
 
-.monaco-editor .contentWidgets .codicon-light-bulb:hover,
-.monaco-editor .contentWidgets .codicon-lightbulb-autofix:hover {
+.monaco-editor .lightBulbWidget:hover{
 	cursor: pointer;
 }
+
+.monaco-editor .lightBulbWidget.codicon-light-bulb {
+	color: var(--vscode-editorLightBulb-foreground);
+}
+
+.monaco-editor .lightBulbWidget.codicon-lightbulb-autofix {
+	color: var(--vscode-editorLightBulbAutoFix-foreground, var(--vscode-editorLightBulb-foreground));
+}
+
+.monaco-editor .lightBulbWidget:before {
+	position: relative;
+	z-index: 2;
+}
+
+.monaco-editor .lightBulbWidget:after {
+	position: absolute;
+	top: 0;
+	left: 0;
+	content: '';
+	display: block;
+	width: 100%;
+	height: 100%;
+	opacity: 0.3;
+	background-color: var(--vscode-editor-background);
+	z-index: 1;
+}
diff --git a/src/vs/editor/contrib/codeAction/browser/lightBulbWidget.ts b/src/vs/editor/contrib/codeAction/browser/lightBulbWidget.ts
@@ -17,8 +17,6 @@ import { computeIndentLevel } from 'vs/editor/common/model/utils';
 import type { CodeActionSet, CodeActionTrigger } from 'vs/editor/contrib/codeAction/common/types';
 import * as nls from 'vs/nls';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
-import { editorBackground, editorLightBulbAutoFixForeground, editorLightBulbForeground } from 'vs/platform/theme/common/colorRegistry';
-import { IColorTheme, ICssStyleCollector, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 
 namespace LightBulbState {
 
@@ -48,7 +46,7 @@ export class LightBulbWidget extends Disposable implements IContentWidget {
 
 	private static readonly _posPref = [ContentWidgetPositionPreference.EXACT];
 
-	private readonly _domNode: HTMLDivElement;
+	private readonly _domNode: HTMLElement;
 
 	private readonly _onClick = this._register(new Emitter<{ x: number; y: number; actions: CodeActionSet; trigger: CodeActionTrigger }>());
 	public readonly onClick = this._onClick.event;
@@ -65,8 +63,9 @@ export class LightBulbWidget extends Disposable implements IContentWidget {
 		@IKeybindingService keybindingService: IKeybindingService
 	) {
 		super();
-		this._domNode = document.createElement('div');
-		this._domNode.className = Codicon.lightBulb.classNames;
+
+		this._domNode = dom.$('div.lightBulbWidget');
+
 		this._register(Gesture.ignoreTarget(this._domNode));
 
 		this._editor.addContentWidget(this);
@@ -235,29 +234,3 @@ export class LightBulbWidget extends Disposable implements IContentWidget {
 		this._domNode.title = value;
 	}
 }
-
-registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
-
-	const editorBackgroundColor = theme.getColor(editorBackground)?.transparent(0.7);
-
-	// Lightbulb Icon
-	const editorLightBulbForegroundColor = theme.getColor(editorLightBulbForeground);
-	if (editorLightBulbForegroundColor) {
-		collector.addRule(`
-		.monaco-editor .contentWidgets ${Codicon.lightBulb.cssSelector} {
-			color: ${editorLightBulbForegroundColor};
-			background-color: ${editorBackgroundColor};
-		}`);
-	}
-
-	// Lightbulb Auto Fix Icon
-	const editorLightBulbAutoFixForegroundColor = theme.getColor(editorLightBulbAutoFixForeground);
-	if (editorLightBulbAutoFixForegroundColor) {
-		collector.addRule(`
-		.monaco-editor .contentWidgets ${Codicon.lightbulbAutofix.cssSelector} {
-			color: ${editorLightBulbAutoFixForegroundColor};
-			background-color: ${editorBackgroundColor};
-		}`);
-	}
-
-});