Adding background transparency support for MacOS

src/vs/platform/theme/electron-main/themeMainService.ts

@@ -119,7 +119,7 @@ export class ThemeMainService extends Disposable implements IThemeMainService {
 
 	private updateBackgroundColor(windowId: number, splash: IPartsSplash): void {
 		for (const window of BrowserWindow.getAllWindows()) {
-			if (window.id === windowId) {
+			if (window.id === windowId && this.configurationService.getValue('workbench.transparency') === false) {
 				window.setBackgroundColor(splash.colorInfo.background);
 				break;
 			}

src/vs/platform/windows/electron-main/window.ts

@@ -189,6 +189,8 @@ export class CodeWindow extends Disposable implements ICodeWindow {
 
 			const windowSettings = this.configurationService.getValue<IWindowSettings | undefined>('window');
 
+			const workbenchTransparency = this.configurationService.getValue('workbench.transparency');
+
 			let useSandbox = false;
 			if (typeof windowSettings?.experimental?.useSandbox === 'boolean') {
 				useSandbox = windowSettings.experimental.useSandbox;
@@ -201,11 +203,13 @@ export class CodeWindow extends Disposable implements ICodeWindow {
 				height: this.windowState.height,
 				x: this.windowState.x,
 				y: this.windowState.y,
-				backgroundColor: this.themeMainService.getBackgroundColor(),
+				backgroundColor: workbenchTransparency ? '#00000000' : this.themeMainService.getBackgroundColor(),
 				minWidth: WindowMinimumSize.WIDTH,
 				minHeight: WindowMinimumSize.HEIGHT,
 				show: !isFullscreenOrMaximized, // reduce flicker by showing later
 				title: this.productService.nameLong,
+				frame: workbenchTransparency ? false : undefined,
+				transparent: workbenchTransparency ? true : undefined,
 				webPreferences: {
 					preload: FileAccess.asFileUri('vs/base/parts/sandbox/electron-browser/preload.js', require).fsPath,
 					additionalArguments: [`--vscode-window-config=${this.configObjectUrl.resource.toString()}`],

src/vs/workbench/services/themes/common/themeConfiguration.ts

@@ -59,6 +59,13 @@ const preferredLightThemeSettingSchema: IConfigurationPropertySchema = {
 	enumItemLabels: colorThemeSettingEnumItemLabels,
 	errorMessage: nls.localize('colorThemeError', "Theme is unknown or not installed."),
 };
+
+const transparencySettingSchema: IConfigurationPropertySchema = {
+	type: 'boolean',
+	markdownDescription: nls.localize('transparencySetting', 'If set, the background of the application will become transparent. (Requires Restart)'),
+	default: false
+};
+
 const preferredHCDarkThemeSettingSchema: IConfigurationPropertySchema = {
 	type: 'string',
 	markdownDescription: nls.localize({ key: 'preferredHCDarkColorTheme', comment: ['`#{0}#` will become a link to an other setting. Do not remove backtick or #'] }, 'Specifies the preferred color theme used in high contrast dark mode when `#{0}#` is enabled.', ThemeSettings.DETECT_HC),
@@ -125,6 +132,7 @@ const themeSettingsConfiguration: IConfigurationNode = {
 	type: 'object',
 	properties: {
 		[ThemeSettings.COLOR_THEME]: colorThemeSettingSchema,
+		[ThemeSettings.TRANSPARENCY]: transparencySettingSchema,
 		[ThemeSettings.PREFERRED_DARK_THEME]: preferredDarkThemeSettingSchema,
 		[ThemeSettings.PREFERRED_LIGHT_THEME]: preferredLightThemeSettingSchema,
 		[ThemeSettings.PREFERRED_HC_DARK_THEME]: preferredHCDarkThemeSettingSchema,

src/vs/workbench/services/themes/common/workbenchThemeService.ts

@@ -26,6 +26,7 @@ export const themeScopeRegex = /\[(.+?)\]/g;
 
 export enum ThemeSettings {
 	COLOR_THEME = 'workbench.colorTheme',
+	TRANSPARENCY = 'workbench.transparency',
 	FILE_ICON_THEME = 'workbench.iconTheme',
 	PRODUCT_ICON_THEME = 'workbench.productIconTheme',
 	COLOR_CUSTOMIZATIONS = 'workbench.colorCustomizations',