feat(theme): add dark mode with next-themes and settings toggle

app/providers.tsx

@@ -1,8 +1,10 @@
 "use client"
 
 import { GlobalLoginDialog } from "@/components/global-login-dialog"
+import { ThemeSyncEffect } from "@/components/theme-sync"
 import { TooltipProvider } from "@/components/ui/tooltip"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { ThemeProvider } from "next-themes"
 import { useState } from "react"
 import { Toaster } from "sonner"
 
@@ -21,11 +23,14 @@ export function Providers({ children }: { children: React.ReactNode }) {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <TooltipProvider>
-        {children}
-        <Toaster richColors position="top-center" />
-        <GlobalLoginDialog />
-      </TooltipProvider>
+      <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+        <TooltipProvider>
+          <ThemeSyncEffect />
+          {children}
+          <Toaster richColors position="top-center" />
+          <GlobalLoginDialog />
+        </TooltipProvider>
+      </ThemeProvider>
     </QueryClientProvider>
   )
 }