⤵

components/Footer.tsx

@@ -13,6 +13,7 @@ import styles from './styles.module.css'
 // TODO: merge the data and icons from PageSocial with the social links in Footer
 
 export const FooterImpl: React.FC = () => {
+  const [hasMounted, setHasMounted] = React.useState(false)
   const darkMode = useDarkMode(false, { classNameDark: 'dark-mode' })
 
   const onToggleDarkMode = React.useCallback(
@@ -23,19 +24,25 @@ export const FooterImpl: React.FC = () => {
     [darkMode]
   )
 
+  React.useEffect(() => {
+    setHasMounted(true)
+  }, [])
+
   return (
     <footer className={styles.footer}>
       <div className={styles.copyright}>Copyright 2022 {config.author}</div>
 
       <div className={styles.settings}>
-        <a
-          className={styles.toggleDarkMode}
-          href='#'
-          role='button'
-          onClick={onToggleDarkMode}
-        >
-          {darkMode.value ? <IoMoonSharp /> : <IoSunnyOutline />}
-        </a>
+        {hasMounted && (
+          <a
+            className={styles.toggleDarkMode}
+            href='#'
+            role='button'
+            onClick={onToggleDarkMode}
+          >
+            {darkMode.value ? <IoMoonSharp /> : <IoSunnyOutline />}
+          </a>
+        )}
       </div>
 
       <div className={styles.social}>