From f3cb557ab0c1e83da0c19b6b0e5bd2ef65308797 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Fri, 27 Dec 2024 11:54:38 +0300
Subject: [PATCH] apps/web: support dark theme in tma

---
 apps/web/app/(auth)/browser/page.tsx  | 2 ++
 apps/web/app/(auth)/telegram/page.tsx | 6 +++++-
 apps/web/providers/theme-provider.tsx | 3 +--
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/web/app/(auth)/browser/page.tsx b/apps/web/app/(auth)/browser/page.tsx
index 0599986..518948f 100644
--- a/apps/web/app/(auth)/browser/page.tsx
+++ b/apps/web/app/(auth)/browser/page.tsx
@@ -2,11 +2,13 @@
 'use client';
 import { getTelegramUser } from '@/mocks/get-telegram-user';
 import { signIn, useSession } from 'next-auth/react';
+import { useTheme } from 'next-themes';
 import { redirect } from 'next/navigation';
 import { useEffect } from 'react';
 
 export default function Auth() {
   const { data: session, status } = useSession();
+  useTheme();
 
   useEffect(() => {
     if (status === 'authenticated') {
diff --git a/apps/web/app/(auth)/telegram/page.tsx b/apps/web/app/(auth)/telegram/page.tsx
index b57a263..4ce962d 100644
--- a/apps/web/app/(auth)/telegram/page.tsx
+++ b/apps/web/app/(auth)/telegram/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 import { initData, isMiniAppDark, useSignal } from '@telegram-apps/sdk-react';
 import { signIn, useSession } from 'next-auth/react';
+import { useTheme } from 'next-themes';
 import { redirect } from 'next/navigation';
 import { useEffect } from 'react';
 
@@ -8,8 +9,11 @@ export default function Auth() {
   const initDataUser = useSignal(initData.user);
   const isDark = isMiniAppDark();
   const { data: session, status } = useSession();
+  const { setTheme } = useTheme();
 
   useEffect(() => {
+    setTheme(isDark ? 'dark' : 'light');
+
     if (status === 'authenticated') {
       redirect('/profile');
     }
@@ -21,7 +25,7 @@ export default function Auth() {
         telegramId: String(initDataUser.id),
       });
     }
-  }, [initDataUser, status]);
+  }, [initDataUser, isDark, setTheme, status]);
 
   if (status === 'loading') {
     return <div>Loading Auth...</div>;
diff --git a/apps/web/providers/theme-provider.tsx b/apps/web/providers/theme-provider.tsx
index eeb356a..dd140f5 100644
--- a/apps/web/providers/theme-provider.tsx
+++ b/apps/web/providers/theme-provider.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { ThemeProvider as NextThemesProvider, useTheme } from 'next-themes';
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
 import { type ComponentProps, useEffect, useState } from 'react';
 
 /**
@@ -10,7 +10,6 @@ export function ThemeProvider({
   ...props
 }: Readonly<ComponentProps<typeof NextThemesProvider>>) {
   const [mounted, setMounted] = useState(false);
-  useTheme();
 
   useEffect(() => {
     setMounted(true);