Ategon/Jamjar
1
0
Fork 0
mirror of https://github.com/Ategon/Jamjar.git synced 2025-02-12 06:16:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Handle system theme properly

Browse source
This commit is contained in:
Ategon 2025-01-19 13:54:16 -05:00
parent 095e8d73c0
commit 166c9ac876
1 changed files with 4 additions and 4 deletions

8
src/components/theme-toggle/index.tsx
View file

@ -6,7 +6,7 @@ import { useTheme } from "next-themes";
export default function ThemeToggle() { export default function ThemeToggle() {
const [isSpinning, setIsSpinning] = useState<boolean>(false); const [isSpinning, setIsSpinning] = useState<boolean>(false);
const { theme, setTheme } = useTheme(); const { setTheme, resolvedTheme } = useTheme();
const [mounted, setMounted] = useState<boolean>(false); const [mounted, setMounted] = useState<boolean>(false);
useEffect(() => { useEffect(() => {
@ -19,7 +19,7 @@ export default function ThemeToggle() {
setIsSpinning(true); setIsSpinning(true);
setTimeout(() => setIsSpinning(false), 500); setTimeout(() => setIsSpinning(false), 500);
setTheme(theme === "dark" ? "light" : "dark"); setTheme(resolvedTheme === "dark" ? "light" : "dark");
}; };
if (!mounted) { if (!mounted) {
@ -33,8 +33,8 @@ export default function ThemeToggle() {
className={`${isSpinning && "animate-[spin_0.5s_ease-out]"} `} className={`${isSpinning && "animate-[spin_0.5s_ease-out]"} `}
> >
<div className="duration-500 ease-in-out transition-all transform text-[#333] dark:text-white hover:scale-125"> <div className="duration-500 ease-in-out transition-all transform text-[#333] dark:text-white hover:scale-125">
{theme === "dark" && <Moon />} {resolvedTheme === "dark" && <Moon />}
{theme === "light" && <Sun />} {resolvedTheme === "light" && <Sun />}
</div> </div>
</div> </div>
); );