Merge pull request #22662 from Microsoft/ben/theming

First cut of theming inside the workbench

src/vs/workbench/browser/composite.ts

@@ -13,6 +13,7 @@ import { AsyncDescriptor } from 'vs/platform/instantiation/common/descriptors';
 import { IComposite } from 'vs/workbench/common/composite';
 import { IEditorControl } from 'vs/platform/editor/common/editor';
 import Event, { Emitter } from 'vs/base/common/event';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 /**
  * Composites are layed out in the sidebar and panel part of the workbench. At a time only one composite
@@ -35,8 +36,12 @@ export abstract class Composite extends WorkbenchComponent implements IComposite
 	/**
 	 * Create a new composite with the given ID and context.
 	 */
-	constructor(id: string, @ITelemetryService private _telemetryService: ITelemetryService) {
-		super(id);
+	constructor(
+		id: string,
+		private _telemetryService: ITelemetryService,
+		themeService: IThemeService
+	) {
+		super(id, themeService);
 
 		this.visible = false;
 		this._onTitleAreaUpdate = new Emitter<void>();

src/vs/workbench/browser/part.ts

@@ -8,6 +8,7 @@
 import 'vs/css!./media/part';
 import { Dimension, Builder } from 'vs/base/browser/builder';
 import { WorkbenchComponent } from 'vs/workbench/common/component';
+import { IThemeService, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
 
 export interface IPartOptions {
 	hasTitle?: boolean;
@@ -23,8 +24,20 @@ export abstract class Part extends WorkbenchComponent {
 	private contentArea: Builder;
 	private partLayout: PartLayout;
 
-	constructor(id: string, private options: IPartOptions) {
-		super(id);
+	constructor(
+		id: string,
+		private options: IPartOptions,
+		themeService: IThemeService
+	) {
+		super(id, themeService);
+	}
+
+	protected onThemeChange(theme: ITheme, collector: ICssStyleCollector): void {
+
+		// only call if our create() method has been called
+		if (this.parent) {
+			super.onThemeChange(theme, collector);
+		}
 	}
 
 	/**

src/vs/workbench/browser/parts/activitybar/activitybarPart.ts

@@ -30,6 +30,7 @@ import { StandardMouseEvent } from 'vs/base/browser/mouseEvent';
 import { dispose, IDisposable } from 'vs/base/common/lifecycle';
 import { ToggleActivityBarVisibilityAction } from 'vs/workbench/browser/actions/toggleActivityBarVisibility';
 import SCMPreview from 'vs/workbench/parts/scm/browser/scmPreview';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 interface IViewletActivity {
 	badge: IBadge;
@@ -64,9 +65,10 @@ export class ActivitybarPart extends Part implements IActivityBarService {
 		@IStorageService private storageService: IStorageService,
 		@IContextMenuService private contextMenuService: IContextMenuService,
 		@IInstantiationService private instantiationService: IInstantiationService,
-		@IPartService private partService: IPartService
+		@IPartService private partService: IPartService,
+		@IThemeService themeService: IThemeService
 	) {
-		super(id, { hasTitle: false });
+		super(id, { hasTitle: false }, themeService);
 
 		this.viewletIdToActionItems = Object.create(null);
 		this.viewletIdToActions = Object.create(null);

src/vs/workbench/browser/parts/compositePart.ts

@@ -35,6 +35,7 @@ import { IMessageService, Severity } from 'vs/platform/message/common/message';
 import { IProgressService } from 'vs/platform/progress/common/progress';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 export interface ICompositeTitleLabel {
 
@@ -70,6 +71,7 @@ export abstract class CompositePart<T extends Composite> extends Part {
 		protected partService: IPartService,
 		private keybindingService: IKeybindingService,
 		protected instantiationService: IInstantiationService,
+		themeService: IThemeService,
 		private registry: CompositeRegistry<T>,
 		private activeCompositeSettingsKey: string,
 		private nameForTelemetry: string,
@@ -78,7 +80,7 @@ export abstract class CompositePart<T extends Composite> extends Part {
 		id: string,
 		options: IPartOptions
 	) {
-		super(id, options);
+		super(id, options, themeService);
 
 		this.instantiatedCompositeListeners = [];
 		this.mapCompositeToCompositeContainer = {};

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

@@ -16,6 +16,7 @@ import { IEditor, Position, POSITIONS } from 'vs/platform/editor/common/editor';
 import { IInstantiationService, IConstructorSignature0 } from 'vs/platform/instantiation/common/instantiation';
 import { SyncDescriptor, AsyncDescriptor } from 'vs/platform/instantiation/common/descriptors';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 /**
  * The base class of editors in the workbench. Editors register themselves for specific editor inputs.
@@ -34,8 +35,8 @@ export abstract class BaseEditor extends Panel implements IEditor {
 	private _options: EditorOptions;
 	private _position: Position;
 
-	constructor(id: string, telemetryService: ITelemetryService) {
-		super(id, telemetryService);
+	constructor(id: string, telemetryService: ITelemetryService, themeService: IThemeService) {
+		super(id, telemetryService, themeService);
 	}
 
 	public get input(): EditorInput {

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

@@ -20,6 +20,7 @@ import { BinaryEditorModel } from 'vs/workbench/common/editor/binaryEditorModel'
 import { DiffEditorModel } from 'vs/workbench/common/editor/diffEditorModel';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { ScrollbarVisibility } from 'vs/base/common/scrollable';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 /**
  * An implementation of editor for diffing binary files like images or videos.
@@ -44,9 +45,10 @@ export class BinaryResourceDiffEditor extends BaseEditor implements IVerticalSas
 	private startLeftContainerWidth: number;
 
 	constructor(
-		@ITelemetryService telemetryService: ITelemetryService
+		@ITelemetryService telemetryService: ITelemetryService,
+		@IThemeService themeService: IThemeService
 	) {
-		super(BinaryResourceDiffEditor.ID, telemetryService);
+		super(BinaryResourceDiffEditor.ID, telemetryService, themeService);
 
 		this._onMetadataChanged = new Emitter<void>();
 	}

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

@@ -16,6 +16,7 @@ import { BinaryEditorModel } from 'vs/workbench/common/editor/binaryEditorModel'
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
 import { ScrollbarVisibility } from 'vs/base/common/scrollable';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 /*
  * This class is only intended to be subclassed and not instantiated.
@@ -29,9 +30,10 @@ export abstract class BaseBinaryResourceEditor extends BaseEditor {
 
 	constructor(
 		id: string,
-		telemetryService: ITelemetryService
+		telemetryService: ITelemetryService,
+		themeService: IThemeService
 	) {
-		super(id, telemetryService);
+		super(id, telemetryService, themeService);
 
 		this._onMetadataChanged = new Emitter<void>();
 	}

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

@@ -26,7 +26,6 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
 import { ServiceCollection } from 'vs/platform/instantiation/common/serviceCollection';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { IExtensionService } from 'vs/platform/extensions/common/extensions';
-import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { TabsTitleControl } from 'vs/workbench/browser/parts/editor/tabsTitleControl';
 import { TitleControl, ITitleAreaControl } from 'vs/workbench/browser/parts/editor/titleControl';
 import { NoTabsTitleControl } from 'vs/workbench/browser/parts/editor/noTabsTitleControl';
@@ -34,6 +33,9 @@ import { IEditorStacksModel, IStacksModelChangeEvent, IEditorGroup, EditorOption
 import { extractResources } from 'vs/base/browser/dnd';
 import { IWindowService } from 'vs/platform/windows/common/windows';
 import { getCodeEditor } from 'vs/editor/common/services/codeEditorService';
+import { WorkbenchComponent } from 'vs/workbench/common/component';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { editorBackground } from 'vs/platform/theme/common/colorRegistry';
 
 export enum Rochade {
 	NONE,
@@ -83,7 +85,7 @@ export interface IEditorGroupsControl {
 /**
  * Helper class to manage multiple side by side editors for the editor part.
  */
-export class EditorGroupsControl implements IEditorGroupsControl, IVerticalSashLayoutProvider, IHorizontalSashLayoutProvider {
+export class EditorGroupsControl extends WorkbenchComponent implements IEditorGroupsControl, IVerticalSashLayoutProvider, IHorizontalSashLayoutProvider {
 
 	private static TITLE_AREA_CONTROL_KEY = '__titleAreaControl';
 	private static PROGRESS_BAR_CONTROL_KEY = '__progressBar';
@@ -130,8 +132,6 @@ export class EditorGroupsControl implements IEditorGroupsControl, IVerticalSashL
 	private onStacksChangeScheduler: RunOnceScheduler;
 	private stacksChangedBuffer: IStacksModelChangeEvent[];
 
-	private toDispose: IDisposable[];
-
 	constructor(
 		parent: Builder,
 		groupOrientation: GroupOrientation,
@@ -141,10 +141,12 @@ export class EditorGroupsControl implements IEditorGroupsControl, IVerticalSashL
 		@IContextKeyService private contextKeyService: IContextKeyService,
 		@IExtensionService private extensionService: IExtensionService,
 		@IInstantiationService private instantiationService: IInstantiationService,
-		@IWindowService private windowService: IWindowService
+		@IWindowService private windowService: IWindowService,
+		@IThemeService themeService: IThemeService
 	) {
+		super('workbench.parts.editor.groups', themeService);
+
 		this.stacks = editorGroupService.getStacksModel();
-		this.toDispose = [];
 
 		this.parent = parent;
 		this.dimension = new Dimension(0, 0);
@@ -157,9 +159,10 @@ export class EditorGroupsControl implements IEditorGroupsControl, IVerticalSashL
 		this.visibleEditorFocusTrackers = [];
 
 		this._onGroupFocusChanged = new Emitter<void>();
+		this.toUnbind.push(this._onGroupFocusChanged);
 
 		this.onStacksChangeScheduler = new RunOnceScheduler(() => this.handleStacksChanged(), 0);
-		this.toDispose.push(this.onStacksChangeScheduler);
+		this.toUnbind.push(this.onStacksChangeScheduler);
 		this.stacksChangedBuffer = [];
 
 		this.updateTabOptions(this.editorGroupService.getTabOptions());
@@ -205,8 +208,8 @@ export class EditorGroupsControl implements IEditorGroupsControl, IVerticalSashL
 	}
 
 	private registerListeners(): void {
-		this.toDispose.push(this.stacks.onModelChanged(e => this.onStacksChanged(e)));
-		this.toDispose.push(this.editorGroupService.onTabOptionsChanged(options => this.updateTabOptions(options, true)));
+		this.toUnbind.push(this.stacks.onModelChanged(e => this.onStacksChanged(e)));
+		this.toUnbind.push(this.editorGroupService.onTabOptionsChanged(options => this.updateTabOptions(options, true)));
 		this.extensionService.onReady().then(() => this.onExtensionsReady());
 	}
 
@@ -864,29 +867,29 @@ export class EditorGroupsControl implements IEditorGroupsControl, IVerticalSashL
 		this.enableDropTarget(this.parent.getHTMLElement());
 
 		// Silo One
-		this.silos[Position.ONE] = $(this.parent).div({ class: 'one-editor-silo editor-one monaco-editor-background' });
+		this.silos[Position.ONE] = $(this.parent).div({ class: 'one-editor-silo editor-one' });
 
 		// Sash One
 		this.sashOne = new Sash(this.parent.getHTMLElement(), this, { baseSize: 5, orientation: this.layoutVertically ? Orientation.VERTICAL : Orientation.HORIZONTAL });
-		this.toDispose.push(this.sashOne.addListener2('start', () => this.onSashOneDragStart()));
-		this.toDispose.push(this.sashOne.addListener2('change', (e: ISashEvent) => this.onSashOneDrag(e)));
-		this.toDispose.push(this.sashOne.addListener2('end', () => this.onSashOneDragEnd()));
-		this.toDispose.push(this.sashOne.addListener2('reset', () => this.onSashOneReset()));
+		this.toUnbind.push(this.sashOne.addListener2('start', () => this.onSashOneDragStart()));
+		this.toUnbind.push(this.sashOne.addListener2('change', (e: ISashEvent) => this.onSashOneDrag(e)));
+		this.toUnbind.push(this.sashOne.addListener2('end', () => this.onSashOneDragEnd()));
+		this.toUnbind.push(this.sashOne.addListener2('reset', () => this.onSashOneReset()));
 		this.sashOne.hide();
 
 		// Silo Two
-		this.silos[Position.TWO] = $(this.parent).div({ class: 'one-editor-silo editor-two monaco-editor-background' });
+		this.silos[Position.TWO] = $(this.parent).div({ class: 'one-editor-silo editor-two' });
 
 		// Sash Two
 		this.sashTwo = new Sash(this.parent.getHTMLElement(), this, { baseSize: 5, orientation: this.layoutVertically ? Orientation.VERTICAL : Orientation.HORIZONTAL });
-		this.toDispose.push(this.sashTwo.addListener2('start', () => this.onSashTwoDragStart()));
-		this.toDispose.push(this.sashTwo.addListener2('change', (e: ISashEvent) => this.onSashTwoDrag(e)));
-		this.toDispose.push(this.sashTwo.addListener2('end', () => this.onSashTwoDragEnd()));
-		this.toDispose.push(this.sashTwo.addListener2('reset', () => this.onSashTwoReset()));
+		this.toUnbind.push(this.sashTwo.addListener2('start', () => this.onSashTwoDragStart()));
+		this.toUnbind.push(this.sashTwo.addListener2('change', (e: ISashEvent) => this.onSashTwoDrag(e)));
+		this.toUnbind.push(this.sashTwo.addListener2('end', () => this.onSashTwoDragEnd()));
+		this.toUnbind.push(this.sashTwo.addListener2('reset', () => this.onSashTwoReset()));
 		this.sashTwo.hide();
 
 		// Silo Three
-		this.silos[Position.THREE] = $(this.parent).div({ class: 'one-editor-silo editor-three monaco-editor-background' });
+		this.silos[Position.THREE] = $(this.parent).div({ class: 'one-editor-silo editor-three' });
 
 		// For each position
 		POSITIONS.forEach(position => {
@@ -919,6 +922,15 @@ export class EditorGroupsControl implements IEditorGroupsControl, IVerticalSashL
 			progressBar.getContainer().hide();
 			container.setProperty(EditorGroupsControl.PROGRESS_BAR_CONTROL_KEY, progressBar); // associate with container
 		});
+
+		// Update Styles
+		this.updateStyles();
+	}
+
+	protected updateStyles(): void {
+		this.silos.forEach(silo => {
+			silo.style('background-color', this.getColor(editorBackground));
+		});
 	}
 
 	private enableDropTarget(node: HTMLElement): void {
@@ -1160,7 +1172,7 @@ export class EditorGroupsControl implements IEditorGroupsControl, IVerticalSashL
 		}
 
 		// let a dropped file open inside Code (only if dropped over editor area)
-		this.toDispose.push(DOM.addDisposableListener(node, DOM.EventType.DROP, (e: DragEvent) => {
+		this.toUnbind.push(DOM.addDisposableListener(node, DOM.EventType.DROP, (e: DragEvent) => {
 			if (e.target === node || DOM.isAncestor(e.target as HTMLElement, node)) {
 				DOM.EventHelper.stop(e, true);
 				onDrop(e, Position.ONE);
@@ -1171,7 +1183,7 @@ export class EditorGroupsControl implements IEditorGroupsControl, IVerticalSashL
 
 		// Drag enter
 		let counter = 0; // see https://github.com/Microsoft/vscode/issues/14470
-		this.toDispose.push(DOM.addDisposableListener(node, DOM.EventType.DRAG_ENTER, (e: DragEvent) => {
+		this.toUnbind.push(DOM.addDisposableListener(node, DOM.EventType.DRAG_ENTER, (e: DragEvent) => {
 			if (!TitleControl.getDraggedEditor() && !extractResources(e).length) {
 				return; // invalid DND
 			}
@@ -1193,7 +1205,7 @@ export class EditorGroupsControl implements IEditorGroupsControl, IVerticalSashL
 		}));
 
 		// Drag leave
-		this.toDispose.push(DOM.addDisposableListener(node, DOM.EventType.DRAG_LEAVE, (e: DragEvent) => {
+		this.toUnbind.push(DOM.addDisposableListener(node, DOM.EventType.DRAG_LEAVE, (e: DragEvent) => {
 			counter--;
 			if (counter === 0) {
 				DOM.removeClass(node, 'dropfeedback');
@@ -1202,7 +1214,7 @@ export class EditorGroupsControl implements IEditorGroupsControl, IVerticalSashL
 
 		// Drag end (also install globally to be safe)
 		[node, window].forEach(container => {
-			this.toDispose.push(DOM.addDisposableListener(container, DOM.EventType.DRAG_END, (e: DragEvent) => {
+			this.toUnbind.push(DOM.addDisposableListener(container, DOM.EventType.DRAG_END, (e: DragEvent) => {
 				counter = 0;
 				DOM.removeClass(node, 'dropfeedback');
 				cleanUp();
@@ -1929,7 +1941,7 @@ export class EditorGroupsControl implements IEditorGroupsControl, IVerticalSashL
 	}
 
 	public dispose(): void {
-		dispose(this.toDispose);
+		super.dispose();
 
 		// Positions
 		POSITIONS.forEach(position => {
@@ -1954,7 +1966,5 @@ export class EditorGroupsControl implements IEditorGroupsControl, IVerticalSashL
 		this.lastActiveEditor = null;
 		this.lastActivePosition = null;
 		this.visibleEditors = null;
-
-		this._onGroupFocusChanged.dispose();
 	}
 }

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

@@ -38,6 +38,8 @@ import { IProgressService } from 'vs/platform/progress/common/progress';
 import { EditorStacksModel, EditorGroup, EditorIdentifier, GroupEvent } from 'vs/workbench/common/editor/editorStacksModel';
 import Event, { Emitter } from 'vs/base/common/event';
 import { IContextKey, IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { editorBackground } from 'vs/platform/theme/common/colorRegistry';
 
 class ProgressMonitor {
 
@@ -118,9 +120,10 @@ export class EditorPart extends Part implements IEditorPart, IEditorGroupService
 		@IPartService private partService: IPartService,
 		@IConfigurationService private configurationService: IConfigurationService,
 		@IContextKeyService contextKeyService: IContextKeyService,
-		@IInstantiationService private instantiationService: IInstantiationService
+		@IInstantiationService private instantiationService: IInstantiationService,
+		@IThemeService themeService: IThemeService
 	) {
-		super(id, { hasTitle: false });
+		super(id, { hasTitle: false }, themeService);
 
 		this._onEditorsChanged = new Emitter<void>();
 		this._onEditorsMoved = new Emitter<void>();
@@ -898,6 +901,8 @@ export class EditorPart extends Part implements IEditorPart, IEditorGroupService
 			.div()
 			.addClass('content');
 
+		this.updateStyles();
+
 		// get settings
 		this.memento = this.getMemento(this.storageService, MementoScope.WORKSPACE);
 
@@ -909,6 +914,11 @@ export class EditorPart extends Part implements IEditorPart, IEditorGroupService
 		return contentArea;
 	}
 
+	protected updateStyles(): void {
+		const container = this.getContainer();
+		container.style('background-color', this.getColor(editorBackground));
+	}
+
 	private onGroupFocusChanged(): void {
 
 		// Update stacks model

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

@@ -26,18 +26,4 @@
 	.monaco-workbench > .part.editor {
 		background-size: 260px 260px;
 	}
-}
-
-/* TODO@theme */
-
-.vs .monaco-workbench .monaco-editor-background {
-	background-color: white;
-}
-
-.vs-dark .monaco-workbench .monaco-editor-background {
-	background-color: #1E1E1E;
-}
-
-.hc-black .monaco-workbench .monaco-editor-background {
-	background-color: #000;
 }
\ No newline at end of file

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

@@ -200,38 +200,30 @@
 /* TODO@theme */
 
 .vs .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.tabs.shows-tabs {
-	background: #F3F3F3;
+	background-color: #F3F3F3;
 }
 
 .vs-dark .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.tabs.shows-tabs {
-	background: #252526;
+	background-color: #252526;
 }
 
 .hc-black .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.tabs.shows-tabs {
 	border-bottom-color: #6FC3DF;
 }
 
-.vs .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab:not(.active) {
-	background-color: #ECECEC;
-}
-
-.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab:not(.active) {
-	background-color: #2D2D2D;
-}
-
-.vs .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab  {
+.vs .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab {
 	border-left-color: #F3F3F3;
 }
 
-.vs .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.active:last-child  {
+.vs .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.active:last-child {
 	border-right-color: #F3F3F3;
 }
 
-.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab  {
+.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab {
 	border-left-color: #252526;
 }
 
-.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.active:last-child  {
+.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.active:last-child {
 	border-right-color: #252526;
 }
 
@@ -249,11 +241,11 @@
 }
 
 .hc-black .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.active,
-.hc-black .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.active:hover  {
+.hc-black .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.active:hover {
 	outline-color: #f38518;
 }
 
-.hc-black .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab:hover  {
+.hc-black .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab:hover {
 	outline-color: #f38518;
 }
 

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

@@ -29,16 +29,16 @@ export class NoTabsTitleControl extends TitleControl {
 		this.titleContainer = parent;
 
 		// Pin on double click
-		this.toDispose.push(DOM.addDisposableListener(this.titleContainer, DOM.EventType.DBLCLICK, (e: MouseEvent) => this.onTitleDoubleClick(e)));
+		this.toUnbind.push(DOM.addDisposableListener(this.titleContainer, DOM.EventType.DBLCLICK, (e: MouseEvent) => this.onTitleDoubleClick(e)));
 
 		// Detect mouse click
-		this.toDispose.push(DOM.addDisposableListener(this.titleContainer, DOM.EventType.CLICK, (e: MouseEvent) => this.onTitleClick(e)));
+		this.toUnbind.push(DOM.addDisposableListener(this.titleContainer, DOM.EventType.CLICK, (e: MouseEvent) => this.onTitleClick(e)));
 
 		// Editor Label
 		this.editorLabel = this.instantiationService.createInstance(EditorLabel, this.titleContainer, void 0);
-		this.toDispose.push(this.editorLabel);
-		this.toDispose.push(DOM.addDisposableListener(this.editorLabel.labelElement, DOM.EventType.CLICK, (e: MouseEvent) => this.onTitleLabelClick(e)));
-		this.toDispose.push(DOM.addDisposableListener(this.editorLabel.descriptionElement, DOM.EventType.CLICK, (e: MouseEvent) => this.onTitleLabelClick(e)));
+		this.toUnbind.push(this.editorLabel);
+		this.toUnbind.push(DOM.addDisposableListener(this.editorLabel.labelElement, DOM.EventType.CLICK, (e: MouseEvent) => this.onTitleLabelClick(e)));
+		this.toUnbind.push(DOM.addDisposableListener(this.editorLabel.descriptionElement, DOM.EventType.CLICK, (e: MouseEvent) => this.onTitleLabelClick(e)));
 
 		// Right Actions Container
 		const actionsContainer = document.createElement('div');
@@ -49,7 +49,7 @@ export class NoTabsTitleControl extends TitleControl {
 		this.createEditorActionsToolBar(actionsContainer);
 
 		// Context Menu
-		this.toDispose.push(DOM.addDisposableListener(this.titleContainer, DOM.EventType.CONTEXT_MENU, (e: Event) => this.onContextMenu({ group: this.context, editor: this.context.activeEditor }, e, this.titleContainer)));
+		this.toUnbind.push(DOM.addDisposableListener(this.titleContainer, DOM.EventType.CONTEXT_MENU, (e: Event) => this.onContextMenu({ group: this.context, editor: this.context.activeEditor }, e, this.titleContainer)));
 	}
 
 	private onTitleLabelClick(e: MouseEvent): void {

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

@@ -17,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';
 
 export class SideBySideEditor extends BaseEditor {
 
@@ -34,9 +35,10 @@ export class SideBySideEditor extends BaseEditor {
 
 	constructor(
 		@ITelemetryService telemetryService: ITelemetryService,
-		@IInstantiationService private instantiationService: IInstantiationService
+		@IInstantiationService private instantiationService: IInstantiationService,
+		@IThemeService themeService: IThemeService
 	) {
-		super(SideBySideEditor.ID, telemetryService);
+		super(SideBySideEditor.ID, telemetryService, themeService);
 	}
 
 	protected createEditor(parent: Builder): void {

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

@@ -40,6 +40,8 @@ import { extractResources } from 'vs/base/browser/dnd';
 import { LinkedMap } from 'vs/base/common/map';
 import { DelegatingWorkbenchEditorService } from 'vs/workbench/services/editor/browser/editorService';
 import { ServiceCollection } from 'vs/platform/instantiation/common/serviceCollection';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { INACTIVE_TAB_BACKGROUND, ACTIVE_TAB_BACKGROUND } from 'vs/workbench/browser/styles';
 
 interface IEditorInputLabel {
 	editor: IEditorInput;
@@ -70,9 +72,10 @@ export class TabsTitleControl extends TitleControl {
 		@IMessageService messageService: IMessageService,
 		@IMenuService menuService: IMenuService,
 		@IQuickOpenService quickOpenService: IQuickOpenService,
-		@IWindowService private windowService: IWindowService
+		@IWindowService private windowService: IWindowService,
+		@IThemeService themeService: IThemeService
 	) {
-		super(contextMenuService, instantiationService, editorService, editorGroupService, contextKeyService, keybindingService, telemetryService, messageService, menuService, quickOpenService);
+		super(contextMenuService, instantiationService, editorService, editorGroupService, contextKeyService, keybindingService, telemetryService, messageService, menuService, quickOpenService, themeService);
 
 		this.tabDisposeables = [];
 		this.editorLabels = [];
@@ -123,7 +126,7 @@ export class TabsTitleControl extends TitleControl {
 		DOM.addClass(this.tabsContainer, 'tabs-container');
 
 		// Forward scrolling inside the container to our custom scrollbar
-		this.toDispose.push(DOM.addDisposableListener(this.tabsContainer, DOM.EventType.SCROLL, e => {
+		this.toUnbind.push(DOM.addDisposableListener(this.tabsContainer, DOM.EventType.SCROLL, e => {
 			if (DOM.hasClass(this.tabsContainer, 'scroll')) {
 				this.scrollbar.updateState({
 					scrollLeft: this.tabsContainer.scrollLeft // during DND the  container gets scrolled so we need to update the custom scrollbar
@@ -132,7 +135,7 @@ export class TabsTitleControl extends TitleControl {
 		}));
 
 		// New file when double clicking on tabs container (but not tabs)
-		this.toDispose.push(DOM.addDisposableListener(this.tabsContainer, DOM.EventType.DBLCLICK, e => {
+		this.toUnbind.push(DOM.addDisposableListener(this.tabsContainer, DOM.EventType.DBLCLICK, e => {
 			const target = e.target;
 			if (target instanceof HTMLElement && target.className.indexOf('tabs-container') === 0) {
 				DOM.EventHelper.stop(e);
@@ -161,7 +164,7 @@ export class TabsTitleControl extends TitleControl {
 		this.titleContainer.appendChild(this.scrollbar.getDomNode());
 
 		// Drag over
-		this.toDispose.push(DOM.addDisposableListener(this.tabsContainer, DOM.EventType.DRAG_OVER, (e: DragEvent) => {
+		this.toUnbind.push(DOM.addDisposableListener(this.tabsContainer, DOM.EventType.DRAG_OVER, (e: DragEvent) => {
 			DOM.addClass(this.tabsContainer, 'scroll'); // enable support to scroll while dragging
 
 			const target = e.target;
@@ -171,19 +174,19 @@ export class TabsTitleControl extends TitleControl {
 		}));
 
 		// Drag leave
-		this.toDispose.push(DOM.addDisposableListener(this.tabsContainer, DOM.EventType.DRAG_LEAVE, (e: DragEvent) => {
+		this.toUnbind.push(DOM.addDisposableListener(this.tabsContainer, DOM.EventType.DRAG_LEAVE, (e: DragEvent) => {
 			DOM.removeClass(this.tabsContainer, 'dropfeedback');
 			DOM.removeClass(this.tabsContainer, 'scroll');
 		}));
 
 		// Drag end
-		this.toDispose.push(DOM.addDisposableListener(this.tabsContainer, DOM.EventType.DRAG_END, (e: DragEvent) => {
+		this.toUnbind.push(DOM.addDisposableListener(this.tabsContainer, DOM.EventType.DRAG_END, (e: DragEvent) => {
 			DOM.removeClass(this.tabsContainer, 'dropfeedback');
 			DOM.removeClass(this.tabsContainer, 'scroll');
 		}));
 
 		// Drop onto tabs container
-		this.toDispose.push(DOM.addDisposableListener(this.tabsContainer, DOM.EventType.DROP, (e: DragEvent) => {
+		this.toUnbind.push(DOM.addDisposableListener(this.tabsContainer, DOM.EventType.DROP, (e: DragEvent) => {
 			DOM.removeClass(this.tabsContainer, 'dropfeedback');
 			DOM.removeClass(this.tabsContainer, 'scroll');
 
@@ -261,10 +264,12 @@ export class TabsTitleControl extends TitleControl {
 				if (isActive) {
 					DOM.addClass(tabContainer, 'active');
 					tabContainer.setAttribute('aria-selected', 'true');
+					tabContainer.style.backgroundColor = this.getColor(ACTIVE_TAB_BACKGROUND);
 					this.activeTab = tabContainer;
 				} else {
 					DOM.removeClass(tabContainer, 'active');
 					tabContainer.setAttribute('aria-selected', 'false');
+					tabContainer.style.backgroundColor = this.getColor(INACTIVE_TAB_BACKGROUND);
 				}
 
 				// Dirty State
@@ -391,7 +396,7 @@ export class TabsTitleControl extends TitleControl {
 		tabContainer.draggable = true;
 		tabContainer.tabIndex = 0;
 		tabContainer.setAttribute('role', 'presentation'); // cannot use role "tab" here due to https://github.com/Microsoft/vscode/issues/8659
-		DOM.addClass(tabContainer, 'tab monaco-editor-background');
+		DOM.addClass(tabContainer, 'tab');
 
 		// Tab Editor Label
 		const editorLabel = this.instantiationService.createInstance(EditorLabel, tabContainer, void 0);

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

@@ -58,15 +58,16 @@ export abstract class BaseTextEditor extends BaseEditor {
 		@IInstantiationService private _instantiationService: IInstantiationService,
 		@IStorageService private storageService: IStorageService,
 		@IConfigurationService private _configurationService: IConfigurationService,
-		@IWorkbenchThemeService private themeService: IWorkbenchThemeService,
+		@IWorkbenchThemeService protected themeService: IWorkbenchThemeService,
 		@IModeService private modeService: IModeService,
 		@ITextFileService private textFileService: ITextFileService,
 		@IEditorGroupService private editorGroupService: IEditorGroupService
 	) {
-		super(id, telemetryService);
+		super(id, telemetryService, themeService);
 
 		this.toUnbind.push(this.configurationService.onDidUpdateConfiguration(e => this.handleConfigurationChangeEvent(e.config)));
-		this.toUnbind.push(themeService.onDidColorThemeChange(e => this.handleConfigurationChangeEvent()));
+		this.toUnbind.push(themeService.onDidColorThemeChange(e => this.handleConfigurationChangeEvent())); // TODO@theme this should be done from the editor itself and not from the outside
+
 	}
 
 	protected get instantiationService(): IInstantiationService {

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

@@ -37,6 +37,8 @@ import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { createActionItem, fillInActions } from 'vs/platform/actions/browser/menuItemActionItem';
 import { IMenuService, MenuId, IMenu, ExecuteCommandAction } from 'vs/platform/actions/common/actions';
 import { ResourceContextKey } from 'vs/workbench/common/resourceContextKey';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { WorkbenchComponent } from 'vs/workbench/common/component';
 
 export interface IToolbarActions {
 	primary: IAction[];
@@ -56,13 +58,12 @@ export interface ITitleAreaControl {
 	dispose(): void;
 }
 
-export abstract class TitleControl implements ITitleAreaControl {
+export abstract class TitleControl extends WorkbenchComponent implements ITitleAreaControl {
 
 	private static draggedEditor: IEditorIdentifier;
 
 	protected stacks: IEditorStacksModel;
 	protected context: IEditorGroup;
-	protected toDispose: IDisposable[];
 
 	protected dragged: boolean;
 
@@ -99,19 +100,21 @@ export abstract class TitleControl implements ITitleAreaControl {
 		@ITelemetryService protected telemetryService: ITelemetryService,
 		@IMessageService protected messageService: IMessageService,
 		@IMenuService protected menuService: IMenuService,
-		@IQuickOpenService protected quickOpenService: IQuickOpenService
+		@IQuickOpenService protected quickOpenService: IQuickOpenService,
+		@IThemeService protected themeService: IThemeService
 	) {
-		this.toDispose = [];
+		super('workbench.parts.editor.title', themeService);
+
 		this.stacks = editorGroupService.getStacksModel();
 		this.mapActionsToEditors = Object.create(null);
 
 		this.scheduler = new RunOnceScheduler(() => this.onSchedule(), 0);
-		this.toDispose.push(this.scheduler);
+		this.toUnbind.push(this.scheduler);
 
 		this.resourceContext = instantiationService.createInstance(ResourceContextKey);
 
 		this.contextMenu = this.menuService.createMenu(MenuId.EditorTitleContext, this.contextKeyService);
-		this.toDispose.push(this.contextMenu);
+		this.toUnbind.push(this.contextMenu);
 
 		this.initActions(this.instantiationService);
 		this.registerListeners();
@@ -134,7 +137,7 @@ export abstract class TitleControl implements ITitleAreaControl {
 	}
 
 	private registerListeners(): void {
-		this.toDispose.push(this.stacks.onModelChanged(e => this.onStacksChanged(e)));
+		this.toUnbind.push(this.stacks.onModelChanged(e => this.onStacksChanged(e)));
 	}
 
 	private onStacksChanged(e: IStacksModelChangeEvent): void {
@@ -154,6 +157,10 @@ export abstract class TitleControl implements ITitleAreaControl {
 		this.splitEditorAction.enabled = groupCount < 3;
 	}
 
+	protected updateStyles(): void {
+		this.update(true); // run an update when the theme changes to new styles
+	}
+
 	private onSchedule(): void {
 		if (this.refreshScheduled) {
 			this.doRefresh();
@@ -233,7 +240,7 @@ export abstract class TitleControl implements ITitleAreaControl {
 		});
 
 		// Action Run Handling
-		this.toDispose.push(this.editorActionsToolbar.actionRunner.addListener2(BaseEventType.RUN, (e: any) => {
+		this.toUnbind.push(this.editorActionsToolbar.actionRunner.addListener2(BaseEventType.RUN, (e: any) => {
 
 			// Check for Error
 			if (e.error && !errors.isPromiseCanceledError(e.error)) {
@@ -472,7 +479,7 @@ export abstract class TitleControl implements ITitleAreaControl {
 	}
 
 	public dispose(): void {
-		dispose(this.toDispose);
+		super.dispose();
 
 		// Actions
 		[

src/vs/workbench/browser/parts/panel/panelPart.ts

@@ -24,6 +24,8 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { ActionsOrientation, ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
 import { ClosePanelAction, PanelAction, ToggleMaximizedPanelAction } from 'vs/workbench/browser/parts/panel/panelActions';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { PANEL_BACKGROUND } from 'vs/workbench/browser/styles';
 
 export class PanelPart extends CompositePart<Panel> implements IPanelService {
 
@@ -44,7 +46,8 @@ export class PanelPart extends CompositePart<Panel> implements IPanelService {
 		@IContextMenuService contextMenuService: IContextMenuService,
 		@IPartService partService: IPartService,
 		@IKeybindingService keybindingService: IKeybindingService,
-		@IInstantiationService instantiationService: IInstantiationService
+		@IInstantiationService instantiationService: IInstantiationService,
+		@IThemeService themeService: IThemeService
 	) {
 		super(
 			messageService,
@@ -54,6 +57,7 @@ export class PanelPart extends CompositePart<Panel> implements IPanelService {
 			partService,
 			keybindingService,
 			instantiationService,
+			themeService,
 			Registry.as<PanelRegistry>(PanelExtensions.Panels),
 			PanelPart.activePanelSettingsKey,
 			'panel',
@@ -91,6 +95,18 @@ export class PanelPart extends CompositePart<Panel> implements IPanelService {
 		return this._onDidCompositeClose.event;
 	}
 
+	public createContentArea(parent: Builder): Builder {
+		const contentArea = super.createContentArea(parent);
+		this.updateStyles();
+
+		return contentArea;
+	}
+
+	protected updateStyles(): void {
+		const container = this.getContainer();
+		container.style('background-color', this.getColor(PANEL_BACKGROUND));
+	}
+
 	public openPanel(id: string, focus?: boolean): TPromise<Panel> {
 		if (this.blockOpeningPanel) {
 			return TPromise.as(null); // Workaround against a potential race condition

src/vs/workbench/browser/parts/quickopen/quickOpenController.ts

@@ -48,6 +48,7 @@ import { IWorkspaceContextService } from 'vs/platform/workspace/common/workspace
 import { IContextKeyService, RawContextKey, IContextKey } from 'vs/platform/contextkey/common/contextkey';
 import { IHistoryService } from 'vs/workbench/services/history/common/history';
 import { IListService } from 'vs/platform/list/browser/listService';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 const HELP_PREFIX = '?';
 
@@ -108,9 +109,10 @@ export class QuickOpenController extends WorkbenchComponent implements IQuickOpe
 		@IHistoryService private historyService: IHistoryService,
 		@IInstantiationService private instantiationService: IInstantiationService,
 		@IPartService private partService: IPartService,
-		@IListService private listService: IListService
+		@IListService private listService: IListService,
+		@IThemeService themeService: IThemeService
 	) {
-		super(QuickOpenController.ID);
+		super(QuickOpenController.ID, themeService);
 
 		this.mapResolvedHandlersToPrefix = {};
 		this.handlerOnOpenCalled = {};

src/vs/workbench/browser/parts/sidebar/sidebarPart.ts

@@ -24,6 +24,7 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { KeyMod, KeyCode } from 'vs/base/common/keyCodes';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import Event from 'vs/base/common/event';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 export class SidebarPart extends CompositePart<Viewlet> {
 
@@ -41,7 +42,8 @@ export class SidebarPart extends CompositePart<Viewlet> {
 		@IContextMenuService contextMenuService: IContextMenuService,
 		@IPartService partService: IPartService,
 		@IKeybindingService keybindingService: IKeybindingService,
-		@IInstantiationService instantiationService: IInstantiationService
+		@IInstantiationService instantiationService: IInstantiationService,
+		@IThemeService themeService: IThemeService
 	) {
 		super(
 			messageService,
@@ -51,6 +53,7 @@ export class SidebarPart extends CompositePart<Viewlet> {
 			partService,
 			keybindingService,
 			instantiationService,
+			themeService,
 			Registry.as<ViewletRegistry>(ViewletExtensions.Viewlets),
 			SidebarPart.activeViewletSettingsKey,
 			'sideBar',

src/vs/workbench/browser/parts/statusbar/statusbarPart.ts

@@ -26,6 +26,7 @@ import { IStatusbarService, IStatusbarEntry } from 'vs/platform/statusbar/common
 import { getCodeEditor } from 'vs/editor/common/services/codeEditorService';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { Action } from 'vs/base/common/actions';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 export class StatusbarPart extends Part implements IStatusbarService {
 
@@ -40,9 +41,10 @@ export class StatusbarPart extends Part implements IStatusbarService {
 
 	constructor(
 		id: string,
-		@IInstantiationService private instantiationService: IInstantiationService
+		@IInstantiationService private instantiationService: IInstantiationService,
+		@IThemeService themeService: IThemeService
 	) {
-		super(id, { hasTitle: false });
+		super(id, { hasTitle: false }, themeService);
 
 		this.toDispose = [];
 	}

src/vs/workbench/browser/parts/titlebar/titlebarPart.ts

@@ -29,6 +29,7 @@ import { EditorInput } from 'vs/workbench/common/editor';
 import { IEnvironmentService } from 'vs/platform/environment/common/environment';
 import { IWorkspaceContextService } from 'vs/platform/workspace/common/workspace';
 import { Verbosity } from 'vs/platform/editor/common/editor';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 export class TitlebarPart extends Part implements ITitleService {
 
@@ -60,9 +61,10 @@ export class TitlebarPart extends Part implements ITitleService {
 		@IEditorGroupService private editorGroupService: IEditorGroupService,
 		@IIntegrityService private integrityService: IIntegrityService,
 		@IEnvironmentService private environmentService: IEnvironmentService,
-		@IWorkspaceContextService private contextService: IWorkspaceContextService
+		@IWorkspaceContextService private contextService: IWorkspaceContextService,
+		@IThemeService themeService: IThemeService
 	) {
-		super(id, { hasTitle: false });
+		super(id, { hasTitle: false }, themeService);
 
 		this.isPure = true;
 		this.activeEditorListeners = [];

src/vs/workbench/browser/styles.ts

+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import nls = require('vs/nls');
+import { registerColor, editorBackground } from 'vs/platform/theme/common/colorRegistry';
+
+export const ACTIVE_TAB_BACKGROUND = registerColor('activeTabBackground', {
+	dark: editorBackground,
+	light: editorBackground,
+	hc: editorBackground
+}, nls.localize('activeTabBackground', "Active Tab background color. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group."));
+
+export const INACTIVE_TAB_BACKGROUND = registerColor('inactiveTabBackground', {
+	dark: '#2D2D2D',
+	light: '#ECECEC',
+	hc: '#00000000'
+}, nls.localize('inactiveTabBackground', "Inactive Tab background color. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group."));
+
+export const PANEL_BACKGROUND = registerColor('panelBackground', {
+	dark: editorBackground,
+	light: editorBackground,
+	hc: editorBackground
+}, nls.localize('panelBackground', "Panel background color. Panels are shown below the editor area and contain views like output and integrated terminal."));
\ No newline at end of file

src/vs/workbench/common/component.ts

@@ -7,6 +7,7 @@
 import { IDisposable, dispose, Disposable } from 'vs/base/common/lifecycle';
 import { Scope, Memento } from 'vs/workbench/common/memento';
 import { IStorageService } from 'vs/platform/storage/common/storage';
+import { IThemeService, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
 
 /**
  * Base class of any core/ui component in the workbench. Examples include services, extensions, parts, viewlets and quick open.
@@ -38,13 +39,35 @@ export class WorkbenchComponent extends Disposable implements IWorkbenchComponen
 	private _toUnbind: IDisposable[];
 	private id: string;
 	private componentMemento: Memento;
+	private theme: ITheme;
 
-	constructor(id: string) {
+	constructor(
+		id: string,
+		protected themeService: IThemeService
+	) {
 		super();
 
 		this._toUnbind = [];
 		this.id = id;
 		this.componentMemento = new Memento(this.id);
+		this.theme = themeService.getTheme();
+
+		// Hook up to theme changes
+		this.toUnbind.push(this.themeService.onThemeChange((theme, collector) => this.onThemeChange(theme, collector)));
+	}
+
+	protected onThemeChange(theme: ITheme, collector: ICssStyleCollector): void {
+		this.theme = theme;
+
+		this.updateStyles(theme, collector);
+	}
+
+	protected updateStyles(theme: ITheme, collector: ICssStyleCollector): void {
+		// Subclasses to override
+	}
+
+	protected getColor(id: string): string {
+		return this.theme.getColor(id).toString();
 	}
 
 	protected get toUnbind() {

src/vs/workbench/electron-browser/workbench.ts

@@ -1028,7 +1028,7 @@ export class Workbench implements IPartService {
 	private createPanelPart(): void {
 		const panelPartContainer = $(this.workbench)
 			.div({
-				'class': ['part', 'panel', 'monaco-editor-background'],
+				'class': ['part', 'panel'],
 				id: Identifiers.PANEL_PART,
 				role: 'complementary'
 			});
@@ -1039,7 +1039,7 @@ export class Workbench implements IPartService {
 	private createEditorPart(): void {
 		const editorContainer = $(this.workbench)
 			.div({
-				'class': ['part', 'editor', 'monaco-editor-background', 'empty'],
+				'class': ['part', 'editor', 'empty'],
 				id: Identifiers.EDITOR_PART,
 				role: 'main'
 			});

src/vs/workbench/parts/debug/browser/breakpointWidget.ts

@@ -62,7 +62,7 @@ export class BreakpointWidget extends ZoneWidget {
 	}
 
 	protected _fillContainer(container: HTMLElement): void {
-		this.setCssClass('breakpoint-widget monaco-editor-background');
+		this.setCssClass('breakpoint-widget');
 		const uri = this.editor.getModel().uri;
 		const breakpoint = this.debugService.getModel().getBreakpoints().filter(bp => bp.lineNumber === this.lineNumber && bp.column === this.column && bp.uri.toString() === uri.toString()).pop();
 

src/vs/workbench/parts/debug/browser/debugViewlet.ts

@@ -22,6 +22,7 @@ import { IProgressService, IProgressRunner } from 'vs/platform/progress/common/p
 import { IWorkspaceContextService } from 'vs/platform/workspace/common/workspace';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { IStorageService, StorageScope } from 'vs/platform/storage/common/storage';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 const DEBUG_VIEWS_WEIGHTS = 'debug.viewsweights';
 
@@ -44,9 +45,10 @@ export class DebugViewlet extends Viewlet {
 		@IInstantiationService private instantiationService: IInstantiationService,
 		@IWorkspaceContextService private contextService: IWorkspaceContextService,
 		@IStorageService private storageService: IStorageService,
-		@ILifecycleService lifecycleService: ILifecycleService
+		@ILifecycleService lifecycleService: ILifecycleService,
+		@IThemeService themeService: IThemeService
 	) {
-		super(VIEWLET_ID, telemetryService);
+		super(VIEWLET_ID, telemetryService, themeService);
 
 		this.progressRunner = null;
 		this.viewletSettings = this.getMemento(storageService, Scope.WORKSPACE);

src/vs/workbench/parts/debug/electron-browser/repl.ts

@@ -86,12 +86,12 @@ export class Repl extends Panel implements IPrivateReplService {
 		@IInstantiationService private instantiationService: IInstantiationService,
 		@IStorageService private storageService: IStorageService,
 		@IPanelService private panelService: IPanelService,
-		@IWorkbenchThemeService private themeService: IWorkbenchThemeService,
+		@IWorkbenchThemeService protected themeService: IWorkbenchThemeService,
 		@IModelService private modelService: IModelService,
 		@IContextKeyService private contextKeyService: IContextKeyService,
 		@IListService private listService: IListService
 	) {
-		super(debug.REPL_ID, telemetryService);
+		super(debug.REPL_ID, telemetryService, themeService);
 
 		this.replInputHeight = Repl.REPL_INPUT_INITIAL_HEIGHT;
 		this.toDispose = [];
@@ -102,7 +102,7 @@ export class Repl extends Panel implements IPrivateReplService {
 		this.toDispose.push(this.debugService.getModel().onDidChangeReplElements(() => {
 			this.refreshReplElements(this.debugService.getModel().getReplElements().length === 0);
 		}));
-		this.toDispose.push(this.themeService.onDidColorThemeChange(e => this.replInput.updateOptions(this.getReplInputOptions())));
+		this.toDispose.push(this.themeService.onDidColorThemeChange(e => this.replInput.updateOptions(this.getReplInputOptions()))); // TODO@theme this should be done from the editor itself and not from the outside
 		this.toDispose.push(this.panelService.onDidPanelOpen(panel => this.refreshReplElements(true)));
 	}
 

src/vs/workbench/parts/explorers/browser/treeExplorerViewlet.ts

@@ -13,6 +13,7 @@ import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { TreeExplorerView } from 'vs/workbench/parts/explorers/browser/views/treeExplorerView';
 import { TreeExplorerViewletState } from 'vs/workbench/parts/explorers/browser/views/treeExplorerViewer';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 export class TreeExplorerViewlet extends Viewlet {
 
@@ -26,9 +27,10 @@ export class TreeExplorerViewlet extends Viewlet {
 	constructor(
 		viewletId: string,
 		@ITelemetryService telemetryService: ITelemetryService,
-		@IInstantiationService private instantiationService: IInstantiationService
+		@IInstantiationService private instantiationService: IInstantiationService,
+		@IThemeService themeService: IThemeService
 	) {
-		super(viewletId, telemetryService);
+		super(viewletId, telemetryService, themeService);
 
 		this.viewletState = new TreeExplorerViewletState();
 		this.viewletId = viewletId;

src/vs/workbench/parts/extensions/browser/extensionEditor.ts

@@ -46,6 +46,7 @@ import { Tree } from 'vs/base/parts/tree/browser/treeImpl';
 import { Position } from 'vs/platform/editor/common/editor';
 import { IListService } from 'vs/platform/list/browser/listService';
 import { OS } from 'vs/base/common/platform';
+import { IPartService, Parts } from 'vs/workbench/services/part/common/partService';
 
 function renderBody(body: string): string {
 	const nonce = new Date().getTime() + '' + new Date().getMilliseconds();
@@ -155,13 +156,14 @@ export class ExtensionEditor extends BaseEditor {
 		@IInstantiationService private instantiationService: IInstantiationService,
 		@IViewletService private viewletService: IViewletService,
 		@IExtensionsWorkbenchService private extensionsWorkbenchService: IExtensionsWorkbenchService,
-		@IWorkbenchThemeService private themeService: IWorkbenchThemeService,
+		@IWorkbenchThemeService protected themeService: IWorkbenchThemeService,
 		@IKeybindingService private keybindingService: IKeybindingService,
 		@IMessageService private messageService: IMessageService,
 		@IOpenerService private openerService: IOpenerService,
-		@IListService private listService: IListService
+		@IListService private listService: IListService,
+		@IPartService private partService: IPartService
 	) {
-		super(ExtensionEditor.ID, telemetryService);
+		super(ExtensionEditor.ID, telemetryService, themeService);
 		this._highlight = null;
 		this.highlightDisposable = empty;
 		this.disposables = [];
@@ -320,11 +322,7 @@ export class ExtensionEditor extends BaseEditor {
 			.then(marked.parse)
 			.then(renderBody)
 			.then<void>(body => {
-				const webview = new WebView(
-					this.content,
-					document.querySelector('.monaco-editor-background')
-				);
-
+				const webview = new WebView(this.content, this.partService.getContainer(Parts.EDITOR_PART));
 				webview.style(this.themeService.getColorTheme());
 				webview.contents = [body];
 

src/vs/workbench/parts/extensions/electron-browser/extensionsViewlet.ts

@@ -49,6 +49,7 @@ import Severity from 'vs/base/common/severity';
 import { IActivityBarService, ProgressBadge, NumberBadge } from 'vs/workbench/services/activity/common/activityBarService';
 import { IExtensionService } from 'vs/platform/extensions/common/extensions';
 import { IModeService } from 'vs/editor/common/services/modeService';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 interface SearchInputEvent extends Event {
 	target: HTMLInputElement;
@@ -82,9 +83,10 @@ export class ExtensionsViewlet extends Viewlet implements IExtensionsViewlet {
 		@IMessageService private messageService: IMessageService,
 		@IViewletService private viewletService: IViewletService,
 		@IExtensionService private extensionService: IExtensionService,
-		@IModeService private modeService: IModeService
+		@IModeService private modeService: IModeService,
+		@IThemeService themeService: IThemeService
 	) {
-		super(VIEWLET_ID, telemetryService);
+		super(VIEWLET_ID, telemetryService, themeService);
 		this.searchDelayer = new ThrottledDelayer(500);
 
 		this.disposables.push(viewletService.onDidViewletOpen(this.onViewletOpen, this, this.disposables));

src/vs/workbench/parts/files/browser/editors/binaryFileEditor.ts

@@ -8,6 +8,7 @@ import nls = require('vs/nls');
 import { BaseBinaryResourceEditor } from 'vs/workbench/browser/parts/editor/binaryEditor';
 import { BINARY_FILE_EDITOR_ID } from 'vs/workbench/parts/files/common/files';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 /**
  * An implementation of editor for binary files like images.
@@ -17,9 +18,10 @@ export class BinaryFileEditor extends BaseBinaryResourceEditor {
 	public static ID = BINARY_FILE_EDITOR_ID;
 
 	constructor(
-		@ITelemetryService telemetryService: ITelemetryService
+		@ITelemetryService telemetryService: ITelemetryService,
+		@IThemeService themeService: IThemeService
 	) {
-		super(BinaryFileEditor.ID, telemetryService);
+		super(BinaryFileEditor.ID, telemetryService, themeService);
 	}
 
 	public getTitle(): string {

src/vs/workbench/parts/files/browser/explorerViewlet.ts

@@ -30,6 +30,7 @@ import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor';
 import { IWorkbenchEditorService } from 'vs/workbench/services/editor/common/editorService';
 import { IEditorGroupService } from 'vs/workbench/services/group/common/groupService';
 import { IContextKeyService, IContextKey } from 'vs/platform/contextkey/common/contextkey';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 export class ExplorerViewlet extends Viewlet {
 	private viewletContainer: Builder;
@@ -59,9 +60,10 @@ export class ExplorerViewlet extends Viewlet {
 		@IWorkbenchEditorService private editorService: IWorkbenchEditorService,
 		@IConfigurationService private configurationService: IConfigurationService,
 		@IInstantiationService private instantiationService: IInstantiationService,
-		@IContextKeyService contextKeyService: IContextKeyService
+		@IContextKeyService contextKeyService: IContextKeyService,
+		@IThemeService themeService: IThemeService
 	) {
-		super(VIEWLET_ID, telemetryService);
+		super(VIEWLET_ID, telemetryService, themeService);
 
 		this.views = [];
 

src/vs/workbench/parts/git/browser/gitViewlet.ts

@@ -25,6 +25,7 @@ import { HugeView } from './views/huge/hugeView';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IProgressService, IProgressRunner } from 'vs/platform/progress/common/progress';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 import IGitService = git.IGitService;
 
@@ -44,8 +45,8 @@ export class GitViewlet
 
 	private toDispose: lifecycle.IDisposable[];
 
-	constructor( @ITelemetryService telemetryService: ITelemetryService, @IProgressService progressService: IProgressService, @IInstantiationService instantiationService: IInstantiationService, @IGitService gitService: IGitService) {
-		super(contrib.VIEWLET_ID, telemetryService);
+	constructor( @ITelemetryService telemetryService: ITelemetryService, @IProgressService progressService: IProgressService, @IInstantiationService instantiationService: IInstantiationService, @IGitService gitService: IGitService, @IThemeService themeService: IThemeService) {
+		super(contrib.VIEWLET_ID, telemetryService, themeService);
 
 		this.progressService = progressService;
 		this.instantiationService = instantiationService;

src/vs/workbench/parts/html/browser/htmlEditorZone.ts

@@ -41,7 +41,7 @@ class HtmlZone implements IViewZone {
 
 	private _onVisibilityChanged(): void {
 		if (this._domNode.hasAttribute('monaco-visible-view-zone') && !this._webview) {
-			this._webview = new Webview(this.domNode, document.querySelector('.monaco-editor-background'));
+			this._webview = new Webview(this.domNode, document.querySelector('.monaco-editor'));
 			this._disposables.push(this._webview);
 			this._webview.contents = [this.htmlContent];
 		}

src/vs/workbench/parts/html/browser/htmlPreviewPart.ts

@@ -21,6 +21,7 @@ import { HtmlInput } from 'vs/workbench/parts/html/common/htmlInput';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/themeService';
 import { IOpenerService } from 'vs/platform/opener/common/opener';
 import { ITextModelResolverService, ITextEditorModel } from 'vs/editor/common/services/resolverService';
+import { Parts, IPartService } from 'vs/workbench/services/part/common/partService';
 
 import Webview from './webview';
 
@@ -32,7 +33,6 @@ export class HtmlPreviewPart extends BaseEditor {
 	static ID: string = 'workbench.editor.htmlPreviewPart';
 
 	private _textModelResolverService: ITextModelResolverService;
-	private _themeService: IWorkbenchThemeService;
 	private _openerService: IOpenerService;
 	private _webview: Webview;
 	private _webviewDisposables: IDisposable[];
@@ -48,14 +48,14 @@ export class HtmlPreviewPart extends BaseEditor {
 	constructor(
 		@ITelemetryService telemetryService: ITelemetryService,
 		@ITextModelResolverService textModelResolverService: ITextModelResolverService,
-		@IWorkbenchThemeService themeService: IWorkbenchThemeService,
+		@IWorkbenchThemeService protected themeService: IWorkbenchThemeService,
 		@IOpenerService openerService: IOpenerService,
-		@IWorkspaceContextService contextService: IWorkspaceContextService
+		@IWorkspaceContextService contextService: IWorkspaceContextService,
+		@IPartService private partService: IPartService
 	) {
-		super(HtmlPreviewPart.ID, telemetryService);
+		super(HtmlPreviewPart.ID, telemetryService, themeService);
 
 		this._textModelResolverService = textModelResolverService;
-		this._themeService = themeService;
 		this._openerService = openerService;
 		this._baseUrl = contextService.toResource('/');
 	}
@@ -83,7 +83,7 @@ export class HtmlPreviewPart extends BaseEditor {
 
 	private get webview(): Webview {
 		if (!this._webview) {
-			this._webview = new Webview(this._container, document.querySelector('.monaco-editor-background'));
+			this._webview = new Webview(this._container, this.partService.getContainer(Parts.EDITOR_PART));
 			this._webview.baseUrl = this._baseUrl && this._baseUrl.toString(true);
 
 			this._webviewDisposables = [
@@ -116,8 +116,8 @@ export class HtmlPreviewPart extends BaseEditor {
 			this._webviewDisposables = dispose(this._webviewDisposables);
 			this._webview = undefined;
 		} else {
-			this._themeChangeSubscription = this._themeService.onDidColorThemeChange(themeId => this.webview.style(themeId));
-			this.webview.style(this._themeService.getColorTheme());
+			this._themeChangeSubscription = this.themeService.onDidColorThemeChange(themeId => this.webview.style(themeId));
+			this.webview.style(this.themeService.getColorTheme());
 
 			if (this._hasValidModel()) {
 				this._modelChangeSubscription = this.model.onDidChangeContent(() => this.webview.contents = this.model.getLinesContent());

src/vs/workbench/parts/html/browser/webview.ts

@@ -14,6 +14,7 @@ import { addDisposableListener, addClass } from 'vs/base/browser/dom';
 import { CommandsRegistry } from 'vs/platform/commands/common/commands';
 import { MenuRegistry } from 'vs/platform/actions/common/actions';
 import { IColorTheme } from 'vs/workbench/services/themes/common/themeService';
+import { editorBackground, editorForeground } from 'vs/platform/theme/common/colorRegistry';
 
 declare interface WebviewElement extends HTMLElement {
 	src: string;
@@ -145,12 +146,12 @@ export default class Webview {
 	}
 
 	style(theme: IColorTheme): void {
-		const { color, backgroundColor, fontFamily, fontWeight, fontSize } = window.getComputedStyle(this._styleElement);
+		const { fontFamily, fontWeight, fontSize } = window.getComputedStyle(this._styleElement); // TODO@theme avoid styleElement
 
 		let value = `
 		:root {
-			--background-color: ${backgroundColor};
-			--color: ${color};
+			--background-color: ${theme.getColor(editorBackground)};
+			--color: ${theme.getColor(editorForeground)};
 			--font-family: ${fontFamily};
 			--font-weight: ${fontWeight};
 			--font-size: ${fontSize};

src/vs/workbench/parts/markers/browser/markersPanel.ts

@@ -35,6 +35,7 @@ import { RangeHighlightDecorations } from 'vs/workbench/common/editor/rangeDecor
 import { ContributableActionProvider } from 'vs/workbench/browser/actionBarRegistry';
 import { IContextKeyService, IContextKey } from 'vs/platform/contextkey/common/contextkey';
 import { IListService } from 'vs/platform/list/browser/listService';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 export class MarkersPanel extends Panel {
 
@@ -70,9 +71,10 @@ export class MarkersPanel extends Panel {
 		@IConfigurationService private configurationService: IConfigurationService,
 		@IContextKeyService private contextKeyService: IContextKeyService,
 		@ITelemetryService telemetryService: ITelemetryService,
-		@IListService private listService: IListService
+		@IListService private listService: IListService,
+		@IThemeService themeService: IThemeService
 	) {
-		super(Constants.MARKERS_PANEL_ID, telemetryService);
+		super(Constants.MARKERS_PANEL_ID, telemetryService, themeService);
 		this.toDispose = [];
 		this.delayedRefresh = new Delayer<void>(500);
 		this.autoExpanded = new Set.ArraySet<string>();

src/vs/workbench/parts/preferences/browser/preferencesEditor.ts

@@ -109,9 +109,10 @@ export class PreferencesEditor extends BaseEditor {
 		@ITelemetryService telemetryService: ITelemetryService,
 		@IWorkbenchEditorService private editorService: IWorkbenchEditorService,
 		@IContextKeyService private contextKeyService: IContextKeyService,
-		@IInstantiationService private instantiationService: IInstantiationService
+		@IInstantiationService private instantiationService: IInstantiationService,
+		@IWorkbenchThemeService themeService: IWorkbenchThemeService
 	) {
-		super(PreferencesEditor.ID, telemetryService);
+		super(PreferencesEditor.ID, telemetryService, themeService);
 		this.defaultSettingsEditorContextKey = CONTEXT_SETTINGS_EDITOR.bindTo(this.contextKeyService);
 		this.delayedFilterLogging = new Delayer<void>(1000);
 	}

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

@@ -174,11 +174,11 @@ export class SCMViewlet extends Viewlet {
 		@IMessageService private messageService: IMessageService,
 		@IListService private listService: IListService,
 		@IContextMenuService private contextMenuService: IContextMenuService,
-		@IWorkbenchThemeService private themeService: IWorkbenchThemeService,
+		@IWorkbenchThemeService protected themeService: IWorkbenchThemeService,
 		@IMenuService private menuService: IMenuService,
 		@IModelService private modelService: IModelService
 	) {
-		super(VIEWLET_ID, telemetryService);
+		super(VIEWLET_ID, telemetryService, themeService);
 
 		this.menus = this.instantiationService.createInstance(SCMMenus);
 		this.menus.onDidChangeTitle(this.updateTitleArea, this, this.disposables);

src/vs/workbench/parts/search/browser/searchViewlet.ts

@@ -59,7 +59,7 @@ import { OpenFolderAction, OpenFileFolderAction } from 'vs/workbench/browser/act
 import * as Constants from 'vs/workbench/parts/search/common/constants';
 import { IListService } from 'vs/platform/list/browser/listService';
 import { IThemeService, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
-import * as colorRegistry from 'vs/platform/theme/common/colorRegistry';
+import { editorFindMatchHighlight } from 'vs/platform/theme/common/colorRegistry';
 
 export class SearchViewlet extends Viewlet {
 
@@ -115,9 +115,9 @@ export class SearchViewlet extends Viewlet {
 		@IUntitledEditorService private untitledEditorService: IUntitledEditorService,
 		@IPreferencesService private preferencesService: IPreferencesService,
 		@IListService private listService: IListService,
-		@IThemeService private themeService: IThemeService
+		@IThemeService protected themeService: IThemeService
 	) {
-		super(Constants.VIEWLET_ID, telemetryService);
+		super(Constants.VIEWLET_ID, telemetryService, themeService);
 
 		this.toDispose = [];
 		this.viewletVisible = Constants.SearchViewletVisibleKey.bindTo(contextKeyService);
@@ -131,8 +131,6 @@ export class SearchViewlet extends Viewlet {
 		this.toUnbind.push(this.untitledEditorService.onDidChangeDirty(e => this.onUntitledDidChangeDirty(e)));
 		this.toUnbind.push(this.configurationService.onDidUpdateConfiguration(e => this.onConfigurationUpdated(e.config)));
 
-		this.toUnbind.push(this.themeService.onThemeChange(this.applyTheme.bind(this)));
-
 		this.selectCurrentMatchEmitter = new Emitter<string>();
 		debounceEvent(this.selectCurrentMatchEmitter.event, (l, e) => e, 100, /*leading=*/true)
 			(() => this.selectCurrentMatch());
@@ -144,8 +142,8 @@ export class SearchViewlet extends Viewlet {
 		this.updateGlobalPatternExclusions(configuration);
 	}
 
-	private applyTheme(theme: ITheme, collector: ICssStyleCollector) {
-		let matchHighlightColor = theme.getColor(colorRegistry.editorFindMatchHighlight);
+	protected updateStyles(theme: ITheme, collector: ICssStyleCollector) {
+		let matchHighlightColor = theme.getColor(editorFindMatchHighlight);
 		if (matchHighlightColor) {
 			collector.addRule(`.search-viewlet .findInFileMatch { background-color: ${matchHighlightColor}; }`);
 			collector.addRule(`.search-viewlet .highlight { background-color: ${matchHighlightColor}; }`);

src/vs/workbench/parts/terminal/electron-browser/terminalPanel.ts

@@ -39,10 +39,10 @@ export class TerminalPanel extends Panel {
 		@IInstantiationService private _instantiationService: IInstantiationService,
 		@IKeybindingService private _keybindingService: IKeybindingService,
 		@ITerminalService private _terminalService: ITerminalService,
-		@IWorkbenchThemeService private _themeService: IWorkbenchThemeService,
+		@IWorkbenchThemeService protected themeService: IWorkbenchThemeService,
 		@ITelemetryService telemetryService: ITelemetryService
 	) {
-		super(TERMINAL_PANEL_ID, telemetryService);
+		super(TERMINAL_PANEL_ID, telemetryService, themeService);
 	}
 
 	public create(parent: Builder): TPromise<any> {
@@ -62,7 +62,7 @@ export class TerminalPanel extends Panel {
 
 		this._terminalService.setContainers(this.getContainer().getHTMLElement(), this._terminalContainer);
 
-		this._register(this._themeService.onDidColorThemeChange(theme => this._updateTheme(theme)));
+		this._register(this.themeService.onDidColorThemeChange(theme => this._updateTheme(theme)));
 		this._register(this._configurationService.onDidUpdateConfiguration(() => this._updateFont()));
 		this._updateFont();
 		this._updateTheme();
@@ -204,7 +204,7 @@ export class TerminalPanel extends Panel {
 
 	private _updateTheme(colorTheme?: IColorTheme): void {
 		if (!colorTheme) {
-			colorTheme = this._themeService.getColorTheme();
+			colorTheme = this.themeService.getColorTheme();
 		}
 		let baseThemeId = colorTheme.getBaseThemeId();
 		if (baseThemeId === this._currentBaseThemeId) {

src/vs/workbench/parts/update/electron-browser/releaseNotesEditor.ts

@@ -19,6 +19,7 @@ import WebView from 'vs/workbench/parts/html/browser/webview';
 import { IOpenerService } from 'vs/platform/opener/common/opener';
 import { IModeService } from 'vs/editor/common/services/modeService';
 import { tokenizeToString } from 'vs/editor/common/modes/textToHtmlTokenizer';
+import { IPartService, Parts } from 'vs/workbench/services/part/common/partService';
 
 function renderBody(body: string): string {
 	return `<!DOCTYPE html>
@@ -43,11 +44,12 @@ export class ReleaseNotesEditor extends BaseEditor {
 
 	constructor(
 		@ITelemetryService telemetryService: ITelemetryService,
-		@IWorkbenchThemeService private themeService: IWorkbenchThemeService,
+		@IWorkbenchThemeService protected themeService: IWorkbenchThemeService,
 		@IOpenerService private openerService: IOpenerService,
-		@IModeService private modeService: IModeService
+		@IModeService private modeService: IModeService,
+		@IPartService private partService: IPartService
 	) {
-		super(ReleaseNotesEditor.ID, telemetryService);
+		super(ReleaseNotesEditor.ID, telemetryService, themeService);
 	}
 
 	createEditor(parent: Builder): void {
@@ -84,11 +86,7 @@ export class ReleaseNotesEditor extends BaseEditor {
 			})
 			.then(renderBody)
 			.then<void>(body => {
-				this.webview = new WebView(
-					this.content,
-					document.querySelector('.monaco-editor-background')
-				);
-
+				this.webview = new WebView(this.content, this.partService.getContainer(Parts.EDITOR_PART));
 				this.webview.baseUrl = `https://code.visualstudio.com/raw/`;
 				this.webview.style(this.themeService.getColorTheme());
 				this.webview.contents = [body];

src/vs/workbench/parts/welcome/walkThrough/electron-browser/walkThroughPart.ts

@@ -92,7 +92,7 @@ export class WalkThroughPart extends BaseEditor {
 	constructor(
 		@ITelemetryService telemetryService: ITelemetryService,
 		@IInstantiationService private instantiationService: IInstantiationService,
-		@IWorkbenchThemeService private themeService: IWorkbenchThemeService,
+		@IWorkbenchThemeService protected themeService: IWorkbenchThemeService,
 		@IOpenerService private openerService: IOpenerService,
 		@IFileService private fileService: IFileService,
 		@IModelService protected modelService: IModelService,
@@ -102,7 +102,7 @@ export class WalkThroughPart extends BaseEditor {
 		@IConfigurationService private configurationService: IConfigurationService,
 		@IModeService private modeService: IModeService
 	) {
-		super(WalkThroughPart.ID, telemetryService);
+		super(WalkThroughPart.ID, telemetryService, themeService);
 		this.editorFocus = WALK_THROUGH_FOCUS.bindTo(this.contextKeyService);
 	}
 
@@ -370,7 +370,7 @@ export class WalkThroughPart extends BaseEditor {
 						}
 					}));
 
-					this.contentDisposables.push(this.themeService.onDidColorThemeChange(theme => editor.updateOptions({ theme: theme.id })));
+					this.contentDisposables.push(this.themeService.onDidColorThemeChange(theme => editor.updateOptions({ theme: theme.id }))); // TODO@theme this should be done from the editor itself and not from the outside
 					this.contentDisposables.push(this.configurationService.onDidUpdateConfiguration(() => editor.updateOptions(this.getEditorOptions(snippet.textEditorModel.getModeId()))));
 
 					this.contentDisposables.push(once(editor.onMouseDown)(() => {
@@ -428,7 +428,7 @@ export class WalkThroughPart extends BaseEditor {
 	}
 
 	private style(div: HTMLElement) {
-		const styleElement = document.querySelector('.monaco-editor-background');
+		const styleElement = document.querySelector('.monaco-editor-background'); // TODO@theme styles should come in via theme registry
 		const {color, backgroundColor, fontFamily, fontWeight, fontSize} = window.getComputedStyle(styleElement);
 		div.style.color = color;
 		div.style.backgroundColor = backgroundColor;

src/vs/workbench/test/browser/part.test.ts

@@ -13,11 +13,12 @@ import { IWorkspaceContextService, WorkspaceContextService } from 'vs/platform/w
 import { IStorageService } from 'vs/platform/storage/common/storage';
 import { StorageService, InMemoryLocalStorage } from 'vs/platform/storage/common/storageService';
 import { TestWorkspace } from 'vs/platform/workspace/test/common/testWorkspace';
+import { TestThemeService } from 'vs/workbench/test/workbenchTestServices';
 
 class MyPart extends Part {
 
 	constructor(private expectedParent: Builder) {
-		super('myPart', { hasTitle: true });
+		super('myPart', { hasTitle: true }, new TestThemeService());
 	}
 
 	public createTitleArea(parent: Builder): Builder {
@@ -38,7 +39,7 @@ class MyPart extends Part {
 class MyPart2 extends Part {
 
 	constructor() {
-		super('myPart2', { hasTitle: true });
+		super('myPart2', { hasTitle: true }, new TestThemeService());
 	}
 
 	public createTitleArea(parent: Builder): Builder {
@@ -63,7 +64,7 @@ class MyPart2 extends Part {
 class MyPart3 extends Part {
 
 	constructor() {
-		super('myPart2', { hasTitle: false });
+		super('myPart2', { hasTitle: false }, new TestThemeService());
 	}
 
 	public createTitleArea(parent: Builder): Builder {

src/vs/workbench/test/browser/parts/editor/baseEditor.test.ts

@@ -16,14 +16,16 @@ import { StringEditorInput } from 'vs/workbench/common/editor/stringEditorInput'
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { NullTelemetryService } from 'vs/platform/telemetry/common/telemetryUtils';
 import { PLAINTEXT_MODE_ID } from 'vs/editor/common/modes/modesRegistry';
-import { workbenchInstantiationService } from 'vs/workbench/test/workbenchTestServices';
+import { workbenchInstantiationService, TestThemeService } from 'vs/workbench/test/workbenchTestServices';
+
+const NullThemeService = new TestThemeService();
 
 let EditorRegistry: IEditorRegistry = Platform.Registry.as(Extensions.Editors);
 
 export class MyEditor extends BaseEditor {
 
 	constructor(id: string, @ITelemetryService telemetryService: ITelemetryService) {
-		super(id, telemetryService);
+		super(id, NullTelemetryService, NullThemeService);
 	}
 
 	getId(): string {
@@ -42,7 +44,7 @@ export class MyEditor extends BaseEditor {
 export class MyOtherEditor extends BaseEditor {
 
 	constructor(id: string, @ITelemetryService telemetryService: ITelemetryService) {
-		super(id, telemetryService);
+		super(id, NullTelemetryService, NullThemeService);
 	}
 
 	getId(): string {

src/vs/workbench/test/browser/services.test.ts

@@ -16,7 +16,7 @@ import { EditorInput, EditorOptions, TextEditorOptions } from 'vs/workbench/comm
 import { StringEditorInput } from 'vs/workbench/common/editor/stringEditorInput';
 import { StringEditorModel } from 'vs/workbench/common/editor/stringEditorModel';
 import { FileEditorInput } from 'vs/workbench/parts/files/common/editors/fileEditorInput';
-import { workbenchInstantiationService } from 'vs/workbench/test/workbenchTestServices';
+import { workbenchInstantiationService, TestThemeService } from 'vs/workbench/test/workbenchTestServices';
 import { Viewlet, ViewletDescriptor } from 'vs/workbench/browser/viewlet';
 import { IPanel } from 'vs/workbench/common/panel';
 import { WorkbenchProgressService, ScopedService } from 'vs/workbench/services/progress/browser/progressService';
@@ -354,7 +354,7 @@ suite('Workbench UI Services', () => {
 		class MyEditor extends BaseEditor {
 
 			constructor(id: string) {
-				super(id, null);
+				super(id, null, new TestThemeService());
 			}
 
 			getId(): string {

src/vs/workbench/test/workbenchTestServices.ts

@@ -50,6 +50,9 @@ import { IWindowsService, IWindowService } from 'vs/platform/windows/common/wind
 import { TestWorkspace } from 'vs/platform/workspace/test/common/testWorkspace';
 import { RawTextSource, IRawTextSource } from 'vs/editor/common/model/textSource';
 import { IEnvironmentService } from 'vs/platform/environment/common/environment';
+import { IThemeService, ITheme, IThemingParticipant } from 'vs/platform/theme/common/themeService';
+import { IDisposable } from 'vs/base/common/lifecycle';
+import { Color } from "vs/base/common/color";
 
 export function createFileInput(instantiationService: IInstantiationService, resource: URI): FileEditorInput {
 	return instantiationService.createInstance(FileEditorInput, resource, void 0);
@@ -205,6 +208,7 @@ export function workbenchInstantiationService(): IInstantiationService {
 	instantiationService.stub(ITextFileService, <ITextFileService>instantiationService.createInstance(TestTextFileService));
 	instantiationService.stub(ITextModelResolverService, <ITextModelResolverService>instantiationService.createInstance(TextModelResolverService));
 	instantiationService.stub(IEnvironmentService, TestEnvironmentService);
+	instantiationService.stub(IThemeService, new TestThemeService());
 
 	return instantiationService;
 }
@@ -969,3 +973,32 @@ export class TestWindowsService implements IWindowsService {
 		return TPromise.as(void 0);
 	}
 }
+
+export class TestTheme implements ITheme {
+	selector: string;
+	label: string;
+	type: 'light' | 'dark' | 'hc';
+
+	getColor(color: string, useDefault?: boolean): Color {
+		throw new Error('Method not implemented.');
+	}
+
+	isDefault(color: string): boolean {
+		throw new Error('Method not implemented.');
+	}
+}
+
+const testTheme = new TestTheme();
+
+export class TestThemeService implements IThemeService {
+
+	_serviceBrand: any;
+
+	getTheme(): ITheme {
+		return testTheme;
+	}
+
+	onThemeChange(participant: IThemingParticipant): IDisposable {
+		return { dispose: () => { } };
+	}
+}
\ No newline at end of file