Window loses acrylic effect after opening devTools

[tscpp]

I'm using the wrapper class.

function createWindow() {
	const window = new BrowserWindow({
		icon: path.join(__dirname, 'icons/explorer.ico'),
		frame: false,
		vibrancy: {
			disableOnBlur: false,
			effect: 'acrylic',
			theme: 'appearance-based',
			useCustomWindowRefreshMethod: true
		},
		webPreferences: {
			nodeIntegration: true,
			enableRemoteModule: true
		},
		minWidth: 250,
		minHeight: 250
	})
	
	window.loadFile(path.join(__dirname, '../web/window.html'))

	return window
}

Before (VSCode in the background)

DevTools open (the effect gets completly white)

After (the window loses it's effect)

[seo-rii]

Please try with mainWindow.webContents.openDevTools ({mode: "detach"});.

[tscpp]

Weird, the same thing still occurs...
The "DevTools open" state is removed #33 (comment). When I close the DevTools, the "After" state is still an issue.

[seo-rii]

When the above code is applied, the devTool must be opened in a new window separate from the BrowserWindow. Isn't it?

[tscpp]

Yes, the window is attached, but the window loses its effect after closing dev tools.

[seo-rii]

I couldn't find way to enable the Blur effect while devtools was open, but it was modified to re-appear the Blur effect after devtools is closed.
However, I still recommend opening devtools in a separate window.