Docs
Theme Toggle Animations

Theme Toggle Animations

Animations when your theme Changes cool right ?

References

Read Docs to more

Installation

components/ui/theme-toggle-button.tsx

  npx shadcn@latest add "http://skiper-ui.com/registry/theme-toggle-button.json"

This will add 4 files to components/ui

wrap your rootLayout layout.tsx

import { ThemeProvider } from "@/components/ui/theme-provider"
 
export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <>
      <html lang="en" suppressHydrationWarning>
        <head />
        <body>
          <ThemeProvider
            attribute="class"
            defaultTheme="system"
            enableSystem
          >
            {children}
          </ThemeProvider>
        </body>
      </html>
    </>
  )
}

Use the toggle button anywhere

import ThemeToggleButton from "@components/ui/theme-toggle-button"
<ThemeToggleButton />

Props

PropDescriptionTypeDefault Value
variantSpecifies the variant type. E.g., 'circle', 'circle-blur' , 'gif'polygoncircle-blur
startSets the starting point (e.g., top left, center)stringtop-left
urlThe URL associated with the link only for gif variant.string""
showLabelonly for dev purpose to check the props setbooleanfalse

Here's the fun part

you can also add transparent gif's Find some Cool Gif's here

<ThemeToggleButton variant="gif" url="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMWI1ZmNvMGZyemhpN3VsdWp4azYzcWUxcXIzNGF0enp0eW1ybjF0ZyZlcD12MV9zdGlja2Vyc19zZWFyY2gmY3Q9cw/Fa6uUw8jgJHFVS6x1t/giphy.gif" />
<ThemeToggleButton variant="gif" url="https://media.giphy.com/media/ArfrRmFCzYXsC6etQX/giphy.gif?cid=ecf05e47kn81xmnuc9vd5g6p5xyjt14zzd3dzwso6iwgpvy3&ep=v1_stickers_search&rid=giphy.gif&ct=s"/>
InstallationAI Input