Transparent window has white background

• 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?

[Yuvix25]

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

[GregorBiswanger]

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?