create-z3 0.0.28 → 0.0.29

package/dist/index.js

@@ -2618,17 +2618,18 @@ program.name("create-z3").version(packageJson.version).description("CLI for scaf
       console.log(chalk2.yellow("   Your app will have no user authentication."));
       console.log();
     }
+    console.log();
+    console.log(chalk2.dim("\u{1F4A1} TweakCN themes: Visit https://tweakcn.com/themes/[theme-id]"));
+    console.log(chalk2.dim('   Click "Code" button, copy the CSS, then paste in the editor.'));
     const applyTheme = await confirm({
-      message: "Apply a custom TweakCN theme?",
+      message: "Apply a custom TweakCN theme? (will open your text editor)",
       default: false
     });
     let tweakcnTheme;
     if (applyTheme) {
       console.log();
-      console.log(chalk2.cyan("\u{1F4DD} Opening editor for theme CSS..."));
-      console.log(chalk2.dim('\u{1F4A1} Tip: Visit a TweakCN theme, click the "Code" button, copy the CSS.'));
-      console.log(chalk2.dim("   Paste it in the editor, save and close to continue."));
-      console.log(chalk2.dim("   Example: https://tweakcn.com/themes/[theme-id]"));
+      console.log(chalk2.cyan("\u{1F4DD} Opening your text editor..."));
+      console.log(chalk2.dim("   Paste the CSS, save, and close the editor to continue."));
       console.log();
       const tweakcnThemeInput = await editor({
         message: "Enter TweakCN theme CSS:",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-z3",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "type": "module",
   "description": "CLI for scaffolding Z3 Stack applications (TanStack/Next.js + Convex + Better Auth)",
   "bin": {

package/templates/nextjs/package.json

@@ -26,6 +26,7 @@
     "convex-helpers": "^0.1.111",
     "lucide-react": "^0.562.0",
     "next": "16.1.2",
+    "next-themes": "^0.4.6",
     "nuqs": "^2.8.6",
     "react": "19.2.3",
     "react-dom": "19.2.3",

package/templates/nextjs/src/components/component-example.tsx

@@ -66,10 +66,12 @@ import {
 } from "~/components/ui/select"
 import { Textarea } from "~/components/ui/textarea"
 import { PlusIcon, BluetoothIcon, MoreVerticalIcon, FileIcon, FolderIcon, FolderOpenIcon, FileCodeIcon, MoreHorizontalIcon, FolderSearchIcon, SaveIcon, DownloadIcon, EyeIcon, LayoutIcon, PaletteIcon, SunIcon, MoonIcon, MonitorIcon, UserIcon, CreditCardIcon, SettingsIcon, KeyboardIcon, LanguagesIcon, BellIcon, MailIcon, ShieldIcon, HelpCircleIcon, FileTextIcon, LogOutIcon } from "lucide-react"
+import { ThemeToggle } from "~/components/ui/theme-toggle"
 
 export function ComponentExample() {
   return (
     <ExampleWrapper>
+      <ThemeToggle className="absolute top-10 right-10" />
       <CardExample />
       <FormExample />
     </ExampleWrapper>

package/templates/nextjs/src/components/providers/server.tsx

@@ -1,14 +1,20 @@
 import { NuqsAdapter } from "nuqs/adapters/next/app"
-import { type PropsWithChildren } from "react";
+import { type PropsWithChildren } from "react"
 
-import ConvexClientProvider from "./convex";
+import ConvexClientProvider from "./convex"
+import { ThemeProvider } from "./theme"
 
 export default function ServerProviders({ children }: PropsWithChildren) {
-	return (
-		<ConvexClientProvider>
-			<NuqsAdapter>
-				{children}
-			</NuqsAdapter>
-		</ConvexClientProvider>
-	)
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      disableTransitionOnChange
+      enableSystem
+    >
+      <ConvexClientProvider>
+        <NuqsAdapter>{children}</NuqsAdapter>
+      </ConvexClientProvider>
+    </ThemeProvider>
+  )
 }

package/templates/nextjs/src/components/providers/theme.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import * as React from "react"
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

package/templates/nextjs/src/components/ui/theme-toggle.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { type ComponentPropsWithRef } from "react";
+
+import { Button } from "~/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger
+} from "~/components/ui/dropdown-menu";
+
+export function ThemeToggle({ ...divProps }: ComponentPropsWithRef<"div">) {
+  const { setTheme, theme, resolvedTheme } = useTheme()
+
+  return (
+    <div {...divProps}>
+      <DropdownMenu>
+        <DropdownMenuTrigger render={<Button size="icon" variant="outline" />} suppressHydrationWarning>
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuCheckboxItem
+            checked={Boolean(theme && theme === "light")}
+            disabled={Boolean(theme && theme === "light")}
+            onCheckedChange={(val) => {
+              if (val) {
+                setTheme("light")
+              }
+            }}
+          >
+            Light
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            checked={Boolean(theme && theme === "dark")}
+            disabled={Boolean(theme && theme === "dark")}
+            onCheckedChange={(val) => {
+              if (val) {
+                setTheme("dark")
+              }
+            }}
+          >
+            Dark
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            checked={Boolean(theme && theme === "system")}
+            disabled={Boolean(theme && theme === "system")}
+            onCheckedChange={(val) => {
+              if (val) {
+                setTheme("system")
+              }
+            }}
+          >
+            System
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div >
+  )
+}
+

package/templates/tanstack-start/src/components/ThemeToggle.tsx

@@ -0,0 +1,27 @@
+import { Moon, Sun, SunMoon } from "lucide-react";
+import { ComponentPropsWithRef } from "react";
+import { Button } from "~/components/ui/button";
+import { useTheme } from "~/lib/theme";
+
+export function ThemeToggle({ onClick, ...buttonProps }: ComponentPropsWithRef<"button">) {
+  const { userTheme, setTheme } = useTheme()
+
+  function toggleTheme() {
+    setTheme(userTheme === "light" ? "dark" : userTheme === "dark" ? "system" : "light")
+  }
+
+  return (
+    <Button
+      onClick={(e) => {
+        toggleTheme()
+        if (onClick) {
+          onClick(e)
+        }
+      }}
+      aria-label="Toggle Theme"
+      {...buttonProps}
+    >
+      {userTheme === "light" ? <Sun /> : userTheme === "dark" ? <Moon /> : <SunMoon />}
+    </Button>
+  )
+}

package/templates/tanstack-start/src/components/component-example.tsx

@@ -90,10 +90,12 @@ import {
   SelectValue,
 } from '~/components/ui/select'
 import { Textarea } from '~/components/ui/textarea'
+import { ThemeToggle } from './ThemeToggle'
 
 export function ComponentExample() {
   return (
     <ExampleWrapper>
+      <ThemeToggle className="absolute -top-10 right-0" />
       <CardExample />
       <FormExample />
     </ExampleWrapper>