theming - dirty diff colors

src/vs/workbench/parts/scm/electron-browser/dirtydiffDecorator.ts

@@ -23,6 +23,10 @@ import URI from 'vs/base/common/uri';
 import { IEditorGroupService } from 'vs/workbench/services/group/common/groupService';
 import { ISCMService } from 'vs/workbench/services/scm/common/scm';
 import { ModelDecorationOptions } from "vs/editor/common/model/textModelWithDecorations";
+import { registerThemingParticipant, ITheme, ICssStyleCollector } from "vs/platform/theme/common/themeService";
+import { registerColor } from "vs/platform/theme/common/colorRegistry";
+import { localize } from "vs/nls";
+import { Color } from "vs/base/common/color";
 
 class DirtyDiffModelDecorator {
 
@@ -266,3 +270,44 @@ export class DirtyDiffDecorator implements ext.IWorkbenchContribution {
 		this.decorators = null;
 	}
 }
+
+export const editorGutterModifiedBackground = registerColor('editorGutter.modifiedBackground', {
+	dark: Color.fromHex('#00bcf2').transparent(0.6),
+	light: Color.fromHex('#007acc').transparent(0.6),
+	hc: Color.fromHex('#007acc').transparent(0.6)
+}, localize('editorGutterModifiedBackground', "Editor gutter background color for lines that are modified."));
+
+export const editorGutterAddedBackground = registerColor('editorGutter.addedBackground', {
+	dark: Color.fromHex('#7fba00').transparent(0.6),
+	light: Color.fromHex('#2d883e').transparent(0.6),
+	hc: Color.fromHex('#2d883e').transparent(0.6)
+}, localize('editorGutterAddedBackground', "Editor gutter background color for lines that are added."));
+
+export const editorGutteDeletedBackground = registerColor('editorGutter.deletedBackground', {
+	dark: Color.fromHex('#b9131a').transparent(0.76),
+	light: Color.fromHex('#b9131a').transparent(0.76),
+	hc: Color.fromHex('#b9131a').transparent(0.76)
+}, localize('editorGutterDeletedBackground', "Editor gutter background color for lines that are deleted."));
+
+registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
+	const editorGutterModifiedBackgroundColor = theme.getColor(editorGutterModifiedBackground);
+	if (editorGutterModifiedBackgroundColor) {
+		collector.addRule(`.monaco-editor .dirty-diff-modified-glyph { border-left: 3px solid ${editorGutterModifiedBackgroundColor}; }`);
+	}
+
+	const editorGutterAddedBackgroundColor = theme.getColor(editorGutterAddedBackground);
+	if (editorGutterAddedBackgroundColor) {
+		collector.addRule(`.monaco-editor .dirty-diff-added-glyph { border-left: 3px solid ${editorGutterAddedBackgroundColor}; }`);
+	}
+
+	const editorGutteDeletedBackgroundColor = theme.getColor(editorGutteDeletedBackground);
+	if (editorGutteDeletedBackgroundColor) {
+		collector.addRule(`
+			.monaco-editor .dirty-diff-deleted-glyph:after {
+				border-top: 4px solid transparent;
+				border-bottom: 4px solid transparent;
+				border-left: 4px solid ${editorGutteDeletedBackgroundColor};
+			}
+		`);
+	}
+});
\ No newline at end of file

src/vs/workbench/parts/scm/electron-browser/media/dirtydiffDecorator.css

@@ -3,23 +3,9 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.monaco-editor .dirty-diff-modified-glyph {
-	border-left: 3px solid rgba(0, 122, 204, 0.6);
-	margin-left: 5px;
-}
-
-.monaco-editor.vs-dark .dirty-diff-modified-glyph {
-	border-left: 3px solid rgba(0, 188, 242, 0.6);
-	margin-left: 5px;
-}
-
-.monaco-editor .dirty-diff-added-glyph {
-	border-left: 3px solid rgba(45, 136, 62, 0.6);
-	margin-left: 5px;
-}
-
-.monaco-editor.vs-dark .dirty-diff-added-glyph {
-	border-left: 3px solid  rgba(127, 186, 0, 0.6);
+.monaco-editor .dirty-diff-modified-glyph,
+.monaco-editor .dirty-diff-added-glyph,
+.monaco-editor .dirty-diff-deleted-glyph:after {
 	margin-left: 5px;
 }
 
@@ -27,11 +13,7 @@
 	content: '';
 	position: absolute;
 	bottom: -4px;
-	margin-left: 5px;
 	box-sizing: border-box;
-	border-left: 4px solid rgba(185, 19, 26, 0.76);
-	border-top: 4px solid transparent;
-	border-bottom: 4px solid transparent;
 	width: 4px;
 	height: 0;
 	z-index: 9;