theme - window foreground, sidebar background

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

@@ -26,7 +26,7 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
 import Event from 'vs/base/common/event';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { highContrastBorder } from 'vs/platform/theme/common/colorRegistry';
-import { SIDE_BAR_TITLE_FOREGROUND } from 'vs/workbench/common/theme';
+import { SIDE_BAR_TITLE_FOREGROUND, SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme';
 
 export class SidebarPart extends CompositePart<Viewlet> {
 
@@ -81,6 +81,8 @@ export class SidebarPart extends CompositePart<Viewlet> {
 		// Part container
 		const container = this.getContainer();
 
+		container.style('background-color', this.getColor(SIDE_BAR_BACKGROUND));
+
 		const useBorder = this.isHighContrastTheme;
 		const isPositionLeft = this.partService.getSideBarPosition() === SideBarPosition.LEFT;
 		container.style('border-right-width', useBorder && isPositionLeft ? '1px' : null);

src/vs/workbench/common/theme.ts

@@ -9,6 +9,16 @@ import { IDisposable, Disposable, dispose } from 'vs/base/common/lifecycle';
 import { IThemeService, ITheme } from 'vs/platform/theme/common/themeService';
 import { Color, RGBA } from 'vs/base/common/color';
 
+// < --- Workbench --- >
+
+export const WINDOW_FOREGROUND = registerColor('windowForeground', {
+	dark: '#CCCCCC',
+	light: '#6C6C6C',
+	hc: '#FFFFFF'
+}, nls.localize('windowForeground', "Overall window foreground color. This color is only used if not overridden by a component."));
+
+
+
 // < --- Tabs --- >
 
 export const TABS_CONTAINER_BACKGROUND = registerColor('tabsContainerBackground', {
@@ -162,6 +172,12 @@ export const ACTIVITY_BAR_BACKGROUND = registerColor('activityBarBackground', {
 
 // < --- Side Bar --- >
 
+export const SIDE_BAR_BACKGROUND = registerColor('sideBarBackground', {
+	dark: '#252526',
+	light: '#F3F3F3',
+	hc: '#000000'
+}, nls.localize('sideBarBackground', "Side bar background color. The side bar is the container for views like explorer and search."));
+
 export const SIDE_BAR_TITLE_FOREGROUND = registerColor('sideBarTitleForeground', {
 	dark: '#BBBBBB',
 	light: '#6f6f6f',

src/vs/workbench/electron-browser/media/shell.css

@@ -206,20 +206,6 @@
 
 /* TODO@theme */
 
-.monaco-shell.vs {
-	color: #6C6C6C;
-}
-
-.monaco-shell.vs-dark {
-	color: #BBB;
-	background-color: #1E1E1E;
-}
-
-.monaco-shell.hc-black {
-	color: #fff;
-	background-color: #000;
-}
-
 .monaco-shell.vs input {
 	background-color: white;
 }

src/vs/workbench/electron-browser/media/workbench.css

@@ -45,20 +45,6 @@
 
 /* TODO@theme */
 
-.vs .monaco-workbench	{
-	background-color: #F3F3F3;
-}
-
-.vs-dark .monaco-workbench {
-	background-color: #252526;
-	color: #CCC;
-}
-
-.hc-black .monaco-workbench {
-	color: #FFF;
-	background-color: #000;
-}
-
 .vs #monaco-workbench-drop-overlay {
 	background-color: rgba(51,153,255, 0.18);
 }

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

@@ -103,6 +103,8 @@ import { join } from 'path';
 import 'vs/platform/opener/browser/opener.contribution';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/themeService';
 import { WorkbenchThemeService } from 'vs/workbench/services/themes/electron-browser/themeService';
+import { registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
+import { WINDOW_FOREGROUND } from 'vs/workbench/common/theme';
 
 /**
  * Services that we require for the Shell
@@ -509,3 +511,10 @@ export class WorkbenchShell {
 		$(this.container).empty();
 	}
 }
+
+registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
+	const windowForeground = theme.getColor(WINDOW_FOREGROUND);
+	if (windowForeground) {
+		collector.addRule(`.monaco-shell { color: ${windowForeground}; }`);
+	}
+});