diff --git a/README.md b/README.md index 9e960d9..335a4a9 100644 --- a/README.md +++ b/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> + +## *Connect with me on GitHub: [yashksaini-coder](https://github.com/yashksaini-coder)* diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx index 429a17a..0fd083e 100644 --- a/components/theme-toggle.tsx +++ b/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> - ) + ); }