{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "theme-switch", "title": "Theme Switch", "type": "registry:ui", "files": [ { "path": "packages/registry-angular/components/theme-switch/theme-switch.component.ts", "content": "import {\n Component,\n EventEmitter,\n HostListener,\n Input,\n Output,\n booleanAttribute,\n ChangeDetectionStrategy,\n} from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport { UiSectionCardComponent } from '@/ui/section-card'\n\nexport type Theme = 'light' | 'dark' | 'system' | 'black'\nexport type ThemeSwitchVariant = 'cards' | 'icons' | 'icon-only' | 'dropdown' | 'pill' | 'pill-4' | 'switch'\n\nconst VARIANT_OPTIONS: Record = {\n cards: ['light', 'dark', 'system'],\n icons: ['light', 'dark', 'system'],\n 'icon-only': ['light', 'dark'],\n dropdown: ['light', 'dark', 'system'],\n pill: ['light', 'dark', 'system'],\n 'pill-4': ['system', 'light', 'dark', 'black'],\n switch: ['light', 'dark'],\n}\n\ntype ViewTransitionDocument = Document & {\n startViewTransition?: (callback: () => unknown) => { finished: Promise }\n}\n\nlet revealing = false\n\nasync function withThemeReveal(enabled: boolean, event: MouseEvent | undefined, swap: () => void): Promise {\n if (typeof document === 'undefined') {\n swap()\n return\n }\n const startViewTransition = (document as ViewTransitionDocument).startViewTransition?.bind(document)\n const reduceMotion = typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches\n if (!enabled || !startViewTransition || reduceMotion) {\n swap()\n return\n }\n if (revealing) return\n revealing = true\n\n const root = document.documentElement\n const x = event?.clientX ?? window.innerWidth / 2\n const y = event?.clientY ?? window.innerHeight / 2\n const radius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y))\n root.style.setProperty('--uipkge-theme-x', `${x}px`)\n root.style.setProperty('--uipkge-theme-y', `${y}px`)\n root.style.setProperty('--uipkge-theme-r', `${radius}px`)\n root.setAttribute('data-uipkge-theme-reveal', '')\n\n try {\n await startViewTransition(swap).finished\n } finally {\n root.removeAttribute('data-uipkge-theme-reveal')\n revealing = false\n }\n}\n\n/**\n * Angular port of UIPKGE ThemeSwitch — light/dark/system toggle persisted to\n * localStorage. Same seven visual variants as Vue; theme swap runs inside a\n * View Transition wipe when enabled and supported.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-theme-switch, [ui-theme-switch]',\n standalone: true,\n imports: [UiSectionCardComponent],\n host: {\n '[attr.data-slot]': '\"theme-switch\"',\n '[attr.data-uipkge]': '\"\"',\n '[attr.data-variant]': 'variant',\n '[attr.data-theme]': 'currentValue',\n '[class]': 'hostClass',\n },\n template: `\n @switch (variant) {\n @case ('cards') {\n \n \n \n \n \n \n \n \n
\n @for (t of options(); track t) {\n \n @switch (t) {\n @case ('light') {\n \n \n \n \n \n \n \n \n \n \n \n }\n @case ('dark') {\n \n \n \n }\n @case ('system') {\n \n \n \n \n \n }\n }\n

{{ labels[t] }}

\n \n }\n
\n \n }\n\n @case ('icons') {\n \n @for (t of options(); track t) {\n \n @switch (t) {\n @case ('light') {\n \n \n \n \n \n \n \n \n \n \n \n }\n @case ('dark') {\n \n \n \n }\n @case ('system') {\n \n \n \n \n \n }\n }\n \n }\n \n }\n\n @case ('icon-only') {\n \n @switch (currentValue) {\n @case ('light') {\n \n \n \n \n \n \n \n \n \n \n \n }\n @case ('dark') {\n \n \n \n }\n @default {\n \n \n \n \n \n }\n }\n \n }\n\n @case ('dropdown') {\n
\n \n @switch (currentValue) {\n @case ('light') {\n \n \n \n \n \n \n \n \n \n \n \n }\n @case ('dark') {\n \n \n \n }\n @default {\n \n \n \n \n \n }\n }\n {{ labels[currentValue] }}\n \n \n \n \n @if (dropdownOpen) {\n \n @for (t of options(); track t) {\n \n \n @switch (t) {\n @case ('light') {\n \n \n \n \n \n \n \n \n \n \n \n }\n @case ('dark') {\n \n \n \n }\n @case ('system') {\n \n \n \n \n \n }\n }\n \n {{ labels[t] }}\n \n }\n
\n }\n \n }\n\n @case ('pill') {\n \n \n @for (t of options(); track t) {\n \n @switch (t) {\n @case ('light') {\n \n \n \n \n \n \n \n \n \n \n \n }\n @case ('dark') {\n \n \n \n }\n @case ('system') {\n \n \n \n \n \n }\n }\n {{ labels[t] }}\n \n }\n \n }\n\n @case ('pill-4') {\n \n \n @for (t of options(); track t) {\n \n @switch (t) {\n @case ('light') {\n \n \n \n \n \n \n \n \n \n \n \n }\n @case ('dark') {\n \n \n \n }\n @case ('system') {\n \n \n \n \n \n }\n @case ('black') {\n \n \n \n \n \n \n \n }\n }\n {{ labels[t] }}\n \n }\n \n }\n\n @case ('switch') {\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n }\n }\n `,\n})\nexport class UiThemeSwitchComponent {\n // Last click seen bubbling through this component's host. The document listener runs later in\n // the same bubble phase, so a matching event originated inside and must not close the dropdown.\n // This avoids injecting ElementRef, whose constructor DI metadata broke JIT/TestBed instantiation\n // (NG0202), and keeps the class `new`-able without an injection context.\n private lastInsideEvent: Event | null = null\n\n @HostListener('click', ['$event'])\n onHostClick(event: Event): void {\n this.lastInsideEvent = event\n }\n\n /** Radix Menu parity: clicking anywhere outside the open dropdown closes it. */\n @HostListener('document:click', ['$event'])\n onDocumentClick(event: Event): void {\n if (event === this.lastInsideEvent) {\n this.lastInsideEvent = null\n return\n }\n if (this.dropdownOpen) {\n this.dropdownOpen = false\n }\n }\n\n @Input() value?: Theme\n @Input() modelValue: Theme = 'system'\n @Input() variant: ThemeSwitchVariant = 'cards'\n @Input() title?: string\n @Input() description?: string\n @Input({ transform: booleanAttribute }) viewTransition = true\n @Input('class') className?: string\n @Output() valueChange = new EventEmitter()\n @Output() modelValueChange = new EventEmitter()\n\n dropdownOpen = false\n\n readonly labels: Record = {\n light: 'Light',\n dark: 'Dark',\n system: 'System',\n black: 'Black',\n }\n\n get currentValue(): Theme {\n return this.value ?? this.modelValue\n }\n\n get hostClass(): string {\n if (this.variant === 'cards') return cn('block w-full', this.className)\n if (this.variant === 'pill' || this.variant === 'pill-4') return cn('inline-flex w-full', this.className)\n if (this.variant === 'switch') return cn('contents', this.className)\n return cn('inline-flex items-center', this.className)\n }\n\n options(): Theme[] {\n return VARIANT_OPTIONS[this.variant]\n }\n\n activeIndex(): number {\n const i = this.options().indexOf(this.currentValue)\n return i === -1 ? 0 : i\n }\n\n indicatorStyle(): Record {\n const n = this.options().length\n return {\n width: `calc((100% - 4px) / ${n})`,\n transform: `translateX(calc(${this.activeIndex()} * 100%))`,\n }\n }\n\n switchThumbStyle(): Record {\n return { transform: `translateX(${this.currentValue === 'dark' ? '36px' : '4px'})` }\n }\n\n select(theme: Theme, event?: MouseEvent): void {\n void withThemeReveal(this.viewTransition, event, () => {\n this.modelValue = theme\n this.value = theme\n this.modelValueChange.emit(theme)\n this.valueChange.emit(theme)\n })\n }\n\n cycle(event?: MouseEvent): void {\n const opts = this.options()\n const next = opts[(this.activeIndex() + 1) % opts.length]\n if (next) this.select(next, event)\n }\n\n resolve(systemDark: boolean): 'light' | 'dark' {\n if (this.currentValue === 'system') return systemDark ? 'dark' : 'light'\n return this.currentValue === 'dark' ? 'dark' : 'light'\n }\n}\n", "type": "registry:ui", "target": "~/src/app/components/ui/theme-switch/theme-switch.component.ts" }, { "path": "packages/registry-angular/components/theme-switch/index.ts", "content": "export { UiThemeSwitchComponent, type Theme, type ThemeSwitchVariant } from './theme-switch.component'\n", "type": "registry:ui", "target": "~/src/app/components/ui/theme-switch/index.ts" } ], "dependencies": [], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/section-card.json" ], "description": "Light / dark / system theme toggle — drop in the header. Seven visual variants: cards, icons, icon-only, dropdown, pill, pill-4, and switch. Persists to localStorage and respects prefers-color-scheme for system.", "categories": [ "action" ] }