Tauri のダークモードでウィンドウ起動時の白いフラッシュを防ぐ方法

Published:

Table of contents

Open Table of contents

はじめに

Tauri のダークモードでウィンドウ起動時の白いフラッシュを防ぐ方法と調査過程の備忘録である。 まずは、問題の再現方法から。

問題の再現方法

PC のダークモードを有効にして、tauri アプリケーションから新規ウィンドウを開くと、ウィンドウが白くフラッシュする。

再現イメージ

alt text

ウィンドウ起動部分のコードは以下の通り。

const settingsWindow = new WebviewWindow("settings", {
  url: "/settings",
  title: "Settings",
  height: 400,
  width: 400,
});

調査

ダークモードでないときに発生しないため、ダークモードが関係すると考えられる。 恐らく、ウィンドウが生成される際に、デフォルトの背景色が表示され、ダークモードが適用されるまでの間に白くフラッシュしていると考えられる。

試しに、ウィンドウ生成時にディレイを入れてみる。

const settingsWindow = new WebviewWindow("settings", {
  url: "/settings",
  title: "Settings",
  height: 400,
  width: 400,
  visible: false, // 非表示の状態で生成
});

settingsWindow.once("tauri://created", async function () {
  await new Promise(resolve => setTimeout(resolve, 200));
  await settingsWindow.show();
});

visible: false でウィンドウを非表示の状態で生成し、tauri://created イベントでウィンドウを表示するように変更した。その結果、白くフラッシュすることなくウィンドウが表示された。

対処法

上述した方法のように、ディレイを入れることで改善することができる。しかし、根本的な解決といえないため、別のアプローチを検討する。また、window-stateというプラグイン使用すると上述の方法でも解決できない場合がある。

そこで、背景を透明にすることで、白くフラッシュすることを回避することができる分かった。以下のように decorations: false と transparent: true を設定することで、ウィンドウの背景を透明にすることができる。

const settingsWindow = new WebviewWindow("settings", {
  url: "/settings",
  title: "Settings",
  height: 400,
  width: 400,
  decorations: false,
  transparent: true,
});

しかし、このオプションをつけることでウィンドウがフレームレスになり、ウィンドウの移動やリサイズができなくなる。そのため、ウィンドウの移動やリサイズが必要な場合は、別の方法を検討する必要がある。

flamelessWindow

そこで起動後にdecorations: trueへ変更する。
（もちろん、ウィンドウの移動等の実装を行っても良い）

settingsWindow.once("tauri://created", async function () {
  await settingsWindow.setDecorations(true);
});

これで、ウィンドウが白くフラッシュすることなく、ウィンドウが表示されるようになった。

最後に別の方法として、ウィンドウ生成時にOSのダークモードを取得し、それに応じてウィンドウの背景色を設定する方法もある。ここでは紹介しないが、参考までに。

最近話題の書

「何回説明しても伝わらない」はなぜ起こるのか？　認知科学が教えるコミュニケーションの本質と解決策
（最近読んでますが、文句なしでおもしろい。）

「何回説明しても伝わらない」はなぜ起こるのか？　認知科学が教えるコミュニケーションの本質と解決策