fixes #54452

src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css

@@ -99,65 +99,52 @@
 	display: none;
 }
 
-.monaco-workbench > .part.titlebar > .window-controls-container > .window-icon {
+.monaco-workbench > .part.titlebar > .window-controls-container > .window-icon-bg {
 	display: inline-block;
 	-webkit-app-region: no-drag;
-	-webkit-transition: background-color .1s;
-	transition: background-color .1s;
 	height: 100%;
 	width: 33.34%;
-	background-size: 21.74%;
-	background-position: center center;
-	background-repeat: no-repeat;
 }
 
-.monaco-workbench > .part.titlebar > .window-controls-container > .window-icon svg {
+.monaco-workbench > .part.titlebar > .window-controls-container .window-icon svg {
 	shape-rendering: crispEdges;
 	text-align: center;
 }
 
-.monaco-workbench > .part.titlebar.titlebar > .window-controls-container > .window-close {
-	background-image: url('chrome-close-dark.svg');
-}
-
-.monaco-workbench > .part.titlebar.titlebar.light > .window-controls-container > .window-close {
-	background-image: url('chrome-close.svg');
-}
-
-.monaco-workbench > .part.titlebar.titlebar > .window-controls-container > .window-unmaximize {
-	background-image: url('chrome-restore-dark.svg');
+.monaco-workbench > .part.titlebar.titlebar > .window-controls-container .window-close {
+	-webkit-mask: url('chrome-close.svg') no-repeat 50% 50%;
 }
 
-.monaco-workbench > .part.titlebar.titlebar.light > .window-controls-container > .window-unmaximize {
-	background-image: url('chrome-restore.svg');
+.monaco-workbench > .part.titlebar.titlebar > .window-controls-container .window-unmaximize {
+	-webkit-mask: url('chrome-restore.svg') no-repeat 50% 50%;
 }
 
-.monaco-workbench > .part.titlebar > .window-controls-container > .window-maximize {
-	background-image: url('chrome-maximize-dark.svg');
+.monaco-workbench > .part.titlebar > .window-controls-container .window-maximize {
+	-webkit-mask: url('chrome-maximize.svg') no-repeat 50% 50%;
 }
 
-.monaco-workbench > .part.titlebar.light > .window-controls-container > .window-maximize {
-	background-image: url('chrome-maximize.svg');
+.monaco-workbench > .part.titlebar > .window-controls-container .window-minimize {
+	-webkit-mask: url('chrome-minimize.svg') no-repeat 50% 50%;
 }
 
-.monaco-workbench > .part.titlebar > .window-controls-container > .window-minimize {
-	background-image: url('chrome-minimize-dark.svg');
-}
-
-.monaco-workbench > .part.titlebar.light > .window-controls-container > .window-minimize {
-	background-image: url('chrome-minimize.svg');
+.monaco-workbench > .part.titlebar > .window-controls-container > .window-icon-bg > .window-icon {
+	height: 100%;
+	width: 100%;
+	-webkit-mask-size: 23.1%;
 }
 
-.monaco-workbench > .part.titlebar > .window-controls-container > .window-icon:hover {
+.monaco-workbench > .part.titlebar > .window-controls-container > .window-icon-bg:hover {
 	background-color: rgba(255, 255, 255, 0.1);
 }
 
-.monaco-workbench > .part.titlebar.light > .window-controls-container > .window-icon:hover {
+.monaco-workbench > .part.titlebar.light > .window-controls-container > .window-icon-bg:hover {
 	background-color: rgba(0, 0, 0, 0.1);
 }
 
-.monaco-workbench > .part.titlebar > .window-controls-container > .window-close:hover,
-	.monaco-workbench > .part.titlebar.light > .window-controls-container > .window-close:hover {
+.monaco-workbench > .part.titlebar > .window-controls-container > .window-icon-bg.window-close-bg:hover {
 	background-color: rgba(232, 17, 35, 0.9);
-	background-image: url('chrome-close-dark.svg');
+}
+
+.monaco-workbench > .part.titlebar > .window-controls-container .window-icon.window-close:hover {
+	background-color: white;
 }
\ No newline at end of file

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

@@ -24,7 +24,7 @@ import * as nls from 'vs/nls';
 import { EditorInput, toResource, Verbosity } from 'vs/workbench/common/editor';
 import { IEnvironmentService } from 'vs/platform/environment/common/environment';
 import { IWorkspaceContextService, WorkbenchState } from 'vs/platform/workspace/common/workspace';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
 import { TITLE_BAR_ACTIVE_BACKGROUND, TITLE_BAR_ACTIVE_FOREGROUND, TITLE_BAR_INACTIVE_FOREGROUND, TITLE_BAR_INACTIVE_BACKGROUND, TITLE_BAR_BORDER } from 'vs/workbench/common/theme';
 import { isMacintosh, isWindows, isLinux } from 'vs/base/common/platform';
 import URI from 'vs/base/common/uri';
@@ -322,12 +322,12 @@ export class TitlebarPart extends Part implements ITitleService {
 			this.windowControls = $(this.titleContainer).div({ class: 'window-controls-container' });
 
 			// Minimize
-			$(this.windowControls).div({ class: 'window-icon window-minimize' }).on(EventType.CLICK, () => {
+			$($(this.windowControls).div({ class: 'window-icon-bg' })).div({ class: 'window-icon window-minimize' }).on(EventType.CLICK, () => {
 				this.windowService.minimizeWindow().then(null, errors.onUnexpectedError);
 			});
 
 			// Restore
-			this.maxRestoreControl = $(this.windowControls).div({ class: 'window-icon window-max-restore' }).on(EventType.CLICK, () => {
+			this.maxRestoreControl = $($(this.windowControls).div({ class: 'window-icon-bg' })).div({ class: 'window-icon window-max-restore' }).on(EventType.CLICK, () => {
 				this.windowService.isMaximized().then((maximized) => {
 					if (maximized) {
 						return this.windowService.unmaximizeWindow();
@@ -338,7 +338,7 @@ export class TitlebarPart extends Part implements ITitleService {
 			});
 
 			// Close
-			$(this.windowControls).div({ class: 'window-icon window-close' }).on(EventType.CLICK, () => {
+			$($(this.windowControls).div({ class: 'window-icon-bg window-close-bg' })).div({ class: 'window-icon window-close' }).on(EventType.CLICK, () => {
 				this.windowService.closeWindow().then(null, errors.onUnexpectedError);
 			});
 
@@ -383,6 +383,12 @@ export class TitlebarPart extends Part implements ITitleService {
 
 		// Part container
 		if (this.titleContainer) {
+			if (this.isInactive) {
+				this.titleContainer.addClass('inactive');
+			} else {
+				this.titleContainer.removeClass('inactive');
+			}
+
 			const titleBackground = this.getColor(this.isInactive ? TITLE_BAR_INACTIVE_BACKGROUND : TITLE_BAR_ACTIVE_BACKGROUND);
 			this.titleContainer.style('background-color', titleBackground);
 			if (Color.fromHex(titleBackground).isLighter()) {
@@ -555,3 +561,23 @@ class ShowItemInFolderAction extends Action {
 		return this.windowsService.showItemInFolder(this.path);
 	}
 }
+
+registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
+	const titlebarActiveFg = theme.getColor(TITLE_BAR_ACTIVE_FOREGROUND);
+	if (titlebarActiveFg) {
+		collector.addRule(`
+		.monaco-workbench > .part.titlebar > .window-controls-container .window-icon {
+			background-color: ${titlebarActiveFg};
+		}
+		`);
+	}
+
+	const titlebarInactiveFg = theme.getColor(TITLE_BAR_INACTIVE_FOREGROUND);
+	if (titlebarInactiveFg) {
+		collector.addRule(`
+		.monaco-workbench > .part.titlebar.inactive > .window-controls-container .window-icon {
+				background-color: ${titlebarInactiveFg};
+			}
+		`);
+	}
+});