diff --git a/src/vs/base/browser/ui/centered/centeredViewLayout.ts b/src/vs/base/browser/ui/centered/centeredViewLayout.ts
index 345a723e5828d9152e7dbab8abb175fe937249a9..532300846142542a15a596c6a38ddd025113cc13 100644
--- a/src/vs/base/browser/ui/centered/centeredViewLayout.ts
+++ b/src/vs/base/browser/ui/centered/centeredViewLayout.ts
@@ -8,6 +8,7 @@ import { $ } from 'vs/base/browser/dom';
 import { Event, mapEvent } from 'vs/base/common/event';
 import { IView } from 'vs/base/browser/ui/grid/gridview';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
+import { Color } from 'vs/base/common/color';
 
 export interface CenteredViewState {
 	leftMarginRatio: number;
@@ -19,9 +20,13 @@ const GOLDEN_RATIO = {
 	rightMarginRatio: 0.1909
 };
 
-function createEmptyView() {
+function createEmptyView(background: Color): ISplitViewView {
+	const element = $('.centered-layout-margin');
+	element.style.height = '100%';
+	element.style.backgroundColor = background.toString();
+
 	return {
-		element: $('.centered-layout-margin'),
+		element,
 		layout: () => undefined,
 		minimumSize: 60,
 		maximumSize: Number.POSITIVE_INFINITY,
@@ -39,13 +44,18 @@ function toSplitViewView(view: IView, getHeight: () => number): ISplitViewView {
 	};
 }
 
+export interface ICenteredViewStyles extends ISplitViewStyles {
+	background: Color;
+}
+
 export class CenteredViewLayout {
 
 	private splitView: SplitView;
 	private width: number = 0;
 	private height: number = 0;
-	private style: ISplitViewStyles;
+	private style: ICenteredViewStyles;
 	private didLayout = false;
+	private emptyViews: ISplitViewView[];
 	private splitViewDisposables: IDisposable[] = [];
 
 	constructor(private container: HTMLElement, private view: IView, public readonly state: CenteredViewState = GOLDEN_RATIO) {
@@ -75,10 +85,12 @@ export class CenteredViewLayout {
 		return !!this.splitView;
 	}
 
-	styles(style: ISplitViewStyles): void {
+	styles(style: ICenteredViewStyles): void {
 		this.style = style;
 		if (this.splitView) {
 			this.splitView.style(this.style);
+			this.emptyViews[0].element.style.backgroundColor = this.style.background.toString();
+			this.emptyViews[1].element.style.backgroundColor = this.style.background.toString();
 		}
 	}
 
@@ -107,13 +119,15 @@ export class CenteredViewLayout {
 
 			this.splitView.layout(this.width);
 			this.splitView.addView(toSplitViewView(this.view, () => this.height), 0);
-			this.splitView.addView(createEmptyView(), this.state.leftMarginRatio * this.width, 0);
-			this.splitView.addView(createEmptyView(), this.state.rightMarginRatio * this.width, 2);
+			this.emptyViews = [createEmptyView(this.style.background), createEmptyView(this.style.background)];
+			this.splitView.addView(this.emptyViews[0], this.state.leftMarginRatio * this.width, 0);
+			this.splitView.addView(this.emptyViews[1], this.state.rightMarginRatio * this.width, 2);
 		} else {
 			this.container.removeChild(this.splitView.el);
 			this.splitViewDisposables = dispose(this.splitViewDisposables);
 			this.splitView.dispose();
 			this.splitView = undefined;
+			this.emptyViews = undefined;
 			this.container.appendChild(this.view.element);
 		}
 	}
diff --git a/src/vs/workbench/browser/parts/editor/editorPart.ts b/src/vs/workbench/browser/parts/editor/editorPart.ts
index 40229727a6d26220bb344cbd306a9e2772d250e8..412afb3d2da3748b957287fdce0c7efdce84654e 100644
--- a/src/vs/workbench/browser/parts/editor/editorPart.ts
+++ b/src/vs/workbench/browser/parts/editor/editorPart.ts
@@ -10,7 +10,7 @@ import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { Part } from 'vs/workbench/browser/part';
 import { Dimension, isAncestor, toggleClass, addClass, $ } from 'vs/base/browser/dom';
 import { Event, Emitter, once, Relay, anyEvent } from 'vs/base/common/event';
-import { contrastBorder, editorBackground } from 'vs/platform/theme/common/colorRegistry';
+import { contrastBorder, editorBackground, registerColor } from 'vs/platform/theme/common/colorRegistry';
 import { GroupDirection, IAddGroupOptions, GroupsArrangement, GroupOrientation, IMergeGroupOptions, MergeGroupMode, ICopyEditorOptions, GroupsOrder, GroupChangeKind, GroupLocation, IFindGroupScope, EditorGroupLayout, GroupLayoutArgument } from 'vs/workbench/services/group/common/editorGroupsService';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { Direction, SerializableGrid, Sizing, ISerializedGrid, Orientation, ISerializedNode, GridBranchNode, isGridBranchNode, GridNode, createSerializedGrid, Grid } from 'vs/base/browser/ui/grid/grid';
@@ -85,6 +85,12 @@ class GridWidgetView<T extends IView> implements IView {
 	}
 }
 
+export const EDITOR_PANE_BACKGROUND = registerColor('editorPane.background', {
+	dark: editorBackground,
+	light: editorBackground,
+	hc: editorBackground
+}, localize('editorPaneBackground', "Background color of the editor pane visible on the left and right side of the centered editor layout."));
+
 export class EditorPart extends Part implements EditorGroupsServiceImpl, IEditorGroupsAccessor {
 
 	_serviceBrand: any;
@@ -751,7 +757,7 @@ export class EditorPart extends Part implements EditorGroupsServiceImpl, IEditor
 	protected updateStyles(): void {
 		this.container.style.backgroundColor = this.getColor(editorBackground);
 
-		const separatorBorderStyle = { separatorBorder: this.gridSeparatorBorder };
+		const separatorBorderStyle = { separatorBorder: this.gridSeparatorBorder, background: this.theme.getColor(EDITOR_PANE_BACKGROUND) || Color.transparent };
 		this.gridWidget.style(separatorBorderStyle);
 		this.centeredLayoutWidget.styles(separatorBorderStyle);
 	}