Zenn
Open3

Tauri Window Customization について

React
Rust
Tauri
ふじわら　ひできふじわら　ひでき

MainWindowの角を丸くする方法

下記の変更を行うと　タイトルバーやMenuバー　がメインWindowより非表示となる。

tauri.conf.json
    "windows": [
      {
-      "decorations": true,
+     "decorations": false,
        "theme": "Dark",
        "fullscreen": false,
        "resizable": true,
        "title": "D4DataStudio",
        "width": 1920,
        "height": 1080
      }

しかし、下記のようにメインWindow四角くなり見栄えが悪化する。

改善するためには、
・tauri v2 を待つ！
・Htmlを書く
参考サイト
https://github.com/tauri-apps/tauri/discussions/3093

下記のようにする

tauri.conf.json
    "windows": [
      {
        "decorations": false,
        "theme": "Dark",
        "fullscreen": false,
        "resizable": true,
        "title": "D4DataStudio",
        "width": 1920,
        "height": 1080,
+     "transparent": true
      }
    ]
index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tauri + React + TS</title>
  </head>

  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
+<style>
+  html,
+  body {
+    border-radius: 10px;
+    overflow: hidden;
+ }
+
+  .element-inside-your-body {
+    overflow: auto;
+  }
+</style>

Windows11　の場合、不完全にしか丸くならない。

なんでだよ？

ふじわら　ひできふじわら　ひでき

DaisyUIで優先度が変更されるみたいなので、!importantをつけます。

index.html
<style>
 html,
 body {
+    background-color: transparent !important;
   border-radius: 10px ;
   overflow: hidden;
 }
 .element-inside-your-body {
   overflow: auto;
 }
</style>