From 166c9ac876c3f8a279fafc97c383bb2c57d5641e Mon Sep 17 00:00:00 2001
From: Ategon <benjamin@barbeau.net>
Date: Sun, 19 Jan 2025 13:54:16 -0500
Subject: [PATCH] Handle system theme properly
---
src/components/theme-toggle/index.tsx | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/components/theme-toggle/index.tsx b/src/components/theme-toggle/index.tsx
index a2401ec..10933e5 100644
--- a/src/components/theme-toggle/index.tsx
+++ b/src/components/theme-toggle/index.tsx
@@ -6,7 +6,7 @@ import { useTheme } from "next-themes";
export default function ThemeToggle() {
const [isSpinning, setIsSpinning] = useState<boolean>(false);
- const { theme, setTheme } = useTheme();
+ const { setTheme, resolvedTheme } = useTheme();
const [mounted, setMounted] = useState<boolean>(false);
useEffect(() => {
@@ -19,7 +19,7 @@ export default function ThemeToggle() {
setIsSpinning(true);
setTimeout(() => setIsSpinning(false), 500);
- setTheme(theme === "dark" ? "light" : "dark");
+ setTheme(resolvedTheme === "dark" ? "light" : "dark");
};
if (!mounted) {
@@ -33,8 +33,8 @@ export default function ThemeToggle() {
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">
- {theme === "dark" && <Moon />}
- {theme === "light" && <Sun />}
+ {resolvedTheme === "dark" && <Moon />}
+ {resolvedTheme === "light" && <Sun />}
</div>
</div>
);