Merge pull request #316 from EpicsDAO/improve-doc

fix mode refresh problem

website/solv-epics-dev/src/app/[locale]/(default)/(home)/HomeHeroRow.tsx

@@ -21,7 +21,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 { faDiscord } from '@fortawesome/free-brands-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { DEFAULT_PATHS } from '../defaultNavs'
@@ -57,7 +57,8 @@ const logos = [
 export default function HomeHeroRow() {
   const t = useTranslations()
   const locale = useLocale()
-  const { theme } = useTheme()
+  const { theme, mounted } = useTheme()
+  if (!mounted) return null
 
   return (
     <>

website/solv-epics-dev/src/components/config/ModeToggle.tsx

@@ -2,7 +2,7 @@
 
 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 {
@@ -14,8 +14,9 @@ import {
 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>

website/solv-epics-dev/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 }
+}