74:T71dc,

"use client"
import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"
import * as React from "react"
import { Button } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"
import { domAnimation, LazyMotion } from "motion/react"
import * as m from "motion/react-m"
const noopSubscribe = () => () => {}
/** false during SSR and hydration, true once running in the browser */
function useMounted() {
  return React.useSyncExternalStore(
    noopSubscribe,
    () => true,
    () => false
  )
}
function isTypingTarget(target: EventTarget | null) {
  return (
    target instanceof HTMLInputElement ||
    target instanceof HTMLTextAreaElement ||
    target instanceof HTMLSelectElement ||
    (target instanceof HTMLElement && target.isContentEditable)
  )
}
export interface ThemeToggleProps {
  /** Show the current theme's name ("Light" or "Dark") beside the icon */
  showThemeName?: boolean
}
export function ThemeToggle({ showThemeName = false }: ThemeToggleProps) {
  const { resolvedTheme, setTheme } = useTheme()
  const mounted = useMounted()
  const isDark = mounted && resolvedTheme === "dark"
  const toggleTheme = React.useCallback(() => {
    setTheme(resolvedTheme === "dark" ? "light" : "dark")
  }, [resolvedTheme, setTheme])
  React.useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key !== "d" && e.key !== "D") return
      // Leave Cmd/Ctrl+D (bookmark) etc. and held keys alone
      if (e.metaKey || e.ctrlKey || e.altKey || e.repeat) return
      if (isTypingTarget(e.target)) return
      // Several toggles can be on one page; only the first one handles it
      if (e.defaultPrevented) return
      e.preventDefault()
      toggleTheme()
    }
    window.addEventListener("keydown", handleKeyDown)
    return () => window.removeEventListener("keydown", handleKeyDown)
  }, [toggleTheme])
  const label = `Switch to ${isDark ? "light" : "dark"} theme`
  return (
    // Hover and tap need only the light domAnimation features
    <LazyMotion features={domAnimation}>
      <Tooltip>
        <TooltipTrigger asChild>
          <m.div
            whileHover={{ scale: 1.05, transition: { duration: 0.2 } }}
            whileTap={{ scale: 0.95, transition: { duration: 0.2 } }}
            transition={{
              type: "spring" as const,
              stiffness: 400,
              damping: 17,
            }}
            className="flex items-center gap-2"
          >
            <Button
              variant="outline"
              size="icon"
              onClick={toggleTheme}
              aria-label={label}
              aria-keyshortcuts="D"
            >
              <Sun className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
              <Moon className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
            </Button>
            {showThemeName && (
              <button
                type="button"
                onClick={toggleTheme}
                tabIndex={-1}
                aria-hidden="true"
                className="cursor-pointer text-sm leading-none font-medium select-none"
              >
                {isDark ? "Light" : "Dark"} Mode
              </button>
            )}
          </m.div>
        </TooltipTrigger>
        <TooltipContent side="bottom" className="text-xs">
          <span className="flex items-center gap-2">
            Toggle theme
            <kbd className="pointer-events-none inline-flex h-5 items-center gap-1 rounded border border-muted-foreground/20 bg-muted/80 px-1.5 font-mono text-[10px] font-medium text-foreground opacity-100 select-none">
              <span className="text-xs">D</span>
            </kbd>
          </span>
        </TooltipContent>
      </Tooltip>
    </LazyMotion>
  )
}

75:T6fb0,

"use client";
import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";
import * as React from "react";
import { Button } from "@/components/ui/button";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { domAnimation, LazyMotion } from "motion/react";
import * as m from "motion/react-m";
const noopSubscribe = () => () => {};
/** false during SSR and hydration, true once running in the browser */
function useMounted() {
  return React.useSyncExternalStore(
    noopSubscribe,
    () => true,
    () => false,
  );
}
function isTypingTarget(target) {
  return (
    target instanceof HTMLInputElement ||
    target instanceof HTMLTextAreaElement ||
    target instanceof HTMLSelectElement ||
    (target instanceof HTMLElement && target.isContentEditable)
  );
}
export function ThemeToggle({ showThemeName = false }) {
  const { resolvedTheme, setTheme } = useTheme();
  const mounted = useMounted();
  const isDark = mounted && resolvedTheme === "dark";
  const toggleTheme = React.useCallback(() => {
    setTheme(resolvedTheme === "dark" ? "light" : "dark");
  }, [resolvedTheme, setTheme]);
  React.useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.key !== "d" && e.key !== "D") return;
      // Leave Cmd/Ctrl+D (bookmark) etc. and held keys alone
      if (e.metaKey || e.ctrlKey || e.altKey || e.repeat) return;
      if (isTypingTarget(e.target)) return;
      // Several toggles can be on one page; only the first one handles it
      if (e.defaultPrevented) return;
      e.preventDefault();
      toggleTheme();
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [toggleTheme]);
  const label = `Switch to ${isDark ? "light" : "dark"} theme`;
  return (
    // Hover and tap need only the light domAnimation features
    <LazyMotion features={domAnimation}>
      <Tooltip>
        <TooltipTrigger asChild>
          <m.div
            whileHover={{ scale: 1.05, transition: { duration: 0.2 } }}
            whileTap={{ scale: 0.95, transition: { duration: 0.2 } }}
            transition={{
              type: "spring",
              stiffness: 400,
              damping: 17,
            }}
            className="flex items-center gap-2"
          >
            <Button
              variant="outline"
              size="icon"
              onClick={toggleTheme}
              aria-label={label}
              aria-keyshortcuts="D"
            >
              <Sun className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
              <Moon className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
            </Button>
            {showThemeName && (
              <button
                type="button"
                onClick={toggleTheme}
                tabIndex={-1}
                aria-hidden="true"
                className="cursor-pointer text-sm leading-none font-medium select-none"
              >
                {isDark ? "Light" : "Dark"} Mode
              </button>
            )}
          </m.div>
        </TooltipTrigger>
        <TooltipContent side="bottom" className="text-xs">
          <span className="flex items-center gap-2">
            Toggle theme
            <kbd className="pointer-events-none inline-flex h-5 items-center gap-1 rounded border border-muted-foreground/20 bg-muted/80 px-1.5 font-mono text-[10px] font-medium text-foreground opacity-100 select-none">
              <span className="text-xs">D</span>
            </kbd>
          </span>
        </TooltipContent>
      </Tooltip>
    </LazyMotion>
  );
}

76:Tf4a,"use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import * as React from "react" import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip" import { domAnimation, LazyMotion } from "motion/react" import * as m from "motion/react-m" const noopSubscribe = () => () => {} /** false during SSR and hydration, true once running in the browser */ function useMounted() { return React.useSyncExternalStore( noopSubscribe, () => true, () => false ) } function isTypingTarget(target: EventTarget | null) { return ( target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement || (target instanceof HTMLElement && target.isContentEditable) ) } export interface ThemeToggleProps { /** Show the current theme's name ("Light" or "Dark") beside the icon */ showThemeName?: boolean } export function ThemeToggle({ showThemeName = false }: ThemeToggleProps) { const { resolvedTheme, setTheme } = useTheme() const mounted = useMounted() const isDark = mounted && resolvedTheme === "dark" const toggleTheme = React.useCallback(() => { setTheme(resolvedTheme === "dark" ? "light" : "dark") }, [resolvedTheme, setTheme]) React.useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.key !== "d" && e.key !== "D") return // Leave Cmd/Ctrl+D (bookmark) etc. and held keys alone if (e.metaKey || e.ctrlKey || e.altKey || e.repeat) return if (isTypingTarget(e.target)) return // Several toggles can be on one page; only the first one handles it if (e.defaultPrevented) return e.preventDefault() toggleTheme() } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [toggleTheme]) const label = `Switch to ${isDark ? "light" : "dark"} theme` return ( // Hover and tap need only the light domAnimation features {showThemeName && ( )} Toggle theme D ) }77:Te9f,"use client"; import { Moon, Sun } from "lucide-react"; import { useTheme } from "next-themes"; import * as React from "react"; import { Button } from "@/components/ui/button"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import { domAnimation, LazyMotion } from "motion/react"; import * as m from "motion/react-m"; const noopSubscribe = () => () => {}; /** false during SSR and hydration, true once running in the browser */ function useMounted() { return React.useSyncExternalStore( noopSubscribe, () => true, () => false, ); } function isTypingTarget(target) { return ( target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement || (target instanceof HTMLElement && target.isContentEditable) ); } export function ThemeToggle({ showThemeName = false }) { const { resolvedTheme, setTheme } = useTheme(); const mounted = useMounted(); const isDark = mounted && resolvedTheme === "dark"; const toggleTheme = React.useCallback(() => { setTheme(resolvedTheme === "dark" ? "light" : "dark"); }, [resolvedTheme, setTheme]); React.useEffect(() => { const handleKeyDown = (e) => { if (e.key !== "d" && e.key !== "D") return; // Leave Cmd/Ctrl+D (bookmark) etc. and held keys alone if (e.metaKey || e.ctrlKey || e.altKey || e.repeat) return; if (isTypingTarget(e.target)) return; // Several toggles can be on one page; only the first one handles it if (e.defaultPrevented) return; e.preventDefault(); toggleTheme(); }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, [toggleTheme]); const label = `Switch to ${isDark ? "light" : "dark"} theme`; return ( // Hover and tap need only the light domAnimation features {showThemeName && ( )} Toggle theme D ); } 73:["$","$L6e",null,{"tsHtml":"$74","jsHtml":"$75","tsCode":"$76","jsCode":"$77","expandable":true,"wrapLines":false,"showLineNumbers":true,"minLines":8,"lineCountTs":105,"lineCountJs":102,"hasVariants":true}]

Theme Toggle

Installation

Other Examples

With Theme Name

Props