Allow theming the diff view's diagonal fill with diffEditor.diagonalFill

robertrossmann · robertrossmann · commit 9712603f2928 · 2020-04-24T13:12:50.000+02:00
diff --git a/src/vs/editor/browser/widget/diffEditorWidget.ts b/src/vs/editor/browser/widget/diffEditorWidget.ts
@@ -38,7 +38,7 @@ import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { ServiceCollection } from 'vs/platform/instantiation/common/serviceCollection';
 import { INotificationService } from 'vs/platform/notification/common/notification';
-import { defaultInsertColor, defaultRemoveColor, diffBorder, diffInserted, diffInsertedOutline, diffRemoved, diffRemovedOutline, scrollbarShadow, scrollbarSliderBackground, scrollbarSliderHoverBackground, scrollbarSliderActiveBackground } from 'vs/platform/theme/common/colorRegistry';
+import { defaultInsertColor, defaultRemoveColor, diffBorder, diffInserted, diffInsertedOutline, diffRemoved, diffRemovedOutline, scrollbarShadow, scrollbarSliderBackground, scrollbarSliderHoverBackground, scrollbarSliderActiveBackground, diffDiagonalFill } from 'vs/platform/theme/common/colorRegistry';
 import { IColorTheme, IThemeService, getThemeTypeSelector, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { IDiffLinesChange, InlineDiffMargin } from 'vs/editor/browser/widget/inlineDiffMargin';
@@ -2244,4 +2244,17 @@ registerThemingParticipant((theme, collector) => {
 		`);
 	}
 
+	const diffDiagonalFillColor = theme.getColor(diffDiagonalFill);
+	collector.addRule(`
+	.monaco-editor .diagonal-fill {
+		background-image: linear-gradient(
+			-45deg,
+			${diffDiagonalFillColor} 12.5%,
+			#0000 12.5%, #0000 50%,
+			${diffDiagonalFillColor} 50%, ${diffDiagonalFillColor} 62.5%,
+			#0000 62.5%, #0000 100%
+		);
+		background-size: 8px 8px;
+	}
+	`);
 });
diff --git a/src/vs/editor/browser/widget/media/diagonal-fill.png b/src/vs/editor/browser/widget/media/diagonal-fill.png
diff --git a/src/vs/editor/browser/widget/media/diffEditor.css b/src/vs/editor/browser/widget/media/diffEditor.css
@@ -51,16 +51,6 @@
 	text-align: right;
 }
 
-.monaco-editor .diagonal-fill {
-	background: url('diagonal-fill.png');
-}
-.monaco-editor.vs-dark .diagonal-fill {
-	opacity: 0.2;
-}
-.monaco-editor.hc-black .diagonal-fill {
-	background: none;
-}
-
 /* ---------- Inline Diff ---------- */
 
 .monaco-editor .view-zones .view-lines .view-line span {
diff --git a/src/vs/platform/theme/common/colorRegistry.ts b/src/vs/platform/theme/common/colorRegistry.ts
@@ -341,6 +341,7 @@ export const diffInsertedOutline = registerColor('diffEditor.insertedTextBorder'
 export const diffRemovedOutline = registerColor('diffEditor.removedTextBorder', { dark: null, light: null, hc: '#FF008F' }, nls.localize('diffEditorRemovedOutline', 'Outline color for text that got removed.'));
 
 export const diffBorder = registerColor('diffEditor.border', { dark: null, light: null, hc: contrastBorder }, nls.localize('diffEditorBorder', 'Border color between the two text editors.'));
+export const diffDiagonalFill = registerColor('diffEditor.diagonalFill', { dark: '#cccccc33', light: '#22222233', hc: null }, nls.localize('diffDiagonalFill', "Color of the diff editor's diagonal fill. The diagonal fill is used in side-by-side diff views."));
 
 /**
  * List and tree colors
