From 00af7ec22243c78747335cbddbac1a0d96a0a8dc Mon Sep 17 00:00:00 2001
From: KishiTheMechanic <s.kishi@elsoul.nl>
Date: Thu, 17 Oct 2024 02:10:47 +0200
Subject: [PATCH] fix mode refresh problem

---
 .../app/[locale]/(default)/(home)/HomeHeroRow.tsx  |  5 +++--
 .../src/components/config/ModeToggle.tsx           |  5 +++--
 .../solv-epics-dev/src/hooks/utils/useTheme.tsx    | 14 ++++++++++++++
 3 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 website/solv-epics-dev/src/hooks/utils/useTheme.tsx

diff --git a/website/solv-epics-dev/src/app/[locale]/(default)/(home)/HomeHeroRow.tsx b/website/solv-epics-dev/src/app/[locale]/(default)/(home)/HomeHeroRow.tsx
index 035511e..b399645 100644
--- a/website/solv-epics-dev/src/app/[locale]/(default)/(home)/HomeHeroRow.tsx
+++ b/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 (
     <>
diff --git a/website/solv-epics-dev/src/components/config/ModeToggle.tsx b/website/solv-epics-dev/src/components/config/ModeToggle.tsx
index 6e209c4..4e4e989 100644
--- a/website/solv-epics-dev/src/components/config/ModeToggle.tsx
+++ b/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>
diff --git a/website/solv-epics-dev/src/hooks/utils/useTheme.tsx b/website/solv-epics-dev/src/hooks/utils/useTheme.tsx
new file mode 100644
index 0000000..ede12b6
--- /dev/null
+++ b/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 }
+}