docs: add ModeToggle

docs/src/components/Header.astro

@@ -5,6 +5,7 @@ import { buttonVariants } from '@/registry/new-york/ui/button'
 import Navbar from './Navbar.astro'
 import MobileNavbar from './MobileNavbar.astro'
 import CommandMenu from './CommandMenu.astro'
+import ModeToggle from './ModeToggle.astro'
 
 const { pathname } = Astro.url
 ---
@@ -61,6 +62,6 @@ const { pathname } = Astro.url
         </a>
       </div>
     </div>
-    <!-- <ModeToggle /> -->
+    <ModeToggle />
   </div>
 </header>

docs/src/components/ModeToggle.astro

@@ -0,0 +1,60 @@
+---
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/new-york/ui/button'
+---
+
+<button
+  id="theme-toggle"
+  class={cn(
+    buttonVariants({
+      variant: 'ghost',
+    }),
+    'group/toggle h-8 w-8 px-0',
+  )}
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-sun hidden dark:block h-4 w-4"
+  >
+    <circle cx="12" cy="12" r="4"></circle>
+    <path d="M12 2v2"></path><path d="M12 20v2"></path>
+    <path d="m4.93 4.93 1.41 1.41"></path>
+    <path d="m17.66 17.66 1.41 1.41"></path>
+    <path d="M2 12h2"></path>
+    <path d="M20 12h2"></path>
+    <path d="m6.34 17.66-1.41 1.41"></path>
+    <path d="m19.07 4.93-1.41 1.41"></path>
+  </svg>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-moon dark:hidden block h-4 w-4"
+  >
+    <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
+  </svg>
+  <span class="sr-only">Toggle theme</span>
+</button>
+
+<script>
+  const themeToggle = document.getElementById('theme-toggle')!
+  const html = document.documentElement
+
+  themeToggle.addEventListener('click', () => {
+    html.classList.toggle('dark')
+  })
+</script>