fix mode refresh problem

src/app/[locale]/(default)/(home)/HomeHeroRow.tsx

@@ -16,7 +16,7 @@ import {
   PrismaLogoHorizontal,
   PrismaLogoInvertHorizontal,
   SolanaLogoHorizontal,
-  SolanaLogoInvertHorizontal,
+  SolanaLogoInvertHorizontal
 } from '@/assets/img'
 import { Button } from '@/components/ui/button'
 import appInfo from '@appInfo'
@@ -27,7 +27,7 @@ import { cn } from '@/lib/utils'
 import { Link } from '@/navigation'
 import { useLocale, useTranslations } from 'next-intl'
 import Image from 'next/image'
-import { useTheme } from 'next-themes'
+import { useTheme } from '@/hooks/utils/useTheme'
 import { faGithub } from '@fortawesome/free-brands-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
@@ -36,50 +36,51 @@ const logos = [
     title: 'CloudFlare',
     logo: CloudFlareLogoHorizontal,
     logoInvert: CloudFlareLogoInvertHorizontal,
-    href: 'https://cloudflare.com/',
+    href: 'https://cloudflare.com/'
   },
   {
     title: 'Deno',
     logo: DenoLogoHorizontal,
     logoInvert: DenoLogoInvertHorizontal,
-    href: 'https://deno.com/',
+    href: 'https://deno.com/'
   },
   {
     title: 'Neon',
     logo: NeonLogoHorizontal,
     logoInvert: NeonLogoInvertHorizontal,
-    href: 'https://neon.tech/',
+    href: 'https://neon.tech/'
   },
   {
     title: 'Prisma',
     logo: PrismaLogoHorizontal,
     logoInvert: PrismaLogoInvertHorizontal,
-    href: 'https://prisma.io/',
+    href: 'https://prisma.io/'
   },
   {
     title: 'Solana',
     logo: SolanaLogoHorizontal,
     logoInvert: SolanaLogoInvertHorizontal,
-    href: 'https://solana.com/',
+    href: 'https://solana.com/'
   },
   {
     title: 'Next',
     logo: NextLogoHorizontal,
     logoInvert: NextLogoInvertHorizontal,
-    href: 'https://nextjs.org/',
+    href: 'https://nextjs.org/'
   },
   {
     title: 'Expo',
     logo: ExpoLogoHorizontal,
     logoInvert: ExpoLogoInvertHorizontal,
-    href: 'https://expo.dev/',
-  },
+    href: 'https://expo.dev/'
+  }
 ]
 
 export default function HomeHeroRow() {
   const t = useTranslations()
   const locale = useLocale()
-  const { theme } = useTheme()
+  const { theme, mounted } = useTheme()
+  if (!mounted) return null
 
   return (
     <>
@@ -110,7 +111,7 @@ export default function HomeHeroRow() {
           <h1
             className={cn(
               'py-2 text-center text-4xl font-bold tracking-tighter sm:text-7xl lg:text-7xl',
-              mainShardGradation,
+              mainShardGradation
             )}
           >
             {t('(home).HomeHeroRow.title1')} <br />
@@ -120,7 +121,7 @@ export default function HomeHeroRow() {
           <p
             className={cn(
               '-mt-4 max-w-96 text-center text-sm font-medium sm:max-w-lg sm:text-lg lg:-mt-2 lg:max-w-xl lg:text-xl',
-              'text-zinc-500 dark:text-zinc-300',
+              'text-zinc-500 dark:text-zinc-300'
             )}
           >
             {t('(home).HomeHeroRow.subtitle1')} <br />

src/components/config/ModeToggle.tsx

@@ -2,21 +2,22 @@
 
 import * as React from 'react'
 import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
-import { useTheme } from 'next-themes'
+import { useTheme } from '@/hooks/utils/useTheme'
 
 import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuTrigger,
+  DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
 import { useTranslations } from 'next-intl'
 
 export function ModeToggle() {
-  const { setTheme } = useTheme()
   const t = useTranslations()
 
+  const { theme, mounted, setTheme } = useTheme()
+  if (!mounted) return null
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>

src/hooks/utils/useTheme.tsx

@@ -0,0 +1,14 @@
+'use client'
+import { useTheme as useNextTheme } from 'next-themes'
+import { useEffect, useState } from 'react'
+
+export function useTheme() {
+  const [mounted, setMounted] = useState(false)
+  const { theme, setTheme } = useNextTheme()
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  return { theme, setTheme, mounted }
+}