Beautiful theme switch

components/Blog/Navigation.tsx

@@ -2,20 +2,11 @@
 import type { NextPage } from "next";
 import Link from "next/link";
 import { Terminal, Sun, Moon } from "phosphor-react";
+import ThemeSwitch from "./ThemeSwitch";
 
 import styles from "../../styles/Blog/Navigation.module.scss";
 
 const Navigation: NextPage<{}> = () => {
-    const switchTheme = () => {
-        if (typeof document === "undefined") return;
-
-        const current = document.documentElement.getAttribute("data-theme") || "dark";
-        const setTo = current === "dark" ? "light" : "dark";
-        document.documentElement.setAttribute("data-theme", setTo);
-
-        if (typeof window !== "undefined") window.localStorage.setItem("theme", setTo);
-    };
-
     return <nav className={styles.navigation}>
         <Link href={"/"}>
             <a className={`nostyle ${styles.imgContainer}`}>
@@ -29,10 +20,7 @@ const Navigation: NextPage<{}> = () => {
         <div className={styles.navLink}><Link href={"/"}><a className="nostyle">About me</a></Link></div>
         <div className={styles.spacer}></div>
         <Terminal size={"1.5em"} />
-        <div className={styles.themeSwitch}>
-            <Sun className={styles.lightTheme} size={"1.5em"} onClick={switchTheme} />
-            <Moon className={styles.darkTheme} size={"1.5em"} onClick={switchTheme} />
-        </div>
+        <ThemeSwitch />
     </nav>;
 };