Tauriでメニューバーの色を変える

やりたいこと

Tauriのメニューバーの色を変えたい

やり方

TauriはWebViewを使ってUIを表示していますので、メニューバーはOSで設定されているものがそのまま表示され、色の変更やボタンの追加/削除はできません。ただし、メニューバーを消してしまうことはできますので、消して自分で作ってしまえば自由にデザインできるメニューバーが実現できます

1. メニューバーを消す

/src-tauri/tauri.conf.jsonのwindowsにdecorations: falseを追加すると表示されなくなります

/src-tauri/tauri.conf.json

{
    "app": {
        "windows": {
            "decorations": false
        }
    }
}

通常だと以下だったものが

下のように変わります

2. プラグインを有効にする

core:windowの最大化、最小化などを使うのでpermissionを指定しておきます

/src-tauri/capability/default.json

{
  "$schema": "../gen/schemas/desktop-schema.json",
  "identifier": "default",
  "description": "Capability for the main window",
  "windows": ["main"],
  "permissions": [
    "core:default",
    "opener:default",
    "core:window:allow-start-dragging",
    "core:window:allow-minimize",
    "core:window:allow-maximize",
    "core:window:allow-close",
  ]
}

3. メニューバーを足す

Windowsの標準のメニューには左にアイコン、右に最小化、最大化、終了ボタンがありますので、これを再現してやります。また、メニューバーをドラッグしてウィンドウの位置を動かす機能を追加する為にdata-tauri-drag-regionを付けておきます

/src/App.tsx

import { getCurrentWindow, LogicalSize } from "@tauri-apps/api/window";

function App() {
  /*
    以下の関数を追加
  */
  const minimize = async () => {
    const appWindow = getCurrentWindow();
    await appWindow.minimize();
  }
  const maximize = async () => {
    const appWindow = getCurrentWindow();
    if (await appWindow.isMaximized()) {
      await appWindow.unmaximize();
    } else {
      await appWindow.maximize();
    }
  }
  const close = async () => {
    const appWindow = getCurrentWindow();
    await appWindow.close();
  }

  return (
    <>
      {/*"header, navでメニューバーを再現"*/}
      <header className="h-6 select-none bg-zinc-900 border-b-2 border-black">
        <nav data-tauri-drag-region className="mx-auto flex justify-between items-center" aria-label="Global">
          <div
            className="pl-2 pr-2 text-white cursor-pointer"
            onDoubleClick={() => {close}}
          >
            ◆
          </div>

          <ul className="flex gap-x-1 pr-3">
            <li>
              <button onClick={minimize} className="window-control-button">
                _
              </button>
            </li>
            <li>
              <button onClick={maximize} className="window-control-button">
                □
              </button>
            </li>
            <li>
              <button onClick={close} className="window-control-button">
                ×
              </button>
            </li>
          </ul>
        </nav>
      </header>
      <div className="bg-zinc-900 h-[0px]"></div>
      <div>
          {/*"ここに元々あったコンポーネントを書く"*/}
      </div>
    </>
  );
}

以下のような感じになりました。ボタンは文字で作ってしまってるのでちょっとダサいですが、ちゃんと作る際にはSVGなどを使ってカッコよく作ってください

まとめ

分かると簡単なんですが、Tauri v2はドキュメントが貧弱なので結構苦戦しました
レッツトライ

参考