registry:component

Aavya Theme Toggle

v0.1.0beta

Persisted light/dark toggle backed by HTML class state.

Registry Endpoint

Open JSON

https://registry.aavya.com/r/aavya-theme-toggle.json

npx shadcn@latest add https://registry.aavya.com/r/aavya-theme-toggle.json

Live Preview

Toggle light/dark theme

Usage Snippet

import ThemeToggle from '@/components/layout/theme-toggle.tsx'

export default function Example() {
  return (
    <div className="p-6">
      <ThemeToggle />
    </div>
  )
}

Source Preview

'use client'

import { useTheme } from 'next-themes'
import { Moon, Sun } from 'lucide-react'
import { Button } from '@/components/ui/button'

export function ThemeToggle() {
  const { resolvedTheme, setTheme } = useTheme()

  const handleToggle = () => {
    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
  }

  const isDark = resolvedTheme === 'dark'

  return (
    <Button variant="ghost" size="icon" onClick={handleToggle}>
      {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
      <span className="sr-only">Toggle theme</span>
    </Button>
  )
}