From b1bb4a69cd959adc4cda850920c54b1c4ee4a9c4 Mon Sep 17 00:00:00 2001
From: l0ng-ai <24760907+l0ng-ai@users.noreply.github.com>
Date: Fri, 23 Oct 2026 21:29:40 +0800
Subject: [PATCH] fix(app): Keep the dark theme's background under a fast
 window resize

splash.css painted html light and only switched body to dark, so the page
canvas showed the light colour wherever a live resize outran relayout.
Leave html unpainted so the canvas takes body's themed background.

Also set the webview's background (not just the native window's) on a
theme change; it otherwise kept the colour the window was created with.
---
 public/splash.css                   |  3 ++-
 src-tauri/capabilities/default.json |  1 +
 src/workbench/theme.ts              | 10 +++++++---
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/public/splash.css b/public/splash.css
index fb6bec72b..721d23c04 100644
--- a/public/splash.css
+++ b/public/splash.css
@@ -2,7 +2,8 @@
    which voids style-src 'unsafe-inline' and blocks the editor's runtime-injected styles. */
 /* Start-up splash over the page until the window's launch project is open (platform/splash.ts).
    Tokens aren't loaded yet, so the colours mirror --bg-frame / --fg-muted / --accent. */
-html, body, .splash { background: #e9eaee; }
+/* Not on html: the canvas then takes body's (themed) background, which a fast resize shows before relayout. */
+body, .splash { background: #e9eaee; }
 :root[data-theme="dark"] :is(body, .splash) { background: #26282c; }
 :root:is([data-theme="dark-hc"], [data-theme="dark"][data-contrast="high"]) :is(body, .splash) { background: #1a1b1e; }
 .splash {
diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json
index 972d292b3..ec680d716 100644
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@@ -16,6 +16,7 @@
     "core:window:allow-set-title",
     "core:window:allow-set-background-color",
     "core:webview:allow-set-webview-zoom",
+    "core:webview:allow-set-webview-background-color",
     "opener:default",
     "opener:allow-reveal-item-in-dir",
     "dialog:default",
diff --git a/src/workbench/theme.ts b/src/workbench/theme.ts
index 113d90741..c9084610c 100644
--- a/src/workbench/theme.ts
+++ b/src/workbench/theme.ts
@@ -1,6 +1,6 @@
 /** Applies `data-theme` and the accent colour from appearance settings. */
 import { useEffect, useSyncExternalStore } from "react";
-import { getCurrentWindow } from "@tauri-apps/api/window";
+import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
 import { create } from "zustand";
 import { call, commands, isTauri } from "@/platform/ipc";
 import { useProject } from "@/platform/project";
@@ -88,12 +88,16 @@ export function useApplyTheme() {
   }, [pending, theme, id, accent]);
 }
 
-/** The native window shows its own colour where a live resize outruns the webview; match the frame. */
+/**
+ * Where a live resize outruns the page, the native window and the webview (WebView2's default
+ * background) show their own colours; match both to the frame. The webview one is only set at
+ * window creation otherwise, so a theme switched later left it light.
+ */
 function syncWindowBackground() {
   if (!isTauri()) return;
   const color = getComputedStyle(document.documentElement).getPropertyValue("--bg-frame").trim();
   if (!color) return;
-  getCurrentWindow()
+  getCurrentWebviewWindow()
     .setBackgroundColor(color)
     .catch(() => {});
 }