feat: System preferences icon

src/components/mode-toggle.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import * as React from "react";
-import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
+import {useEffect, useState} from "react";
+import { MoonIcon, SunIcon, GlobeIcon } from "@radix-ui/react-icons";
 import { useTheme } from "next-themes";
 import { Button } from "./ui/button";
 import {
@@ -12,14 +12,36 @@ import {
 } from "./ui/dropdown-menu";
 
 export function ModeToggle() {
+  const [mounted, setMounted] = useState(false);
   const { theme, setTheme } = useTheme();
   const toggleTheme = () => {
-    setTheme(theme === "light" ? "dark" : "light");
+    switch (theme) {
+      case 'system':
+        setTheme("dark");
+        break;
+      case 'dark':
+        setTheme("light");
+        break;
+      case 'light':
+        setTheme('system');
+        break;
+    }
   };
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null; 
+  }
+
+  console.log(theme);
   return (
     <Button variant="ghost" size="icon" onClick={toggleTheme}>
-      <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-      <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <GlobeIcon className={`${ (theme === 'system') ? 'visible' : 'hidden'} h-[1.2rem] w-[1.2rem]`} />
+      <SunIcon className={`${ (theme === 'light') ? 'visible' : 'hidden'} h-[1.2rem] w-[1.2rem]`} />
+      <MoonIcon className={`${ (theme === 'dark') ? 'visible' : 'hidden'} h-[1.2rem] w-[1.2rem]`} />
       <span className="sr-only">Toggle theme</span>
     </Button>
   );