theming - editorSideBySideBorder

extensions/theme-abyss/themes/abyss-color-theme.json

@@ -275,6 +275,7 @@
 		"editorGroupBorder": "#2b2b4a",
 		"editorGroupBackground": "#1c1c2a",
 		"editorDragAndDropBackground": "#25375daa",
+		"editorSideBySideBorder": "#10192c",
 		"panelBorderTopColor": "#2b2b4a",
 		"statusBarBackground": "#10192c",
 		"activityBarBackground": "#051336",

src/vs/workbench/browser/parts/editor/media/sidebysideEditor.css

-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-/* TODO@theme */
-
-.vs .monaco-workbench .side-by-side-editor > .master-editor-container {
-	box-shadow: -6px 0 5px -5px #DDD;
-}
-
-.vs-dark .monaco-workbench .side-by-side-editor > .master-editor-container {
-	box-shadow: -6px 0 5px -5px black;
-}
\ No newline at end of file

src/vs/workbench/browser/parts/editor/sideBySideEditor.ts

@@ -3,7 +3,6 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import 'vs/css!./media/sidebysideEditor';
 import { TPromise } from 'vs/base/common/winjs.base';
 import * as strings from 'vs/base/common/strings';
 import * as DOM from 'vs/base/browser/dom';
@@ -18,6 +17,7 @@ import { VSash } from 'vs/base/browser/ui/sash/sash';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { EDITOR_SIDE_BY_SIDE_BORDER } from 'vs/workbench/common/theme';
 
 export class SideBySideEditor extends BaseEditor {
 
@@ -157,6 +157,16 @@ export class SideBySideEditor extends BaseEditor {
 		this.detailsEditorContainer.style.position = 'absolute';
 		this.masterEditorContainer = DOM.append(parentElement, DOM.$('.master-editor-container'));
 		this.masterEditorContainer.style.position = 'absolute';
+
+		this.updateStyles();
+	}
+
+	protected updateStyles(): void {
+		super.updateStyles();
+
+		if (this.masterEditorContainer) {
+			this.masterEditorContainer.style.boxShadow = `-6px 0 5px -5px ${this.getColor(EDITOR_SIDE_BY_SIDE_BORDER)}`;
+		}
 	}
 
 	private createSash(parentElement: HTMLElement): void {

src/vs/workbench/common/theme.ts

@@ -97,6 +97,12 @@ export const EDITOR_DRAG_AND_DROP_BACKGROUND = registerColor('editorDragAndDropB
 	hc: null
 }, nls.localize('editorDragAndDropBackground', "Background color when dragging editors around."));
 
+export const EDITOR_SIDE_BY_SIDE_BORDER = registerColor('editorSideBySideBorder', {
+	dark: '#000000',
+	light: '#DDDDDD',
+	hc: null
+}, nls.localize('editorSideBySideBorder', "Border color to separate the details from the master side for side by side editors."));
+
 
 // < --- Panels --- >