[Theme] allow to set editor gutter background. Fixes #22410

src/vs/editor/browser/viewParts/glyphMargin/glyphMargin.ts

@@ -11,9 +11,6 @@ import { ViewContext } from 'vs/editor/common/view/viewContext';
 import { RenderingContext } from 'vs/editor/common/view/renderingContext';
 import * as viewEvents from 'vs/editor/common/view/viewEvents';
 
-import { editorBackground } from 'vs/platform/theme/common/colorRegistry';
-import { registerThemingParticipant } from 'vs/platform/theme/common/themeService';
-
 export class DecorationToRender {
 	_decorationToRenderBrand: void;
 
@@ -200,11 +197,4 @@ export class GlyphMarginOverlay extends DedupOverlay {
 		}
 		return this._renderResult[lineIndex];
 	}
-}
-
-registerThemingParticipant((theme, collector) => {
-	let editorBackgroundColor = theme.getColor(editorBackground);
-	if (editorBackgroundColor) {
-		collector.addRule(`.monaco-editor.${theme.selector} .glyph-margin { background-color: ${editorBackgroundColor}; }`);
-	}
-});
\ No newline at end of file
+}
\ No newline at end of file

src/vs/editor/browser/viewParts/margin/margin.ts

@@ -42,7 +42,7 @@ export class Margin extends ViewPart {
 
 	private _createDomNode(): FastDomNode<HTMLElement> {
 		let domNode = createFastDomNode(document.createElement('div'));
-		domNode.setClassName('margin' + ' monaco-editor-background');
+		domNode.setClassName('margin');
 		domNode.setPosition('absolute');
 		domNode.setAttribute('role', 'presentation');
 		domNode.setAttribute('aria-hidden', 'true');

src/vs/editor/common/view/editorColorRegistry.ts

@@ -27,26 +27,33 @@ export const editorBracketMatchBorder = registerColor('editorBracketMatch.border
 
 export const editorOverviewRulerBorder = registerColor('editorOverviewRuler.border', { dark: '#7f7f7f4d', light: '#7f7f7f4d', hc: '#7f7f7f4d' }, nls.localize('editorOverviewRulerBorder', 'Color of the overview ruler border.'));
 
+export const editorGutter = registerColor('editorGutter.background', { dark: editorBackground, light: editorBackground, hc: editorBackground }, nls.localize('editorGutter', 'Background color of the editor gutter. The gutter contains the glyph margins and the line numbers.'));
+
 
 // contains all color rules that used to defined in editor/browser/widget/editor.css
 registerThemingParticipant((theme, collector) => {
 
 	let background = theme.getColor(editorBackground);
 	if (background) {
-		collector.addRule(`.monaco-editor.${theme.selector} .monaco-editor-background, .monaco-editor.${theme.selector} .inputarea.ime-input { background-color: ${background}; }`);
+		collector.addRule(`.monaco-editor .monaco-editor-background, .monaco-editor .inputarea.ime-input { background-color: ${background}; }`);
 	}
 	let foreground = theme.getColor(editorForeground);
 	if (foreground) {
-		collector.addRule(`.monaco-editor.${theme.selector}, .monaco-editor.${theme.selector} .inputarea.ime-input { color: ${foreground}; }`);
+		collector.addRule(`.monaco-editor, .monaco-editor .inputarea.ime-input { color: ${foreground}; }`);
+	}
+
+	let gutter = theme.getColor(editorGutter);
+	if (gutter) {
+		collector.addRule(`.monaco-editor .margin { background-color: ${gutter}; }`);
 	}
 
 	let rangeHighlight = theme.getColor(editorRangeHighlight);
 	if (rangeHighlight) {
-		collector.addRule(`.monaco-editor.${theme.selector} .rangeHighlight { background-color: ${rangeHighlight}; }`);
+		collector.addRule(`.monaco-editor .rangeHighlight { background-color: ${rangeHighlight}; }`);
 	}
 	let outline = theme.getColor(activeContrastBorder);
 	if (outline) {
-		collector.addRule(`.monaco-editor.${theme.selector} .rangeHighlight { border: 1px dotted ${outline}; }; }`);
+		collector.addRule(`.monaco-editor .rangeHighlight { border: 1px dotted ${outline}; }; }`);
 	}
 
 	let invisibles = theme.getColor(editorWhitespaces);

src/vs/editor/contrib/find/browser/findOptionsWidget.ts

@@ -42,7 +42,7 @@ export class FindOptionsWidget extends Widget implements IOverlayWidget {
 		this._keybindingService = keybindingService;
 
 		this._domNode = document.createElement('div');
-		this._domNode.className = 'monaco-editor-background findOptionsWidget';
+		this._domNode.className = 'findOptionsWidget';
 		this._domNode.style.display = 'none';
 		this._domNode.style.top = '10px';
 		this._domNode.setAttribute('role', 'presentation');
@@ -192,16 +192,16 @@ export class FindOptionsWidget extends Widget implements IOverlayWidget {
 registerThemingParticipant((theme, collector) => {
 	let widgetBackground = theme.getColor(editorWidgetBackground);
 	if (widgetBackground) {
-		collector.addRule(`.monaco-editor.${theme.selector} .findOptionsWidget { background-color: ${widgetBackground}; }`);
+		collector.addRule(`.monaco-editor .findOptionsWidget { background-color: ${widgetBackground}; }`);
 	}
 
 	let widgetShadowColor = theme.getColor(widgetShadow);
 	if (widgetShadowColor) {
-		collector.addRule(`.monaco-editor.${theme.selector} .findOptionsWidget { box-shadow: 0 2px 8px ${widgetShadowColor}; }`);
+		collector.addRule(`.monaco-editor .findOptionsWidget { box-shadow: 0 2px 8px ${widgetShadowColor}; }`);
 	}
 
 	let hcBorder = theme.getColor(contrastBorder);
 	if (hcBorder) {
-		collector.addRule(`.monaco-editor.${theme.selector} .findOptionsWidget { border: 2px solid ${hcBorder}; }`);
+		collector.addRule(`.monaco-editor .findOptionsWidget { border: 2px solid ${hcBorder}; }`);
 	}
 });
\ No newline at end of file

src/vs/editor/contrib/referenceSearch/browser/referencesWidget.ts

@@ -824,6 +824,7 @@ export const peekViewResultsFileForeground = registerColor('peekViewResult.fileF
 export const peekViewResultsSelectionBackground = registerColor('peekViewResult.selectionBackground', { dark: '#3399ff33', light: '#3399ff33', hc: null }, nls.localize('peekViewResultsSelectionBackground', 'Background color of the selected entry in the peek view result list.'));
 export const peekViewResultsSelectionForeground = registerColor('peekViewResult.selectionForeground', { dark: Color.white, light: '#6C6C6C', hc: Color.white }, nls.localize('peekViewResultsSelectionForeground', 'Foreground color of the selected entry in the peek view result list.'));
 export const peekViewEditorBackground = registerColor('peekViewEditor.background', { dark: '#001F33', light: '#F2F8FC', hc: Color.black }, nls.localize('peekViewEditorBackground', 'Background color of the peek view editor.'));
+export const peekViewEditorGutterBackground = registerColor('peekViewEditorGutter.background', { dark: peekViewEditorBackground, light: peekViewEditorBackground, hc: peekViewEditorBackground }, nls.localize('peekViewEditorGutterBackground', 'Background color of the gutter in the peek view editor.'));
 
 export const peekViewResultsMatchHighlight = registerColor('peekViewResult.matchHighlightBackground', { dark: '#ea5c004d', light: '#ea5c004d', hc: null }, nls.localize('peekViewResultsMatchHighlight', 'Match highlight color in the peek view result list.'));
 export const peekViewEditorMatchHighlight = registerColor('peekViewEditor.matchHighlightBackground', { dark: '#ff8f0099', light: '#f5d802de', hc: null }, nls.localize('peekViewEditorMatchHighlight', 'Match highlight color in the peek view editor.'));
@@ -832,45 +833,50 @@ export const peekViewEditorMatchHighlight = registerColor('peekViewEditor.matchH
 registerThemingParticipant((theme, collector) => {
 	let findMatchHighlightColor = theme.getColor(peekViewResultsMatchHighlight);
 	if (findMatchHighlightColor) {
-		collector.addRule(`.monaco-editor.${theme.selector} .reference-zone-widget .ref-tree .referenceMatch { background-color: ${findMatchHighlightColor}; }`);
+		collector.addRule(`.monaco-editor .reference-zone-widget .ref-tree .referenceMatch { background-color: ${findMatchHighlightColor}; }`);
 	}
 	let referenceHighlightColor = theme.getColor(peekViewEditorMatchHighlight);
 	if (referenceHighlightColor) {
-		collector.addRule(`.monaco-editor.${theme.selector} .reference-zone-widget .preview .reference-decoration { background-color: ${referenceHighlightColor}; }`);
+		collector.addRule(`.monaco-editor .reference-zone-widget .preview .reference-decoration { background-color: ${referenceHighlightColor}; }`);
 	}
 	let hcOutline = theme.getColor(activeContrastBorder);
 	if (hcOutline) {
-		collector.addRule(`.monaco-editor.${theme.selector} .reference-zone-widget .ref-tree .referenceMatch { border: 1px dotted ${hcOutline}; box-sizing: border-box; }`);
-		collector.addRule(`.monaco-editor.${theme.selector} .reference-zone-widget .preview .reference-decoration { border: 2px solid ${hcOutline}; box-sizing: border-box; }`);
+		collector.addRule(`.monaco-editor .reference-zone-widget .ref-tree .referenceMatch { border: 1px dotted ${hcOutline}; box-sizing: border-box; }`);
+		collector.addRule(`.monaco-editor .reference-zone-widget .preview .reference-decoration { border: 2px solid ${hcOutline}; box-sizing: border-box; }`);
 	}
 	let resultsBackground = theme.getColor(peekViewResultsBackground);
 	if (resultsBackground) {
-		collector.addRule(`.monaco-editor.${theme.selector} .reference-zone-widget .ref-tree { background-color: ${resultsBackground}; }`);
+		collector.addRule(`.monaco-editor .reference-zone-widget .ref-tree { background-color: ${resultsBackground}; }`);
 	}
 	let resultsMatchForeground = theme.getColor(peekViewResultsMatchForeground);
 	if (resultsMatchForeground) {
-		collector.addRule(`.monaco-editor.${theme.selector} .reference-zone-widget .ref-tree { color: ${resultsMatchForeground}; }`);
+		collector.addRule(`.monaco-editor .reference-zone-widget .ref-tree { color: ${resultsMatchForeground}; }`);
 	}
 	let resultsFileForeground = theme.getColor(peekViewResultsFileForeground);
 	if (resultsFileForeground) {
-		collector.addRule(`.monaco-editor.${theme.selector} .reference-zone-widget .ref-tree .reference-file { color: ${resultsFileForeground}; }`);
+		collector.addRule(`.monaco-editor .reference-zone-widget .ref-tree .reference-file { color: ${resultsFileForeground}; }`);
 	}
 	let resultsSelectedBackground = theme.getColor(peekViewResultsSelectionBackground);
 	if (resultsSelectedBackground) {
-		collector.addRule(`.monaco-editor.${theme.selector} .reference-zone-widget .ref-tree .monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) { background-color: ${resultsSelectedBackground}; }`);
+		collector.addRule(`.monaco-editor .reference-zone-widget .ref-tree .monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) { background-color: ${resultsSelectedBackground}; }`);
 	}
 	let resultsSelectedForeground = theme.getColor(peekViewResultsSelectionForeground);
 	if (resultsSelectedForeground) {
-		collector.addRule(`.monaco-editor.${theme.selector} .reference-zone-widget .ref-tree .monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) { color: ${resultsSelectedForeground} !important; }`);
+		collector.addRule(`.monaco-editor .reference-zone-widget .ref-tree .monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) { color: ${resultsSelectedForeground} !important; }`);
 	}
 	let editorBackground = theme.getColor(peekViewEditorBackground);
 	if (editorBackground) {
 		collector.addRule(
-			`.monaco-editor.${theme.selector} .reference-zone-widget .preview .monaco-editor,` +
-			`.monaco-editor.${theme.selector} .reference-zone-widget .preview .glyph-margin,` +
-			`.monaco-editor.${theme.selector} .reference-zone-widget .preview .monaco-editor-background,` +
-			`.monaco-editor.${theme.selector} .reference-zone-widget .preview .monaco-editor .margin .view-line {` +
+			`.monaco-editor .reference-zone-widget .preview .monaco-editor .monaco-editor-background,` +
+			`.monaco-editor .reference-zone-widget .preview .monaco-editor .inputarea.ime-input {` +
 			`	background-color: ${editorBackground};` +
 			`}`);
 	}
+	let editorGutterBackground = theme.getColor(peekViewEditorGutterBackground);
+	if (editorGutterBackground) {
+		collector.addRule(
+			`.monaco-editor .reference-zone-widget .preview .monaco-editor .margin {` +
+			`	background-color: ${editorGutterBackground};` +
+			`}`);
+	}
 });