Theme toggle button fixed (#63)

Author: parthratra11

README.md

@@ -109,6 +109,13 @@ git push origin feature/your-feature-name
 # Go to the original repository on GitHub and open a new Pull Request
 # Provide a clear description of your changes in the Pull Request.
 ```
+## Contributors
+We are grateful to our contributors!
+Below is a list of all the amazing contributors who have helped make this project better:
+
+<p align="center"> <a href="https://github.com/yashksaini-coder/Leetcode-Journal/graphs/contributors"> <img src="https://contrib.rocks/image?repo=yashksaini-coder/Leetcode-Journal" /> </a> </p>
+
+##
 
 # Project Contributers: 
 ### Thank you everyone for your contributions! 🙏 We hope to see you contribute even more in the future. 🚀👨‍💻👩‍💻

components/theme-toggle.tsx

@@ -1,16 +1,27 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { Moon, Sun } from 'lucide-react'
-import { useTheme } from "next-themes"
+import * as React from "react";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
 
 export function ThemeToggle() {
-  const { theme, setTheme } = useTheme()
+  const { theme, setTheme, resolvedTheme } = useTheme();
+
+  React.useEffect(() => {
+    if (!resolvedTheme) {
+      setTheme("dark"); // DARK THEME BY DEFAULT
+    }
+  }, [resolvedTheme, setTheme]);
 
   const toggleTheme = () => {
-    setTheme(theme === "dark" ? "light" : "dark")
+    setTheme(theme === "dark" ? "light" : "dark");
+  };
+
+  // NOT RENDERING ICONS UNTIL THE THEME IS RESOLVED
+  if (!resolvedTheme) {
+    return null;
   }
 
   return (
@@ -21,16 +32,21 @@ export function ThemeToggle() {
       aria-label="Toggle theme"
       className="relative p-2 rounded-full transition-colors duration-300 hover:bg-gray-200 dark:hover:bg-gray-700"
     >
-      
-      <Sun className={`h-5 w-5 text-black-500 transition-all duration-500 ease-in-out transform ${
-          theme === "dark" ? "rotate-180 opacity-0 scale-0" : "rotate-0 opacity-100 scale-100"
+      <Sun
+        className={`h-5 w-5 text-black-500 transition-all duration-500 ease-in-out transform ${
+          resolvedTheme === "dark"
+            ? "rotate-180 opacity-0 scale-0"
+            : "rotate-0 opacity-100 scale-100"
         }`}
       />
-      
-      <Moon className={`absolute h-5 w-5 text-white-700 transition-all duration-500 ease-in-out transform ${
-          theme === "light" ? "rotate-0 opacity-0 scale-0" : "rotate-120 opacity-100 scale-100"
+
+      <Moon
+        className={`absolute h-5 w-5 text-white-700 transition-all duration-500 ease-in-out transform ${
+          resolvedTheme === "light"
+            ? "rotate-0 opacity-0 scale-0"
+            : "rotate-120 opacity-100 scale-100"
         }`}
       />
     </Button>
-  )
+  );
 }