) } `,__src__:"registry/new-york/examples/prodkt-mode-toggle-demo.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { ProdktModeToggle } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/prodkt/prodkt-mode-toggle"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" ProdktModeToggleDemo"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"ProdktModeToggle"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { ProdktModeToggle } from "@/components/prodkt/prodkt-mode-toggle" export function ProdktModeToggleDemo() { return (

) } `,__src__:"registry/default/examples/prodkt-mode-toggle-demo.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { ProdktModeToggle } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/prodkt/prodkt-mode-toggle"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" ProdktModeToggleDemo"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"ProdktModeToggle"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),` `,(0,n.jsxs)(e.h2,{id:"installation",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsxs)(p,{defaultValue:"cli",children:[(0,n.jsxs)(h,{children:[(0,n.jsx)(d,{value:"cli",children:"CLI"}),(0,n.jsx)(d,{value:"manual",children:"Manual"})]}),(0,n.jsx)(t,{value:"cli",children:(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx sparkstack@latest add prodkt-mode-toggle `,__npmCommand__:`npx sparkstack@latest add prodkt-mode-toggle `,__yarnCommand__:`npx sparkstack@latest add prodkt-mode-toggle `,__pnpmCommand__:`pnpm dlx sparkstack@latest add prodkt-mode-toggle `,__bunCommand__:`bunx --bun sparkstack@latest add prodkt-mode-toggle `,children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"npx"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" sparkstack@latest"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" add"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" prodkt-mode-toggle"})]})})})})}),(0,n.jsx)(t,{value:"manual",children:(0,n.jsxs)(i,{children:[(0,n.jsx)(r,{children:"Install the following dependencies:"}),(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install react-use `,__npmCommand__:`npm install react-use `,__yarnCommand__:`yarn add react-use `,__pnpmCommand__:`pnpm add react-use `,__bunCommand__:`bun add react-use `,children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"npm"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" install"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" react-use"})]})})})}),(0,n.jsx)(r,{children:"Copy and paste the following code into your project."}),(0,n.jsxs)(o,{name:"prodkt-mode-toggle",children:[(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import * as React from "react" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" export function ProdktModeToggle() { const { theme, setTheme } = useTheme() const updateTheme = (newTheme: string) => { setTheme(newTheme) if (typeof window !== "undefined") { // Update localStorage localStorage.setItem("theme", newTheme) // Update cookie document.cookie = \`data-theme=\${newTheme};path=/;max-age=31536000\` // Update data-theme attribute document.documentElement.setAttribute("data-theme", newTheme) // Update classes if (newTheme === "dark") { document.documentElement.classList.add("dark") document.documentElement.classList.remove("light") } else { document.documentElement.classList.remove("dark") document.documentElement.classList.add("light") } } } return (

updateTheme("light")}> Light updateTheme("dark")}> Dark updateTheme("system")}> System ) } `,__src__:"registry/new-york/prodkt/prodkt-mode-toggle.tsx",__style__:"new-york",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"use client"'})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" *"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" as"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Moon, Sun } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "lucide-react"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { useTheme } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "next-themes"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Button } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/button"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" DropdownMenu,"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" DropdownMenuContent,"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" DropdownMenuItem,"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" DropdownMenuTrigger,"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"} "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/dropdown-menu"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" ProdktModeToggle"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"theme"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"setTheme"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useTheme"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" updateTheme"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"newTheme"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" setTheme"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(newTheme)"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"typeof"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"!=="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "undefined"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" // Update localStorage"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" localStorage."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"setItem"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"theme"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", newTheme)"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" // Update cookie"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" document.cookie "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" `data-theme=${"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"newTheme"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"};path=/;max-age=31536000`"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" // Update data-theme attribute"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" document.documentElement."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"setAttribute"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"data-theme"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", newTheme)"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" // Update classes"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" (newTheme "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "dark"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" document.documentElement.classList."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"add"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"dark"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" document.documentElement.classList."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"remove"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"light"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"else"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" document.documentElement.classList."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"remove"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"dark"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" document.documentElement.classList."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"add"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"light"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"DropdownMenu"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"rounded-full focus-visible:rounded-full [&_button]:rounded-full [&_button]:focus-visible:rounded-full"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuTrigger"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"rounded-full [&_button]:rounded-full [&_button]:focus-visible:rounded-full"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" asChild"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Button"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" variant"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"ghost"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" size"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"icon"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"sparkstack-border rounded-full focus-visible:rounded-full"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Sun"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Moon"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"sr-only"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Toggle theme"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuContent"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" align"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"end"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuItem"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" onClick"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" updateTheme"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"light"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")}>"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Light"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuItem"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" onClick"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" updateTheme"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"dark"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")}>"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Dark"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuItem"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" onClick"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" updateTheme"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"system"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")}>"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" System"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import * as React from "react" import { Moon, Sun } from "lucide-react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" export function ProdktModeToggle() { const [theme, setThemeState] = React.useState<"light" | "dark" | "system">( () => { if (typeof window === "undefined") return "system" return ( (localStorage.getItem("theme") as "light" | "dark" | "system") || "system" ) } ) const getEffectiveTheme = (newTheme: "light" | "dark" | "system") => { if (newTheme === "system") { return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" } return newTheme } const updateTheme = (newTheme: "light" | "dark" | "system") => { if (typeof window !== "undefined") { const effectiveTheme = getEffectiveTheme(newTheme) // Update state and storage setThemeState(newTheme) localStorage.setItem("theme", newTheme) // Update DOM document.documentElement.classList.remove("light", "dark") document.documentElement.classList.add(effectiveTheme) document.documentElement.setAttribute("data-theme", effectiveTheme) } } // Listen for system theme changes React.useEffect(() => { if (theme === "system") { const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)") const handleChange = () => { const effectiveTheme = getEffectiveTheme("system") document.documentElement.classList.remove("light", "dark") document.documentElement.classList.add(effectiveTheme) document.documentElement.setAttribute("data-theme", effectiveTheme) } mediaQuery.addEventListener("change", handleChange) return () => mediaQuery.removeEventListener("change", handleChange) } }, [theme]) return (

updateTheme("light")}> Light updateTheme("dark")}> Dark updateTheme("system")}> System ) } `,__src__:"registry/default/prodkt/prodkt-mode-toggle.tsx",__style__:"default",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"use client"'})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" *"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" as"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Moon, Sun } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "lucide-react"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Button } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/button"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" DropdownMenu,"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" DropdownMenuContent,"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" DropdownMenuItem,"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" DropdownMenuTrigger,"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"} "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/dropdown-menu"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" ProdktModeToggle"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"theme"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"setThemeState"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"useState"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"light"'}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "dark"'}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "system"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"typeof"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "undefined"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "system"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" (localStorage."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"getItem"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"theme"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"as"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "light"'}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "dark"'}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "system"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"||"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "system"'})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" getEffectiveTheme"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"newTheme"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "light"'}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "dark"'}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "system"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" (newTheme "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "system"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"matchMedia"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"(prefers-color-scheme: dark)"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:").matches"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ?"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "dark"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" :"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "light"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" newTheme"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" updateTheme"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"newTheme"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "light"'}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "dark"'}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "system"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"typeof"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"!=="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "undefined"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" effectiveTheme"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" getEffectiveTheme"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(newTheme)"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" // Update state and storage"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" setThemeState"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(newTheme)"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" localStorage."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"setItem"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"theme"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", newTheme)"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" // Update DOM"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" document.documentElement.classList."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"remove"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"light"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"dark"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" document.documentElement.classList."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"add"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(effectiveTheme)"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" document.documentElement."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"setAttribute"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"data-theme"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", effectiveTheme)"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" // Listen for system theme changes"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"useEffect"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" (theme "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "system"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" mediaQuery"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"matchMedia"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"(prefers-color-scheme: dark)"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" handleChange"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" effectiveTheme"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" getEffectiveTheme"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"system"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" document.documentElement.classList."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"remove"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"light"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"dark"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" document.documentElement.classList."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"add"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(effectiveTheme)"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" document.documentElement."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"setAttribute"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"data-theme"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", effectiveTheme)"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" mediaQuery."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"addEventListener"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"change"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", handleChange)"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" mediaQuery."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"removeEventListener"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"change"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", handleChange)"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, [theme])"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"DropdownMenu"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"rounded-full focus-visible:rounded-full [&_button]:rounded-full [&_button]:focus-visible:rounded-full"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuTrigger"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"rounded-full [&_button]:rounded-full [&_button]:focus-visible:rounded-full"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" asChild"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Button"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" variant"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"ghost"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" size"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"icon"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"sparkstack-border rounded-full focus-visible:rounded-full"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Sun"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Moon"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"sr-only"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Toggle theme"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuContent"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" align"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"end"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuItem"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" onClick"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" updateTheme"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"light"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")}>"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Light"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuItem"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" onClick"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" updateTheme"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"dark"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")}>"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Dark"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuItem"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" onClick"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" updateTheme"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"system"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")}>"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" System"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),(0,n.jsx)(r,{children:"Update the import paths to match your project setup."}),(0,n.jsxs)(r,{children:["Update ",(0,n.jsx)(e.code,{children:"tailwind.config.js"})]}),(0,n.jsxs)(e.p,{children:["Add the following animations to your ",(0,n.jsx)(e.code,{children:"tailwind.config.js"})," file:"]}),(0,n.jsxs)(e.div,{"data-rehype-pretty-code-fragment":"",children:[(0,n.jsx)(e.div,{"data-rehype-pretty-code-title":"","data-language":"js","data-theme":"default",children:"tailwind.config.js"}),(0,n.jsx)(e.pre,{"data-language":"js","data-theme":"default",__withMeta__:!0,__rawString__:`/** @type {import('tailwindcss').Config} */ module.exports = { theme: { extend: {}, }, } `,children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line line--highlighted",children:[(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:"/** "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"@type"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" {import('tailwindcss').Config}"}),(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" */"})]}),` `,(0,n.jsxs)(e.span,{className:"line line--highlighted",children:[(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"module"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"exports"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" theme: {"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" extend: {},"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})]})})]}),` `,(0,n.jsxs)(e.h2,{id:"usage",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { ProdktModeToggle } from "@/components/ui/prodkt-mode-toggle" `,children:(0,n.jsx)(e.code,{"data-language":"tsx","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { ProdktModeToggle } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/prodkt-mode-toggle"'})]})})})}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:` `,children:(0,n.jsx)(e.code,{"data-language":"tsx","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"ProdktModeToggle"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]})})})})]})}function u(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(F,{...l})}):F(l)}function c(l,e){throw new Error("Expected "+(e?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return T(D);})(); ;return Component;

Prodkt Mode Toggle

Installation

Usage