theme-toggle (#52)

* default to system preferred theme

* theme svg in footer

* accounted for undefined window

app/[lang]/components/Footer.tsx

@@ -1,6 +1,7 @@
 import Link from "next-intl/link";
 import { FaGithub, FaRegEnvelope } from "react-icons/fa";
 import { useTranslations } from "next-intl";
+import ThemeSwitcher from "@/app/[lang]/components/ThemeSwitcher";
 
 export default function Footer() {
   const t = useTranslations("Footer");
@@ -34,6 +35,9 @@ export default function Footer() {
             EN
           </Link>
         </div>
+        <div className="text-xs">
+          <ThemeSwitcher />
+        </div>
       </div>
     </footer>
   );

app/[lang]/components/Navbar.tsx

@@ -54,9 +54,6 @@ export default function Navbar() {
                 {t("contact")}
               </Link>
             </li>
-            <li>
-              <ThemeSwitcher />
-            </li>
           </ul>
         </div>
       </div>

app/[lang]/components/ThemeSwitcher.tsx

@@ -1,42 +1,46 @@
 "use client";
 
-import { MdBrightness2, MdCircle } from "react-icons/md";
-import useDarkMode from "@/hooks/useDarkMode";
 import { useEffect, useState } from "react";
-import "@/css/theme-toggle.css";
+import useDarkMode from "@/hooks/useDarkMode";
 
 const ThemeSwitcher = () => {
   const [mounted, setMounted] = useState(false);
   const [colorTheme, setTheme] = useDarkMode();
 
-  useEffect(() => {
+  useEffect(() => setMounted(true), []);
-    setMounted(true);
-  }, []);
 
-  if (!mounted) {
+  if (!mounted) return null;
-    return null;
-  }
 
   return (
-    <div>
+    <>
       {colorTheme === "light" ? (
-        <div
+        <div data-test="toggle-dark" onClick={() => setTheme("light")}>
-          className="toggle-dark"
+          <svg
-          data-test="toggle-dark"
+            xmlns="http://www.w3.org/2000/svg"
-          onClick={() => setTheme("light")}
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            className="inline-block h-4 w-4"
           >
-          <MdBrightness2 className="theme-icon-dark" />
+            <path
+              fill-rule="evenodd"
+              d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z"
+              clip-rule="evenodd"
+            />
+          </svg>
         </div>
       ) : (
-        <div
+        <div data-test="toggle" onClick={() => setTheme("dark")}>
-          className="toggle"
+          <svg
-          data-test="toggle"
+            xmlns="http://www.w3.org/2000/svg"
-          onClick={() => setTheme("dark")}
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            className="inline-block h-4 w-4"
           >
-          <MdCircle className="theme-icon" />
+            <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
+          </svg>
         </div>
       )}
-    </div>
+    </>
   );
 };
 

hooks/useDarkMode.ts

@@ -1,9 +1,16 @@
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
 
 function useDarkMode(): [string, Dispatch<SetStateAction<string>>] {
+  const prefersDarkMode =
+    typeof window !== "undefined" &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches;
+
   const [theme, setTheme] = useState(
-    typeof window !== "undefined" ? localStorage.theme : "dark"
+    typeof window !== "undefined"
+      ? localStorage.theme || (prefersDarkMode ? "dark" : "light")
+      : "dark"
   );
+
   const colorTheme = theme === "dark" ? "light" : "dark";
 
   useEffect(() => {