How to use

import {
  ThemeToggleButton1,
  ThemeToggleButton2,
  ThemeToggleButton3,
  ThemeToggleButton4,
  ThemeToggleButton5,
} from "@/components/v1/skiper4";

const DemoSkiper4 = () => {
  return (
    <div className="flex items-center justify-center gap-4 p-8">
      <ThemeToggleButton1 className="h-12 w-12" />
      <ThemeToggleButton2 className="h-12 w-12" />
      <ThemeToggleButton3 className="h-12 w-12" />
      <ThemeToggleButton4 className="h-12 w-12" />
      <ThemeToggleButton5 className="h-12 w-12" />
    </div>
  );
};

important note

But the above are just animated icons you can't toggle theme with them if you want to toggle theme with animated useThemeToggle hook from skiper26 that will use view transition api to toggle theme like crazy.

Using useThemeToggle() hook

import { useThemeToggle } from "@/components/v1/skiper26";

const DemoSkiper4 = () => {
  const { isDark, toggleTheme } = useThemeToggle();

  return (
    <div
      onClick={toggleTheme}
      className="flex cursor-pointer items-center justify-center gap-4 p-8"
    >
      <button
        type="button"
        className={cn(
          isDark ? "bg-black text-white" : "bg-white text-black",
          className,
        )}
        onClick={() => setIsDark(!isDark)}
      >
        {
          // destrucure the button as you want here from skiper4 theme toggles and use isDark to toggle the theme or plat with svg
        }
      </button>
    </div>
  );
};

Attribution

• Learn more about useThemeToggle hook from skiper26
• Inspired by and adapted from toggles.dev (Open Source CSS Theme Toggles by Alfie Jones)