working on dark mode

2023-08-02 19:53:55 +02:00
parent ffb1098a15
commit 64c417c1be
27 changed files with 162 additions and 108 deletions
@@ -0,0 +1,29 @@
+import { useTheme } from "next-themes";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
+
+export default function ToggleDarkMode() {
+  const { theme, setTheme } = useTheme();
+
+  const handleToggle = () => {
+    if (theme === "dark") {
+      setTheme("light");
+    } else {
+      setTheme("dark");
+    }
+  };
+
+  return (
+    <div
+      className="flex gap-1 group sm:hover:bg-slate-200 sm:hover:dark:bg-slate-800 sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit cursor-pointer"
+      onClick={handleToggle}
+    >
+      <div className="shadow bg-sky-700 dark:bg-sky-400 flex items-center justify-center rounded-full text-white w-10 h-10 sm:group-hover:w-8 sm:group-hover:h-8 duration-100 border-[3px] border-slate-200 dark:border-blue-900">
+        <FontAwesomeIcon
+          icon={theme === "dark" ? faSun : faMoon}
+          className="w-1/2 h-1/2"
+        />
+      </div>
+    </div>
+  );
+}