Title bar in bg on Windows: theme colours on the native caption

Tauri 2 overlays web content on the title bar only on macOS, so Windows and
Linux keep the native title bar and window controls. On Windows 11 the
caption, title and border now take the theme's bg and text (DWM), re-applied
on every theme change and when the OS setting changes under "System", so the
caption and the app header read as one custom title bar. Linux (GTK) keeps
its own colours.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

src/main.ts

@@ -81,8 +81,22 @@ function applyTheme(t: Theme) {
   else document.documentElement.dataset.theme = t;
   // The native title bar and window controls follow too.
   void getCurrentWindow().setTheme(t === "system" ? null : t).catch(() => undefined);
+  paintTitleBar();
 }
 
+/// Windows and Linux keep the native title bar (Tauri overlays it only on macOS); on Windows 11 its caption
+/// takes the theme's `bg` and `text`, so it and the header below read as one custom title bar.
+function paintTitleBar() {
+  if (isMac) return;
+  const css = getComputedStyle(document.documentElement);
+  const bg = css.getPropertyValue("--bg").trim();
+  const text = css.getPropertyValue("--text").trim();
+  void invoke("set_title_bar_colors", { bg, text }).catch(() => undefined);
+}
+
+// "System" follows the OS setting while the app runs.
+matchMedia("(prefers-color-scheme: dark)").addEventListener("change", paintTitleBar);
+
 function setTheme(t: Theme) {
   try {
     localStorage.setItem("theme", t);