docs/app/providers.tsx

"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>
    );
}