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 { useSyncExternalStore } from 'react'
import { useTheme } from 'next-themes'
import { Moon, Sun } from 'lucide-react'
import { Button } from '@/components/ui/button'

function useIsMounted() {
  return useSyncExternalStore(() => () => {}, () => true, () => false)
}

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

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

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