themes - editor title background color (tabs, no tabs)

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

@@ -35,7 +35,7 @@ import { IWindowService } from 'vs/platform/windows/common/windows';
 import { getCodeEditor } from 'vs/editor/common/services/codeEditorService';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { editorBackground } from 'vs/platform/theme/common/colorRegistry';
-import { Themable } from 'vs/workbench/common/theme';
+import { Themable, TABS_CONTAINER_BACKGROUND, NO_TABS_CONTAINER_BACKGROUND } from 'vs/workbench/common/theme';
 
 export enum Rochade {
 	NONE,
@@ -225,7 +225,7 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
 		POSITIONS.forEach(position => {
 			const titleControl = this.getTitleAreaControl(position);
 
-			// TItle Container
+			// Title Container
 			const titleContainer = $(titleControl.getContainer());
 			if (this.tabOptions.showTabs) {
 				titleContainer.addClass('tabs');
@@ -256,6 +256,9 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
 					titleControl.refresh();
 				}
 			}
+
+			// Update Styles
+			this.updateStyles();
 		});
 	}
 
@@ -928,9 +931,21 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
 	}
 
 	protected updateStyles(): void {
+
+		// Editor container background
 		this.silos.forEach(silo => {
 			silo.style('background-color', this.getColor(editorBackground));
 		});
+
+		// Title control
+		POSITIONS.forEach(position => {
+			const container = this.getTitleAreaControl(position).getContainer();
+			if (this.tabOptions.showTabs) {
+				container.style.backgroundColor = this.getColor(TABS_CONTAINER_BACKGROUND);
+			} else {
+				container.style.backgroundColor = this.getColor(NO_TABS_CONTAINER_BACKGROUND);
+			}
+		});
 	}
 
 	private enableDropTarget(node: HTMLElement): void {

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

@@ -182,14 +182,6 @@
 
 /* TODO@theme */
 
-.vs .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.tabs.shows-tabs {
-	background-color: #F3F3F3;
-}
-
-.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.tabs.shows-tabs {
-	background-color: #252526;
-}
-
 .hc-black .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.tabs.shows-tabs {
 	border-bottom-color: #6FC3DF;
 }

src/vs/workbench/common/theme.ts

@@ -11,6 +11,18 @@ import { Color, RGBA } from 'vs/base/common/color';
 
 // < --- Tabs --- >
 
+export const TABS_CONTAINER_BACKGROUND = registerColor('tabsContainerBackground', {
+	dark: '#252526',
+	light: '#F3F3F3',
+	hc: Color.transparent
+}, nls.localize('tabsContainerBackground', "Background color of the tabs container. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups."));
+
+export const NO_TABS_CONTAINER_BACKGROUND = registerColor('noTabsContainerBackground', {
+	dark: editorBackground,
+	light: editorBackground,
+	hc: editorBackground
+}, nls.localize('noTabsContainerBackground', "Background color of the editor title container when no tabs are enabled."));
+
 export const ACTIVE_TAB_BACKGROUND = registerColor('activeTabBackground', {
 	dark: editorBackground,
 	light: editorBackground,