Transparent window has white background #855

New Issue

claunia · 2026-01-29T16:50:23Z

claunia commented

2026-01-29 16:50:23 +00:00

Originally created by @Yuvix25 on GitHub (Mar 29, 2023).

Originally assigned to: @GregorBiswanger on GitHub.

Electron.NET Version 23.6.1
.NET Core Version 7.0
Node.js Version 18.12
Target: Windows

I have created a window like so:

var window = await Electron.WindowManager.CreateWindowAsync(new BrowserWindowOptions()
{
   Resizable = false,
   Fullscreen = true,
   Minimizable = false,
   Movable = false,
   Frame = false,
   Transparent = true,
   BackgroundColor = "#00000000",
});
window.SetAlwaysOnTop(true, OnTopLevel.screenSaver);

Expecting the background the be transparent, but instead it is white. (The page itself only contains one <p> element, nothing more)
I tried adding some delay before calling CreateWindowAsync, as I saw it solved the issue for some people using normal Electron, but that did not help either.

Any idea how can I fix this?

Originally created by @Yuvix25 on GitHub (Mar 29, 2023). Originally assigned to: @GregorBiswanger on GitHub.    * **Electron.NET** Version 23.6.1 * **.NET Core** Version 7.0 * **Node.js** Version 18.12 * **Target**: Windows  I have created a window like so: ```cs var window = await Electron.WindowManager.CreateWindowAsync(new BrowserWindowOptions() { Resizable = false, Fullscreen = true, Minimizable = false, Movable = false, Frame = false, Transparent = true, BackgroundColor = "#00000000", }); window.SetAlwaysOnTop(true, OnTopLevel.screenSaver); ``` Expecting the background the be transparent, but instead it is white. (The page itself only contains one `<p>` element, nothing more) I tried adding some delay before calling `CreateWindowAsync`, as I saw it solved the issue for some people using normal Electron, but that did not help either. Any idea how can I fix this?

claunia added the question label 2026-01-29 16:50:23 +00:00

claunia closed this issue

2026-01-29 16:50:23 +00:00

claunia commented

2026-01-29 16:50:24 +00:00

@IgorVolod commented on GitHub (Mar 29, 2023):

The white background on startup was the first issue I had to deal with since my app loads in the "dark" theme by default. Try this option. My white canvas has disappeared ... completely ...

//electron.net - start
builder.Services.AddElectron();
builder.WebHost.UseElectron(args);
if (HybridSupport.IsElectronActive)
{
    // Open the Electron-Window here
    Task.Run(async () => {
        var window = await Electron.WindowManager.CreateWindowAsync(
           new BrowserWindowOptions
              {
               Title = "Name app",
               BackgroundColor = "#111",
               Show = false,
               AutoHideMenuBar = true,
           });
        window.Maximize();
        window.OnClosed += () =>
        {
            Electron.App.Quit();
        };
    });
}

@IgorVolod commented on GitHub (Mar 29, 2023): The white background on startup was the first issue I had to deal with since my app loads in the "dark" theme by default. Try this option. My white canvas has disappeared ... completely ... ```C# //electron.net - start builder.Services.AddElectron(); builder.WebHost.UseElectron(args); if (HybridSupport.IsElectronActive) { // Open the Electron-Window here Task.Run(async () => { var window = await Electron.WindowManager.CreateWindowAsync( new BrowserWindowOptions { Title = "Name app", BackgroundColor = "#111", Show = false, AutoHideMenuBar = true, }); window.Maximize(); window.OnClosed += () => { Electron.App.Quit(); }; }); } ```

claunia commented

2026-01-29 16:50:24 +00:00

@GregorBiswanger commented on GitHub (Mar 29, 2023):

I built a Blazor server app and it works without any problems. See the screenshot.

For this I changed the site.css in the wwwroot/css directory:

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: transparent;
}

This is my Electron.NET startup code:

using ElectronNET.API;
using ElectronNET.API.Entities;
using ElectronNetTransparentWindow.Data;

var builder = WebApplication.CreateBuilder(args);
builder.WebHost.UseElectron(args);

builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

await app.StartAsync();


await Task.Run(async () =>
{
    Electron.App.CommandLine.AppendSwitch("enable-transparent-visuals");
    Electron.App.CommandLine.AppendSwitch("disable-gpu-compositing");

    var browserWindowOptions = new BrowserWindowOptions
    {
        Frame = false,
        Transparent = true
    };

    await Electron.WindowManager.CreateWindowAsync(browserWindowOptions);
});

await app.WaitForShutdownAsync();

did you make it?

@GregorBiswanger commented on GitHub (Mar 29, 2023): ![image](https://user-images.githubusercontent.com/7336300/228646608-12680371-0396-405d-ba7d-1374f5ccb0a3.png) I built a **Blazor server app** and it works without any problems. See the screenshot. For this I changed the `site.css` in the `wwwroot/css` directory: ``` html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: transparent; } ``` This is my Electron.NET startup code: ``` using ElectronNET.API; using ElectronNET.API.Entities; using ElectronNetTransparentWindow.Data; var builder = WebApplication.CreateBuilder(args); builder.WebHost.UseElectron(args); builder.Services.AddRazorPages(); builder.Services.AddServerSideBlazor(); builder.Services.AddSingleton<WeatherForecastService>(); var app = builder.Build(); if (!app.Environment.IsDevelopment()) { app.UseExceptionHandler("/Error"); app.UseHsts(); } app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseRouting(); app.MapBlazorHub(); app.MapFallbackToPage("/_Host"); await app.StartAsync(); await Task.Run(async () => { Electron.App.CommandLine.AppendSwitch("enable-transparent-visuals"); Electron.App.CommandLine.AppendSwitch("disable-gpu-compositing"); var browserWindowOptions = new BrowserWindowOptions { Frame = false, Transparent = true }; await Electron.WindowManager.CreateWindowAsync(browserWindowOptions); }); await app.WaitForShutdownAsync(); ``` did you make it?

claunia commented

2026-01-29 16:50:24 +00:00

@Yuvix25 commented on GitHub (Mar 29, 2023):

@GregorBiswanger Yes! That's it.
Your solution works perfectly 👌🏻

@Yuvix25 commented on GitHub (Mar 29, 2023): @GregorBiswanger Yes! That's it. Your solution works perfectly 👌🏻

claunia commented

2026-01-29 16:50:25 +00:00

@Yuvix25 commented on GitHub (Mar 29, 2023):

While we're at it, do you know if it is possible to allow mouse clicks/keystrokes to go through the transparent bits and on to a background app?
So that it is still possible to interact with non-transparent elements, but you can also interact with whatever is running behind the app?

Alternatively, if that's not possible, is it possible to make my window completely ignore any sort of interaction, and let the background app have everything?

@Yuvix25 commented on GitHub (Mar 29, 2023): While we're at it, do you know if it is possible to allow mouse clicks/keystrokes to go through the transparent bits and on to a background app? So that it is still possible to interact with non-transparent elements, but you can also interact with whatever is running behind the app? Alternatively, if that's not possible, is it possible to make my window completely ignore any sort of interaction, and let the background app have everything?

claunia commented

2026-01-29 16:50:25 +00:00

@FlorianRappl commented on GitHub (Mar 29, 2023):

That is not (directly) possible (see https://github.com/electron/electron/issues/1335). You can, however, use one of the workarounds in the linked issue to fake this behavior.

@FlorianRappl commented on GitHub (Mar 29, 2023): That is not (directly) possible (see https://github.com/electron/electron/issues/1335). You can, however, use one of the workarounds in the linked issue to fake this behavior.

claunia commented

2026-01-29 16:50:26 +00:00

@Yuvix25 commented on GitHub (Mar 29, 2023):

Ok, there are a few good solution there indeed, thanks!

@Yuvix25 commented on GitHub (Mar 29, 2023): Ok, there are a few good solution there indeed, thanks!

claunia referenced this issue

2026-01-29 16:59:39 +00:00

[PR #855] [CLOSED] Set fixed eletron-builder version #1325

Sign in to join this conversation.