feat: system theme resolves as dark or light

src/components/ThemeSetter.tsx

@@ -0,0 +1,17 @@
+import { useTheme } from 'next-themes';
+import { ReactNode, useEffect } from 'react';
+
+import { trpc } from '../utils/trpcClient';
+
+export const ThemeSetter = ({ children }: { children: ReactNode }) => {
+    const updateSettingsMutation = trpc.user.updateSettings.useMutation();
+    const { resolvedTheme, theme } = useTheme();
+
+    useEffect(() => {
+        if (theme !== 'system' || resolvedTheme === 'system') return;
+        updateSettingsMutation.mutateAsync({ theme: resolvedTheme });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [resolvedTheme]);
+
+    return children;
+};

src/pages/_app.tsx

@@ -11,6 +11,7 @@ import { trpc } from '../utils/trpcClient';
 import { TLocale, setSSRLocale } from '../utils/getLang';
 import { GoalPreviewProvider } from '../components/GoalPreview/GoalPreviewProvider';
 import { getTelemetryInstanceSingleton, useWebTelemetryMonitoringInit } from '../utils/telemetry';
+import { ThemeSetter } from '../components/ThemeSetter';
 
 const defaultThemes = ['light', 'dark'];
 
@@ -38,11 +39,13 @@ const App = ({ Component, pageProps, router }: AppProps) => {
 
             <SessionProvider session={pageProps.session} refetchOnWindowFocus={true}>
                 <ThemeProvider themes={defaultThemes}>
-                    <GoalPreviewProvider>
-                        <PageLoadProgress height={2} ref={pageLoadRef} />
-                        <Component {...pageProps} />
-                        <ReactQueryDevtools />
-                    </GoalPreviewProvider>
+                    <ThemeSetter>
+                        <GoalPreviewProvider>
+                            <PageLoadProgress height={2} ref={pageLoadRef} />
+                            <Component {...pageProps} />
+                            <ReactQueryDevtools />
+                        </GoalPreviewProvider>
+                    </ThemeSetter>
                 </ThemeProvider>
             </SessionProvider>
         </>