Theme Toggle

patchui/theme-toggle

FreeComponent

patchui publishes no description for this item.

Install it

npx shadcn@latest add https://ui.hotfix.jobs/r/theme-toggle.json

Source

registry/components/ui/theme-toggle.tsxui.hotfix.jobs/r/theme-toggle.json

1"use client";
2 
3import {
4  useCallback,
5  useEffect,
6  useState,
7  useSyncExternalStore,
8} from "react";
9import type * as React from "react";
10import { Button } from "@/components/ui/button";
11import { cn } from "@/lib/utils";
12 
13import { Moon, Sun } from "@phosphor-icons/react/dist/ssr";
14export type Theme = "light" | "dark" | "system";
15export type ResolvedTheme = "light" | "dark";
16 
17function getSystemTheme(): ResolvedTheme {
18  if (typeof window === "undefined") return "light";
19  return window.matchMedia("(prefers-color-scheme: dark)").matches
20    ? "dark"
21    : "light";
22}
23 
24function resolveTheme(theme: Theme): ResolvedTheme {
25  return theme === "system" ? getSystemTheme() : theme;
26}
27 
28const emptySubscribe = () => () => {};
29 
30function useMounted() {
31  return useSyncExternalStore(
32    emptySubscribe,
33    () => true,
34    () => false,
35  );
36}
37 
38function ThemeIcon({
39  isDark,
40  mounted,
41  className,
42}: {
43  isDark: boolean;
44  mounted: boolean;
45  className?: string;
46}): React.ReactElement {
47  if (!mounted) {
48    return <span className={cn("inline-block", className)} />;
49  }
50 
51  return (
52    <span
53      className={cn(
54        "relative inline-flex items-center justify-center overflow-hidden",
55        className,
56      )}
57    >
58      <span
59        className={cn(
60          "absolute inset-0 flex items-center justify-center transition-[opacity,transform] duration-[var(--duration-state)] ease-[var(--ease-standard)]",
61          isDark ? "scale-100 rotate-0 opacity-100" : "scale-0 rotate-90 opacity-0",
62        )}
63      >
64        <Sun className="size-full" aria-hidden />
65      </span>
66      <span
67        className={cn(
68          "absolute inset-0 flex items-center justify-center transition-[opacity,transform] duration-[var(--duration-state)] ease-[var(--ease-standard)]",
69          isDark ? "scale-0 -rotate-90 opacity-0" : "scale-100 rotate-0 opacity-100",
70        )}
71      >
72        <Moon className="size-full" aria-hidden />
73      </span>
74    </span>
75  );
76}
77 
78export interface ThemeToggleProps
79  extends Omit<React.ComponentProps<"button">, "children"> {
80  theme?: Theme;
81  onThemeChange?: (theme: ResolvedTheme) => void;
82  /** localStorage key for persisting the theme. Set to `false` to disable. */
83  storageKey?: string | false;
84  /** Whether to apply the `.dark` class to `<html>`. */
85  applyClass?: boolean;
86  size?: "sm" | "md" | "lg";
87}
88 
89const iconSizeBySize: Record<NonNullable<ThemeToggleProps["size"]>, string> = {
90  sm: "size-3.5",
91  md: "size-4",
92  lg: "size-5",
93};
94 
95// … truncated

What it pulls in

npm packages

@phosphor-icons/react

Other registry items

https://ui.hotfix.jobs/r/button.json
https://ui.hotfix.jobs/r/tokens.json
https://ui.hotfix.jobs/r/utils.json

Files it writes

registry/components/ui/theme-toggle.tsx

More from patchui

All 51 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Accordionaccordion	patchui	Components	Free	2 deps
Avataravatar	patchui	Components	Free	3 deps
Badgebadge	patchui	Components	Free	2 deps
Breadcrumbbreadcrumb	patchui	Components	Free	1 dep
Buttonbutton	patchui	Components	Free	2 deps
Calendarcalendar	patchui	Components	Free	1 dep
Cardcard	patchui	Components	Free	1 dep
Checkboxcheckbox	patchui	Components	Free	2 deps