wip: dark mode - light mode

src/shared/layouts/app.tsx

@@ -1,20 +1,24 @@
 import { Outlet, ScrollRestoration } from 'react-router-dom';
+import { WindowTitlebar } from 'tauri-controls';
 
 import { Navigation } from '@shared/navigation';
 
 export function AppLayout() {
   return (
-    <div className="flex h-screen w-screen">
-      <div className="shrink-0">
-        <Navigation />
-      </div>
-      <div className="h-full w-full flex-1">
-        <Outlet />
-        <ScrollRestoration
-          getKey={(location) => {
-            return location.pathname;
-          }}
-        />
+    <div className="h-screen w-screen bg-zinc-50 text-zinc-50 dark:bg-zinc-950 dark:text-zinc-950">
+      <WindowTitlebar className="border-b border-zinc-200 dark:border-zinc-800" />
+      <div className="flex h-full">
+        <div className="h-full shrink-0">
+          <Navigation />
+        </div>
+        <div className="h-full flex-1">
+          <Outlet />
+          <ScrollRestoration
+            getKey={(location) => {
+              return location.pathname;
+            }}
+          />
+        </div>
       </div>
     </div>
   );

src/shared/layouts/auth.tsx

@@ -1,10 +1,13 @@
 import { Outlet } from 'react-router-dom';
+import { WindowTitlebar } from 'tauri-controls';
 
 export function AuthLayout() {
   return (
-    <div className="relative h-screen w-screen">
-      <div className="absolute left-0 top-0 z-50 h-16 w-full" data-tauri-drag-region />
-      <Outlet />
+    <div className="relative h-screen w-screen bg-zinc-50 dark:bg-zinc-950">
+      <WindowTitlebar className="border-b border-zinc-200 dark:border-zinc-800" />
+      <div className="bg-zinc-100 dark:bg-zinc-900">
+        <Outlet />
+      </div>
     </div>
   );
 }