add swap animation to theme toggle

2023-03-06 15:50:41 +08:00
parent da1a556eea
commit f08623993f
1 changed files with 3 additions and 6 deletions
--- a/client/src/components/ThemeToggle.tsx
+++ b/client/src/components/ThemeToggle.tsx
@@ -27,13 +27,10 @@ export default function ThemeToggle() {
    <button
      type="button"
      onClick={() => changeTheme(darkTheme ? "light" : "dark")}
-      className="btn btn-ghost btn-circle"
+      className={"btn btn-ghost btn-circle swap swap-rotate" + (darkTheme ? " swap-active" : "")}
    >
-      {darkTheme ? (
-        <IconSun className="m-auto block h-full" />
-      ) : (
-        <IconMoon className="m-auto block h-full" />
-      )}
+      <IconSun className="swap-on m-auto block h-full" />
+      <IconMoon className="swap-off m-auto block h-full" />
    </button>
  );
 }