# Theme Toggle Icon

> Compact sun/moon theme toggle for narrow chrome.

A shadcn/ui block from the [@atroui](https://www.atroui.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/atroui/theme-toggle-icon).

- Page, with a live preview: https://shadcn.exchange/r/atroui/theme-toggle-icon
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/atroui/theme-toggle-icon-light-daead32adac8c767.png
- Registry item: https://www.atroui.com/r/theme-toggle-icon.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.atroui.com/r/theme-toggle-icon.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`, `next-themes`
- Registry items: `@atroui/utils`

## Files

### `registry/default/blocks/theme-toggle-icon.tsx`

```tsx
"use client"

import * as React from "react"
import { useTheme } from "next-themes"
import { Moon, Sun } from "lucide-react"

import { cn } from "@/lib/utils"

/**
 * Simple sun/moon theme toggle for narrow personal chrome.
 */
export function ThemeToggleIcon({ className }: { className?: string }) {
  const { resolvedTheme, setTheme } = useTheme()
  const [mounted, setMounted] = React.useState(false)
  React.useEffect(() => setMounted(true), [])

  const isDark = mounted && resolvedTheme === "dark"
  const next = isDark ? "light" : "dark"
  const label = `Switch to ${next} mode`

  return (
    <button
      type="button"
      aria-label={label}
      title={label}
      onClick={() => setTheme(next)}
      className={cn(
        "inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
        className
      )}
    >
      {!mounted ? (
        <Sun className="h-[13px] w-[13px] opacity-0" aria-hidden />
      ) : isDark ? (
        <Sun className="h-[13px] w-[13px]" aria-hidden />
      ) : (
        <Moon className="h-[13px] w-[13px]" aria-hidden />
      )}
    </button>
  )
}
```