From 17d43fab79a7aaecc0d7c267c83cdda950805581 Mon Sep 17 00:00:00 2001
From: Ryan Johnson <ryan.johnson.code@gmail.com>
Date: Fri, 15 May 2026 03:31:58 -0500
Subject: [PATCH] feat(cli): add mode-toggle as installable UI component

Promote the docs site theme switcher to a first-class registry entry so
`solidui-cli add mode-toggle` pulls button and dropdown-menu deps and
installs light/dark/system switching without copy-paste from examples.

Uses lucide-solid icons (already credited in NOTICE). Update dark-mode
docs to reference the single add command.

Maintainers: run `pnpm build:registry` in apps/docs before release.
Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/docs/src/components/mode-toggle.tsx      | 39 +------------------
 .../docs/src/registry/example/mode-toggle.tsx | 39 +------------------
 apps/docs/src/registry/registry-ui.ts         | 12 ++++++
 apps/docs/src/registry/ui/mode-toggle.tsx     | 38 ++++++++++++++++++
 .../(app)/docs/dark-mode/solid-start.mdx      | 12 +++---
 .../src/routes/(app)/docs/dark-mode/vite.mdx  | 12 +++---
 6 files changed, 66 insertions(+), 86 deletions(-)
 create mode 100644 apps/docs/src/registry/ui/mode-toggle.tsx

diff --git a/apps/docs/src/components/mode-toggle.tsx b/apps/docs/src/components/mode-toggle.tsx
index 6b4cbe33..072f3fb1 100644
--- a/apps/docs/src/components/mode-toggle.tsx
+++ b/apps/docs/src/components/mode-toggle.tsx
@@ -1,38 +1 @@
-import { useColorMode } from "@kobalte/core"
-
-import { IconLaptop, IconMoon, IconSun } from "~/components/icons"
-import { Button } from "~/registry/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger
-} from "~/registry/ui/dropdown-menu"
-
-export function ModeToggle() {
-  const { setColorMode } = useColorMode()
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger as={Button<"button">} variant="ghost" size="sm" class="w-9 px-0">
-        <IconSun class="size-6 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-        <IconMoon class="absolute size-6 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-        <span class="sr-only">Toggle theme</span>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuItem onSelect={() => setColorMode("light")}>
-          <IconSun class="mr-2 size-4" />
-          <span>Light</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem onSelect={() => setColorMode("dark")}>
-          <IconMoon class="mr-2 size-4" />
-          <span>Dark</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem onSelect={() => setColorMode("system")}>
-          <IconLaptop class="mr-2 size-4" />
-          <span>System</span>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
+export { ModeToggle } from "~/registry/ui/mode-toggle"
diff --git a/apps/docs/src/registry/example/mode-toggle.tsx b/apps/docs/src/registry/example/mode-toggle.tsx
index 6bb6ebe4..7911f924 100644
--- a/apps/docs/src/registry/example/mode-toggle.tsx
+++ b/apps/docs/src/registry/example/mode-toggle.tsx
@@ -1,38 +1 @@
-import { useColorMode } from "@kobalte/core"
-
-import { IconLaptop, IconMoon, IconSun } from "~/components/icons"
-import { Button } from "~/registry/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger
-} from "~/registry/ui/dropdown-menu"
-
-export default function ModeToggle() {
-  const { setColorMode } = useColorMode()
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger as={Button<"button">} variant="ghost" size="sm" class="w-9 px-0">
-        <IconSun class="size-6 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-        <IconMoon class="absolute size-6 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-        <span class="sr-only">Toggle theme</span>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuItem onSelect={() => setColorMode("light")}>
-          <IconSun class="mr-2 size-4" />
-          <span>Light</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem onSelect={() => setColorMode("dark")}>
-          <IconMoon class="mr-2 size-4" />
-          <span>Dark</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem onSelect={() => setColorMode("system")}>
-          <IconLaptop class="mr-2 size-4" />
-          <span>System</span>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
+export { ModeToggle as default } from "~/registry/ui/mode-toggle"
diff --git a/apps/docs/src/registry/registry-ui.ts b/apps/docs/src/registry/registry-ui.ts
index 0bcc7563..2f99e812 100644
--- a/apps/docs/src/registry/registry-ui.ts
+++ b/apps/docs/src/registry/registry-ui.ts
@@ -313,6 +313,18 @@ export const ui: Registry = [
       }
     ]
   },
+  {
+    name: "mode-toggle",
+    type: "ui",
+    dependencies: ["@kobalte/core", "lucide-solid"],
+    registryDependencies: ["button", "dropdown-menu"],
+    files: [
+      {
+        path: "ui/mode-toggle.tsx",
+        type: "ui"
+      }
+    ]
+  },
   {
     name: "navigation-menu",
     type: "ui",
diff --git a/apps/docs/src/registry/ui/mode-toggle.tsx b/apps/docs/src/registry/ui/mode-toggle.tsx
new file mode 100644
index 00000000..d5538ce7
--- /dev/null
+++ b/apps/docs/src/registry/ui/mode-toggle.tsx
@@ -0,0 +1,38 @@
+import { useColorMode } from "@kobalte/core"
+import { Laptop, Moon, Sun } from "lucide-solid"
+
+import { Button } from "~/registry/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "~/registry/ui/dropdown-menu"
+
+export function ModeToggle() {
+  const { setColorMode } = useColorMode()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger as={Button<"button">} variant="ghost" size="sm" class="w-9 px-0">
+        <Sun class="size-6 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+        <Moon class="absolute size-6 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+        <span class="sr-only">Toggle theme</span>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem onSelect={() => setColorMode("light")}>
+          <Sun class="mr-2 size-4" />
+          <span>Light</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onSelect={() => setColorMode("dark")}>
+          <Moon class="mr-2 size-4" />
+          <span>Dark</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onSelect={() => setColorMode("system")}>
+          <Laptop class="mr-2 size-4" />
+          <span>System</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/docs/src/routes/(app)/docs/dark-mode/solid-start.mdx b/apps/docs/src/routes/(app)/docs/dark-mode/solid-start.mdx
index f3cfc177..0c16f6e4 100644
--- a/apps/docs/src/routes/(app)/docs/dark-mode/solid-start.mdx
+++ b/apps/docs/src/routes/(app)/docs/dark-mode/solid-start.mdx
@@ -46,17 +46,19 @@ export default function App() {
 }
 ```
 
-### Add needed components
+### Add a mode toggle
 
-Make sure you have the `button` and `dropdown-menu` components installed.
+Install the mode toggle (pulls in `button` and `dropdown-menu` automatically) and place it in your layout.
 
 ```bash
-npx solidui-cli@latest add button dropdown-menu
+npx solidui-cli@latest add mode-toggle
 ```
 
-### Add a mode toggle
+```tsx
+import { ModeToggle } from "~/components/ui/mode-toggle"
+```
 
-Place a mode toggle on your site to toggle between light and dark mode.
+Place a mode toggle on your site to toggle between light, dark, and system mode.
 
 <ComponentPreview name="mode-toggle" />
 
diff --git a/apps/docs/src/routes/(app)/docs/dark-mode/vite.mdx b/apps/docs/src/routes/(app)/docs/dark-mode/vite.mdx
index d36e99e2..92b76372 100644
--- a/apps/docs/src/routes/(app)/docs/dark-mode/vite.mdx
+++ b/apps/docs/src/routes/(app)/docs/dark-mode/vite.mdx
@@ -37,17 +37,19 @@ export default function App() {
 }
 ```
 
-### Add needed components
+### Add a mode toggle
 
-Make sure you have the `button` and `dropdown-menu` components installed.
+Install the mode toggle (pulls in `button` and `dropdown-menu` automatically) and place it in your layout.
 
 ```bash
-npx solidui-cli@latest add button dropdown-menu
+npx solidui-cli@latest add mode-toggle
 ```
 
-### Add a mode toggle
+```tsx
+import { ModeToggle } from "~/components/ui/mode-toggle"
+```
 
-Place a mode toggle on your site to toggle between light and dark mode.
+Place a mode toggle on your site to toggle between light, dark, and system mode.
 
 <ComponentPreview name="mode-toggle" />