fix: DarkModeToggle server vs client issues

src/components/navbar/Navbar.tsx

@@ -1,6 +1,10 @@
 import Link from 'next/link'
+import dynamic from 'next/dynamic'
 import SkipLink from '../common/SkipLink'
-import DarkModeToggle from '../theme/DarkModeToggle'
+
+const DarkModeToggle = dynamic(() => import('../theme/DarkModeToggle'), {
+  ssr: false,
+})
 
 const Navbar = () => {
   // This is for further possible development

src/components/theme/DarkModeProvider.tsx

@@ -8,7 +8,7 @@ type ProviderProps = {
 }
 
 const DarkModeProvider = ({ children }: ProviderProps) => (
-  <ThemeProvider attribute='class' defaultTheme='system' enableSystem>
+  <ThemeProvider attribute='class' defaultTheme="system" enableSystem>
     {children}
   </ThemeProvider>
 )

src/components/theme/DarkModeToggle.tsx

@@ -3,39 +3,24 @@
 import React from 'react'
 import { useTheme } from 'next-themes'
 
+import SunIcon from './SunIcon'
+import MoonIcon from './MoonIcon'
+
 const DarkModeToggle = () => {
   const { theme, setTheme } = useTheme()
-  
+
   return (
     <button
       type='button'
-      aria-label={theme === 'dark' ? 'Toggle light mode' : 'Toggle dark mode'}
+      aria-label={theme === 'light' ? 'Toggle dark mode' : 'Toggle light mode'}
       className='flex flex-col justify-center ml-3'
-      onClick={() => (theme === 'dark' ? setTheme('light') : setTheme('dark'))}
+      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
     >
       {theme === 'light' ? (
-          <svg
-            aria-hidden="true"
-            tabIndex={-1}
-            className="group w-10 h-10 fill-current transition-colors duration-300 ease-in-out hover:animate-spin-xslow"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 16 16"
-          >
-            <path className="text-yellow-300" d="M7 0h2v2H7zM12.88 1.637l1.414 1.415-1.415 1.413-1.413-1.414zM14 7h2v2h-2zM12.95 14.433l-1.414-1.413 1.413-1.415 1.415 1.414zM7 14h2v2H7zM2.98 14.364l-1.413-1.415 1.414-1.414 1.414 1.415zM0 7h2v2H0zM3.05 1.706 4.463 3.12 3.05 4.535 1.636 3.12z" />
-            <path className="text-yellow-300 group-hover:text-yellow-400" d="M8 4C5.8 4 4 5.8 4 8s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4Z" />
-          </svg>
-        ) : (
-          <svg
-            aria-hidden="true"
-            tabIndex={-1}
-            className="group w-10 h-10 fill-current transition duration-500 ease-in-out hover:rotate-12"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 16 16"
-          >
-            <path className="text-stone-200 group-hover:text-stone-400" d="M6.2 1C3.2 1.8 1 4.6 1 7.9 1 11.8 4.2 15 8.1 15c3.3 0 6-2.2 6.9-5.2C9.7 11.2 4.8 6.3 6.2 1Z" />
-            <path className='text-yellow-500 group-hover:animate-pulse' d="M12.5 5a.625.625 0 0 1-.625-.625 1.252 1.252 0 0 0-1.25-1.25.625.625 0 1 1 0-1.25 1.252 1.252 0 0 0 1.25-1.25.625.625 0 1 1 1.25 0c.001.69.56 1.249 1.25 1.25a.625.625 0 1 1 0 1.25c-.69.001-1.249.56-1.25 1.25A.625.625 0 0 1 12.5 5Z" />
-          </svg>
-        )}
+        <SunIcon />
+      ) : (
+        <MoonIcon />
+      )}
     </button>
   )
 }

src/components/theme/MoonIcon.tsx

@@ -0,0 +1,16 @@
+import React from "react"
+
+const MoonIcon = () => (
+  <svg
+    aria-hidden="true"
+    tabIndex={-1}
+    className="group w-10 h-10 fill-current transition duration-500 ease-in-out hover:rotate-12"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+  >
+    <path className="text-stone-200 group-hover:text-stone-400" d="M6.2 1C3.2 1.8 1 4.6 1 7.9 1 11.8 4.2 15 8.1 15c3.3 0 6-2.2 6.9-5.2C9.7 11.2 4.8 6.3 6.2 1Z" />
+    <path className='text-yellow-500 group-hover:animate-pulse' d="M12.5 5a.625.625 0 0 1-.625-.625 1.252 1.252 0 0 0-1.25-1.25.625.625 0 1 1 0-1.25 1.252 1.252 0 0 0 1.25-1.25.625.625 0 1 1 1.25 0c.001.69.56 1.249 1.25 1.25a.625.625 0 1 1 0 1.25c-.69.001-1.249.56-1.25 1.25A.625.625 0 0 1 12.5 5Z" />
+  </svg>
+)
+
+export default MoonIcon

src/components/theme/SunIcon.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+const SunIcon = () => (
+  <svg
+    aria-hidden="true"
+    tabIndex={-1}
+    className="group w-10 h-10 fill-current transition-colors duration-300 ease-in-out hover:animate-spin-xslow"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+  >
+    <path className="text-yellow-300" d="M7 0h2v2H7zM12.88 1.637l1.414 1.415-1.415 1.413-1.413-1.414zM14 7h2v2h-2zM12.95 14.433l-1.414-1.413 1.413-1.415 1.415 1.414zM7 14h2v2H7zM2.98 14.364l-1.413-1.415 1.414-1.414 1.414 1.415zM0 7h2v2H0zM3.05 1.706 4.463 3.12 3.05 4.535 1.636 3.12z" />
+    <path className="text-yellow-300 group-hover:text-yellow-400" d="M8 4C5.8 4 4 5.8 4 8s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4Z" />
+  </svg>
+)
+
+export default SunIcon