simplify dark mode handling

apps/desktop/package.json

@@ -30,7 +30,7 @@
     "@solidjs/router": "^0.14.2",
     "@solidjs/start": "^1.0.6",
     "@tanstack/solid-query": "^5.51.21",
-    "@tauri-apps/api": ">=2.0.0-rc.0",
+    "@tauri-apps/api": "^2.1.1",
     "@tauri-apps/plugin-dialog": "2.0.0-rc.1",
     "@tauri-apps/plugin-fs": "2.0.0-rc.0",
     "@tauri-apps/plugin-http": "^2.0.1",

apps/desktop/src-tauri/src/fake_window.rs

@@ -43,6 +43,8 @@ pub async fn remove_fake_window(
 }
 
 pub fn spawn_fake_window_listener(app: AppHandle, window: WebviewWindow) {
+    window.set_ignore_cursor_events(true).ok();
+
     tokio::spawn(async move {
         let state = app.state::<FakeWindowBounds>();
 
@@ -91,3 +93,7 @@ pub fn spawn_fake_window_listener(app: AppHandle, window: WebviewWindow) {
         }
     });
 }
+
+pub fn init(app: &AppHandle) {
+    app.manage(FakeWindowBounds(Default::default()));
+}

apps/desktop/src-tauri/src/lib.rs

@@ -1790,6 +1790,12 @@ pub async fn run() {
         .plugin(tauri_plugin_notification::init())
         .plugin(
             tauri_plugin_window_state::Builder::new()
+                .with_state_flags({
+                    use tauri_plugin_window_state::StateFlags;
+                    let mut flags = StateFlags::all();
+                    flags.remove(StateFlags::VISIBLE);
+                    flags
+                })
                 .with_denylist(&[
                     CapWindowId::Setup.label().as_str(),
                     CapWindowId::WindowCaptureOccluder.label().as_str(),
@@ -1809,6 +1815,7 @@ pub async fn run() {
             specta_builder.mount_events(&app);
             hotkeys::init(&app);
             general_settings::init(&app);
+            fake_window::init(&app);
 
             if let Ok(Some(auth)) = AuthStore::load(&app) {
                 sentry::configure_scope(|scope| {
@@ -1826,6 +1833,7 @@ pub async fn run() {
             let permissions = permissions::do_permissions_check(false);
             println!("Permissions check result: {:?}", permissions);
 
+            ShowCapWindow::Setup.show(&app).ok();
             if !permissions.screen_recording.permitted()
                 || !permissions.accessibility.permitted()
                 || GeneralSettingsStore::get(&app)
@@ -1864,8 +1872,6 @@ pub async fn run() {
                 pre_created_video: None,
             })));
 
-            app.manage(FakeWindowBounds(Arc::new(RwLock::new(HashMap::new()))));
-
             tray::create_tray(&app).unwrap();
 
             RequestStartRecording::listen_any_spawn(&app, |_, app| async move {

apps/desktop/src-tauri/src/windows.rs

@@ -116,7 +116,7 @@ pub enum ShowCapWindow {
 impl ShowCapWindow {
     pub fn show(&self, app: &AppHandle<Wry>) -> tauri::Result<WebviewWindow> {
         if let Some(window) = self.id().get(app) {
-            window.show().ok();
+            // window.show().ok();
             window.set_focus().ok();
 
             return Ok(window);
@@ -136,7 +136,6 @@ impl ShowCapWindow {
                 .focused(true)
                 .maximizable(false)
                 .theme(Some(tauri::Theme::Light))
-                .visible(true)
                 .shadow(true)
                 .build()?,
             Self::Main => self
@@ -169,7 +168,6 @@ impl ShowCapWindow {
                 .inner_size(800.0, 800.0)
                 .resizable(false)
                 .focused(true)
-                .visible(true)
                 .always_on_top(true)
                 .maximized(false)
                 .transparent(true)
@@ -257,7 +255,6 @@ impl ShowCapWindow {
                         ((monitor.size().width as f64) / monitor.scale_factor() - width) / 2.0,
                         (monitor.size().height as f64) / monitor.scale_factor() - height - 120.0,
                     )
-                    .visible(false)
                     .theme(Some(tauri::Theme::Dark))
                     .skip_taskbar(true)
                     .build()?
@@ -309,12 +306,16 @@ impl ShowCapWindow {
 		                }).ok();
                 }
 
+                println!("about to spawn fake window listener");
+
                 fake_window::spawn_fake_window_listener(app.clone(), window.clone());
 
                 window
             }
         };
 
+        window.hide().ok();
+
         #[cfg(target_os = "macos")]
         if let Some(position) = id.traffic_lights_position() {
             add_traffic_lights(&window, position);

apps/desktop/src/App.tsx

@@ -1,39 +1,21 @@
 import { Router, useCurrentMatches } from "@solidjs/router";
 import { FileRoutes } from "@solidjs/start/router";
-import { ErrorBoundary, onMount, Suspense } from "solid-js";
+import {
+  createEffect,
+  createResource,
+  ErrorBoundary,
+  onMount,
+  Suspense,
+} from "solid-js";
 import { QueryClient, QueryClientProvider } from "@tanstack/solid-query";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { message } from "@tauri-apps/plugin-dialog";
 
 import "@cap/ui-solid/main.css";
 import "unfonts.css";
 import "./styles/theme.css";
-import { commands } from "./utils/tauri";
-import { themeStore } from "./store/theme";
-import "./store/early-theme-loader";
-
-const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-const localStorageDarkMode = localStorage.getItem("darkMode");
-
-// Check stored preference first, then system preference
-if (
-  localStorageDarkMode === "true" ||
-  (localStorageDarkMode === null && darkModeMediaQuery.matches)
-) {
-  document.documentElement.classList.add("dark");
-}
-
-// Add base background color to prevent flash
-const style = document.createElement("style");
-style.textContent = `
-  html.dark {
-    background-color: #1E1E1E;
-  }
-  html.dark body {
-    background-color: #1E1E1E;
-  }
-`;
-document.head.appendChild(style);
+import { generalSettingsStore } from "./store";
+import { getCurrentWebview } from "@tauri-apps/api/webview";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -46,43 +28,75 @@ const queryClient = new QueryClient({
 });
 
 export default function App() {
-  const darkMode = themeStore.isDarkMode;
+  return (
+    <Suspense>
+      <Inner />
+    </Suspense>
+  );
+}
+
+function Inner() {
+  createThemeListener();
 
   return (
-    <div class={darkMode() ? "dark" : ""}>
-      <ErrorBoundary
-        fallback={(e: Error) => {
-          console.error(e);
-          return (
-            <>
-              <p>{e.toString()}</p>
-              <p>{e.stack?.toString()}</p>
-            </>
-          );
-        }}
-      >
-        <QueryClientProvider client={queryClient}>
-          <Router
-            root={(props) => {
-              const matches = useCurrentMatches();
+    <ErrorBoundary
+      fallback={(e: Error) => {
+        console.error(e);
+        return (
+          <>
+            <p>{e.toString()}</p>
+            <p>{e.stack?.toString()}</p>
+          </>
+        );
+      }}
+    >
+      <QueryClientProvider client={queryClient}>
+        <Router
+          root={(props) => {
+            const matches = useCurrentMatches();
 
-              onMount(() => {
-                for (const match of matches()) {
-                  if (match.route.info?.AUTO_SHOW_WINDOW === false) return;
-                }
+            onMount(() => {
+              for (const match of matches()) {
+                if (match.route.info?.AUTO_SHOW_WINDOW === false) return;
+              }
 
-                themeStore.initialize().then(() => {
-                  getCurrentWindow().show();
-                });
-              });
+              getCurrentWindow().show();
+            });
 
-              return <Suspense>{props.children}</Suspense>;
-            }}
-          >
-            <FileRoutes />
-          </Router>
-        </QueryClientProvider>
-      </ErrorBoundary>
-    </div>
+            return <Suspense>{props.children}</Suspense>;
+          }}
+        >
+          <FileRoutes />
+        </Router>
+      </QueryClientProvider>
+    </ErrorBoundary>
   );
 }
+
+function createThemeListener() {
+  const [theme, themeActions] = createResource(() =>
+    generalSettingsStore.get().then((s) => s?.darkMode ?? null)
+  );
+
+  generalSettingsStore.listen((s) => {
+    themeActions.mutate(s?.darkMode);
+  });
+
+  createEffect(() => {
+    let t = theme();
+    if (
+      location.pathname === "/camera" ||
+      location.pathname === "/prev-recordings"
+    )
+      t = false;
+    if (t === undefined) return;
+
+    getCurrentWindow().setTheme(t ? "dark" : "light");
+
+    if (t) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  });
+}

apps/desktop/src/routes/(window-chrome).tsx

@@ -1,10 +1,5 @@
 import type { RouteSectionProps } from "@solidjs/router";
-import {
-  onCleanup,
-  onMount,
-  ParentProps,
-  Suspense,
-} from "solid-js";
+import { onCleanup, onMount, ParentProps, Suspense } from "solid-js";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { UnlistenFn } from "@tauri-apps/api/event";
 import { AbsoluteInsetLoader } from "~/components/Loader";

apps/desktop/src/routes/(window-chrome)/settings/general.tsx

@@ -2,7 +2,7 @@ import { createResource, Show, For } from "solid-js";
 import { createStore } from "solid-js/store";
 import { generalSettingsStore } from "~/store";
 import { commands, type GeneralSettingsStore } from "~/utils/tauri";
-import { themeStore } from "~/store/theme";
+// import { themeStore } from "~/store/theme";
 import {
   isPermissionGranted,
   requestPermission,
@@ -24,7 +24,7 @@ const settingsList: Array<{
     description:
       "Switch between light and dark theme for the application interface.",
     onChange: async () => {
-      await themeStore.toggleTheme();
+      // await themeStore.toggleTheme();
     },
   },
   {