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

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

diff --git a/website/skeet-dev/src/app/[locale]/(default)/(home)/HomeHeroRow.tsx b/website/skeet-dev/src/app/[locale]/(default)/(home)/HomeHeroRow.tsx
index fd4a415e..fcae463c 100644
--- a/website/skeet-dev/src/app/[locale]/(default)/(home)/HomeHeroRow.tsx
+++ b/website/skeet-dev/src/app/[locale]/(default)/(home)/HomeHeroRow.tsx
@@ -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 { faDiscord } from '@fortawesome/free-brands-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
@@ -80,7 +80,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/skeet-dev/src/components/config/ModeToggle.tsx b/website/skeet-dev/src/components/config/ModeToggle.tsx
index d707daf3..c07c2ea2 100644
--- a/website/skeet-dev/src/components/config/ModeToggle.tsx
+++ b/website/skeet-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,9 +14,11 @@ 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>
       <DropdownMenuTrigger asChild>
diff --git a/website/skeet-dev/src/hooks/utils/useTheme.tsx b/website/skeet-dev/src/hooks/utils/useTheme.tsx
new file mode 100644
index 00000000..ede12b62
--- /dev/null
+++ b/website/skeet-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 }
+}