1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
diff -Naur a/src/main.js b/src/main.js
--- a/src/main.js 2022-09-01 00:05:32.000000000 +0200
+++ b/src/main.js 2022-09-04 04:30:24.685459144 +0200
@@ -224,6 +224,10 @@
*/
app.commandLine.appendSwitch('disable-features', 'CalculateNativeWinOcclusion');
+ // Enable visuals for transparent window
+ app.commandLine.appendSwitch('enable-transparent-visuals');
+ app.commandLine.appendSwitch('use-gl', 'desktop');
+
// Support JS Flags
const jsFlags = getJSFlags(cliArgs);
if (jsFlags) {
diff -Naur a/src/vs/editor/browser/widget/diffEditor/style.css b/src/vs/editor/browser/widget/diffEditor/style.css
--- a/src/vs/editor/browser/widget/diffEditor/style.css 2023-10-03 06:06:10.000000000 +0200
+++ b/src/vs/editor/browser/widget/diffEditor/style.css 2023-10-04 21:27:43.122393566 +0200
@@ -161,8 +161,8 @@
}
/* colors not externalized: using transparancy on background */
-.monaco-diff-editor.vs .diffOverview { background: rgba(0, 0, 0, 0.03); }
-.monaco-diff-editor.vs-dark .diffOverview { background: rgba(255, 255, 255, 0.01); }
+.monaco-diff-editor.vs .diffOverview { background: transparent; }
+.monaco-diff-editor.vs-dark .diffOverview { background: transparent; }
.monaco-scrollable-element.modified-in-monaco-diff-editor.vs .scrollbar { background: rgba(0,0,0,0); }
.monaco-scrollable-element.modified-in-monaco-diff-editor.vs-dark .scrollbar { background: rgba(0,0,0,0); }
diff -Naur a/src/vs/platform/windows/electron-main/windows.ts b/src/vs/platform/windows/electron-main/windows.ts
--- a/src/vs/platform/windows/electron-main/windows.ts 2023-11-01 02:39:20.000000000 +0100
+++ b/src/vs/platform/windows/electron-main/windows.ts 2023-11-01 22:22:42.749482542 +0100
@@ -120,6 +120,7 @@
const windowSettings = configurationService.getValue<IWindowSettings | undefined>('window');
const options: BrowserWindowConstructorOptions & { experimentalDarkMode: boolean } = {
+ transparent: true,
backgroundColor: themeMainService.getBackgroundColor(),
minWidth: WindowMinimumSize.WIDTH,
minHeight: WindowMinimumSize.HEIGHT,
diff -Naur a/src/vs/workbench/common/theme.ts b/src/vs/workbench/common/theme.ts
--- a/src/vs/workbench/common/theme.ts 2022-09-01 00:05:32.000000000 +0200
+++ b/src/vs/workbench/common/theme.ts 2022-09-03 22:50:19.628326135 +0200
@@ -7,21 +7,11 @@
import { registerColor, editorBackground, contrastBorder, transparent, editorWidgetBackground, textLinkForeground, lighten, darken, focusBorder, activeContrastBorder, editorWidgetForeground, editorErrorForeground, editorWarningForeground, editorInfoForeground, treeIndentGuidesStroke, errorForeground, listActiveSelectionBackground, listActiveSelectionForeground, editorForeground, toolbarHoverBackground } from 'vs/platform/theme/common/colorRegistry';
import { IColorTheme } from 'vs/platform/theme/common/themeService';
import { Color } from 'vs/base/common/color';
-import { ColorScheme } from 'vs/platform/theme/common/theme';
// < --- Workbench (not customizable) --- >
export function WORKBENCH_BACKGROUND(theme: IColorTheme): Color {
- switch (theme.type) {
- case ColorScheme.LIGHT:
- return Color.fromHex('#F3F3F3');
- case ColorScheme.HIGH_CONTRAST_LIGHT:
- return Color.fromHex('#FFFFFF');
- case ColorScheme.HIGH_CONTRAST_DARK:
- return Color.fromHex('#000000');
- default:
- return Color.fromHex('#252526');
- }
+ return Color.transparent;
}
// < --- Tabs --- >
@@ -855,6 +845,13 @@
hcLight: editorInfoForeground
}, localize('notificationsInfoIconForeground', "The color used for the icon of info notifications. Notifications slide in from the bottom right of the window."));
+export const WINDOW_BACKGROUND = registerColor('window.background', {
+ dark: '#252526',
+ light: '#F3F3F3',
+ hcDark: '#000000',
+ hcLight: '#FFFFFF'
+}, localize('windowBackground', "The color used for the background of the window."));
+
export const WINDOW_ACTIVE_BORDER = registerColor('window.activeBorder', {
dark: null,
light: null,
diff -Naur a/src/vs/workbench/contrib/splash/browser/partsSplash.ts b/src/vs/workbench/contrib/splash/browser/partsSplash.ts
--- a/src/vs/workbench/contrib/splash/browser/partsSplash.ts 2023-02-01 05:32:54.000000000 +0100
+++ b/src/vs/workbench/contrib/splash/browser/partsSplash.ts 2023-02-03 08:41:45.193374826 +0100
@@ -65,12 +65,17 @@
private _savePartsSplash() {
const theme = this._themeService.getColorTheme();
+ const windowBackground = theme.getColor(themes.WINDOW_BACKGROUND) || Color.transparent;
+ const background = windowBackground.isOpaque() ? windowBackground.transparent(0.99)
+ : windowBackground.isTransparent() ? Color.fromHex('#FFF0')
+ : windowBackground;
+
this._partSplashService.saveWindowSplash({
zoomLevel: this._configService.getValue<undefined>('window.zoomLevel'),
baseTheme: getThemeTypeSelector(theme.type),
colorInfo: {
foreground: theme.getColor(foreground)?.toString(),
- background: Color.Format.CSS.formatHex(theme.getColor(editorBackground) || themes.WORKBENCH_BACKGROUND(theme)),
+ background: Color.Format.CSS.formatRGBA(background),
editorBackground: theme.getColor(editorBackground)?.toString(),
titleBarBackground: theme.getColor(themes.TITLE_BAR_ACTIVE_BACKGROUND)?.toString(),
activityBarBackground: theme.getColor(themes.ACTIVITY_BAR_BACKGROUND)?.toString(),
diff -Naur a/src/vs/workbench/contrib/terminal/browser/xterm/xtermTerminal.ts b/src/vs/workbench/contrib/terminal/browser/xterm/xtermTerminal.ts
--- a/src/vs/workbench/contrib/terminal/browser/xterm/xtermTerminal.ts 2023-12-06 02:36:56.000000000 +0100
+++ b/src/vs/workbench/contrib/terminal/browser/xterm/xtermTerminal.ts 2023-12-08 03:27:56.018613920 +0100
@@ -219,6 +219,7 @@
this.raw = this._register(new xtermCtor({
allowProposedApi: true,
+ allowTransparency: true,
cols,
rows,
documentOverride: layoutService.mainContainer.ownerDocument,
|