feat: ✨ Initialize rewrite

app/providers.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { ThemeProvider, useTheme } from "next-themes";
+import { type ReactNode, useEffect } from "react";
+
+function ThemeWatcher() {
+    const { resolvedTheme, setTheme } = useTheme();
+
+    useEffect(() => {
+        const media = window.matchMedia("(prefers-color-scheme: dark)");
+
+        function onMediaChange() {
+            const systemTheme = media.matches ? "dark" : "light";
+            if (resolvedTheme === systemTheme) {
+                setTheme("system");
+            }
+        }
+
+        onMediaChange();
+        media.addEventListener("change", onMediaChange);
+
+        return () => {
+            media.removeEventListener("change", onMediaChange);
+        };
+    }, [resolvedTheme, setTheme]);
+
+    return null;
+}
+
+export function Providers({ children }: { children: ReactNode }) {
+    return (
+        <ThemeProvider attribute="class" disableTransitionOnChange={true}>
+            <ThemeWatcher />
+            {children}
+        </ThemeProvider>
+    );
+}