Windows 上で Electron の半透明ウィンドウを作る

Electron で半透明のウィンドウを作ってみたくなったので調べてみた。

大まかなやり方はパターンが２つあって、どちらにも異なる制約がある。

• opacity を使う
• transparent を使う

設定場所

BrowserWindow を作るときのオプションで設定できる。
ここでは、２つのやり方を両方とも設定してみてある。

  const win = new BrowserWindow({
    transparent: true,
    opacity: 0.3,
    frame: false,
  });

1. opacity を使う

この設定方法は、文字も含めて、ウィンドウ全体が半透明になる。
使えるよう場所は少ないように思う。

2. transparent を使う

こちらは部分的な半透明にも対応できる。
ただ、制約があって、Windows ではフレーム無しのウィンドウの場合にしか使えないらしい。

ここの transparent の項目で以下のような説明がある。

transparent Boolean (optional) - Makes the window transparent. Default is false. On Windows, does not work unless the window is frameless.

なので、設定としては以下のような設定になる。

  const win = new BrowserWindow({
    transparent: true,
    frame: false,
  });

ウィンドウを作った後は、css で透明度を設定すれば、設定した場所が設定した透明度になる。

#main {
        background-color: rgba(0, 0, 0, 0.4);
}

box-shadow などでも半透明が効くようでかっこいい。