Clean up: Panel provides backgrond and foreground and Activity bar provides foreground

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

@@ -193,13 +193,13 @@ export class PlaceHolderToggleCompositePinnedAction extends ToggleCompositePinne
 
 registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 
-	const activeBackgroundColor = theme.getColor(ACTIVITY_BAR_FOREGROUND);
-	if (activeBackgroundColor) {
+	const activeForegroundColor = theme.getColor(ACTIVITY_BAR_FOREGROUND);
+	if (activeForegroundColor) {
 		collector.addRule(`
 			.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item.active .action-label,
 			.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item:focus .action-label,
 			.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item:hover .action-label {
-				background-color: ${activeBackgroundColor} !important;
+				background-color: ${activeForegroundColor} !important;
 			}
 		`);
 	}

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

@@ -202,11 +202,12 @@ export class ActivitybarPart extends Part {
 
 	private getActivitybarItemColors(theme: ITheme): ICompositeBarColors {
 		return <ICompositeBarColors>{
-			backgroundColor: theme.defines(ACTIVITY_BAR_INACTIVE_FOREGROUND) ? theme.getColor(ACTIVITY_BAR_INACTIVE_FOREGROUND) : theme.getColor(ACTIVITY_BAR_FOREGROUND).transparent(0.6),
-			activeBackgroundColor: theme.getColor(ACTIVITY_BAR_FOREGROUND),
+			activeForegroundColor: theme.getColor(ACTIVITY_BAR_FOREGROUND),
+			inactiveForegroundColor: theme.defines(ACTIVITY_BAR_INACTIVE_FOREGROUND) ? theme.getColor(ACTIVITY_BAR_INACTIVE_FOREGROUND) : theme.getColor(ACTIVITY_BAR_FOREGROUND).transparent(0.6),
 			badgeBackground: theme.getColor(ACTIVITY_BAR_BADGE_BACKGROUND),
 			badgeForeground: theme.getColor(ACTIVITY_BAR_BADGE_FOREGROUND),
-			dragAndDropBackground: theme.getColor(ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND)
+			dragAndDropBackground: theme.getColor(ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND),
+			backgroundColor: null, activeBorderBottomColor: null,
 		};
 	}
 

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

@@ -114,7 +114,9 @@ export class ActivityAction extends Action {
 
 export interface ICompositeBarColors {
 	backgroundColor: Color;
-	activeBackgroundColor: Color;
+	activeBorderBottomColor: Color;
+	activeForegroundColor: Color;
+	inactiveForegroundColor: Color;
 	badgeBackground: Color;
 	badgeForeground: Color;
 	dragAndDropBackground: Color;
@@ -154,10 +156,17 @@ export class ActivityActionItem extends BaseActionItem {
 	protected updateStyles(): void {
 		const theme = this.themeService.getTheme();
 		const colors = this.options.colors(theme);
-		// Label
-		if (this.label && this.options.icon) {
-			const background = this._action.checked ? colors.activeBackgroundColor : colors.backgroundColor;
+
+		if (this.options.icon) {
+			const foreground = this._action.checked ? colors.activeForegroundColor : colors.inactiveForegroundColor;
+			this.label.style.backgroundColor = foreground ? foreground.toString() : null;
+		} else if (this.label) {
+			const background = colors.backgroundColor;
+			const foreground = this._action.checked ? colors.activeForegroundColor : colors.inactiveForegroundColor;
+			const borderBottomColor = this._action.checked ? colors.activeBorderBottomColor : null;
 			this.label.style.backgroundColor = background ? background.toString() : null;
+			this.label.style.color = foreground ? foreground.toString() : null;
+			this.label.style.borderBottomColor = borderBottomColor ? borderBottomColor.toString() : null;
 		}
 
 		// Badge

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

@@ -96,7 +96,9 @@ export class PanelPart extends CompositePart<Panel> implements IPanelService {
 			overflowActionSize: 44,
 			colors: theme => ({
 				backgroundColor: theme.getColor(PANEL_BACKGROUND),
-				activeBackgroundColor: theme.getColor(PANEL_BACKGROUND),
+				activeBorderBottomColor: theme.getColor(PANEL_ACTIVE_TITLE_BORDER),
+				activeForegroundColor: theme.getColor(PANEL_ACTIVE_TITLE_FOREGROUND),
+				inactiveForegroundColor: theme.getColor(PANEL_INACTIVE_TITLE_FOREGROUND),
 				badgeBackground: theme.getColor(badgeBackground),
 				badgeForeground: theme.getColor(badgeForeground),
 				dragAndDropBackground: theme.getColor(PANEL_DRAG_AND_DROP_BACKGROUND)
@@ -321,20 +323,9 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	const titleActiveBorder = theme.getColor(PANEL_ACTIVE_TITLE_BORDER);
 	if (titleActive || titleActiveBorder) {
 		collector.addRule(`
-			.monaco-workbench > .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label,
-			.monaco-workbench > .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .action-label {
-				color: ${titleActive};
-				border-bottom-color: ${titleActiveBorder};
-			}
-		`);
-	}
-
-	// Title Inactive
-	const titleInactive = theme.getColor(PANEL_INACTIVE_TITLE_FOREGROUND);
-	if (titleInactive) {
-		collector.addRule(`
-			.monaco-workbench > .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item .action-label {
-				color: ${titleInactive};
+			.monaco-workbench > .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label {
+				color: ${titleActive} !important;
+				border-bottom-color: ${titleActiveBorder} !important;
 			}
 		`);
 	}
@@ -344,7 +335,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	if (focusBorderColor) {
 		collector.addRule(`
 			.monaco-workbench > .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .action-label {
-				color: ${titleActive};
+				color: ${titleActive} !important;
 				border-bottom-color: ${focusBorderColor} !important;
 				border-bottom: 1px solid;
 			}