theme

src/App.tsx

@@ -35,8 +35,7 @@ import {
   ContextMenuGroup
 } from "@/components/ui/context-menu"
 import { AppMenubar } from '@/components/AppMenubar'
-import { Button } from '@/components/ui/button'
-import { ClipboardPaste, Code2, Moon, ScrollText, Sparkles, Sun, Variable } from 'lucide-react'
+import { ClipboardPaste, Code2, ScrollText, Sparkles, Variable } from 'lucide-react'
 import { DEFAULT_NODE_STYLE, getDefaultDataForType, getNextNodeId } from './lib/flowUtils'
 
 const SNAP_GRID: [number, number] = [15, 15]
@@ -69,7 +68,7 @@ const initialEdges: Edge[] = [
 const PROJECT_FILE_EXT = '.zui.json'
 
 export default function App() {
-  const { theme, toggleTheme } = useTheme()
+  const { theme } = useTheme()
   const {
     nodes,
     edges,
@@ -378,16 +377,6 @@ export default function App() {
         canRedo={canRedo}
       />
       <div className="flex-1 min-h-0 relative flex flex-col">
-        <Button
-          variant="outline"
-          size="icon"
-          className="absolute top-3 right-3 z-10 nodrag nopan"
-          onClick={toggleTheme}
-          title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
-          aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
-        >
-          {theme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
-        </Button>
         <div className="flex-1 min-h-0 flex flex-col">
       <FlowContext.Provider value={flowContextValue}>
         <ContextMenu>

src/components/AppMenubar.tsx

@@ -5,9 +5,14 @@ import {
   MenubarItem,
   MenubarMenu,
   MenubarTrigger,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+  MenubarCheckboxItem,
 } from '@/components/ui/menubar'
 import { Kbd, KbdGroup } from '@/components/ui/kbd'
-import { Download, FolderOpen, Redo2, Undo2 } from 'lucide-react'
+import { useTheme } from '@/lib/themeContext'
+import { Download, FolderOpen, Moon, Redo2, Sun, Undo2 } from 'lucide-react'
 
 type AppMenubarProps = {
   onImport: () => void
@@ -31,6 +36,8 @@ function matchKey(ev: KeyboardEvent, want: { key: string; shiftKey: boolean }) {
 }
 
 export function AppMenubar({ onImport, onExport, undo, redo, canUndo, canRedo }: AppMenubarProps) {
+  const { theme, setTheme } = useTheme()
+
   useEffect(() => {
     const onKeyDown = (ev: KeyboardEvent) => {
       if (matchKey(ev, UNDO_KEYS)) {
@@ -92,6 +99,32 @@ export function AppMenubar({ onImport, onExport, undo, redo, canUndo, canRedo }:
           </MenubarItem>
         </MenubarContent>
       </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger className="font-medium">View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarSub>
+            <MenubarSubTrigger>Theme</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarCheckboxItem
+                checked={theme === 'light'}
+                onCheckedChange={() => setTheme('light')}
+                className="gap-2"
+              >
+                <Sun className="h-4 w-4" />
+                Light
+              </MenubarCheckboxItem>
+              <MenubarCheckboxItem
+                checked={theme === 'dark'}
+                onCheckedChange={() => setTheme('dark')}
+                className="gap-2"
+              >
+                <Moon className="h-4 w-4" />
+                Dark
+              </MenubarCheckboxItem>
+            </MenubarSubContent>
+          </MenubarSub>
+        </MenubarContent>
+      </MenubarMenu>
     </Menubar>
   )
 }

src/components/graph/RenderingNode.tsx

@@ -13,7 +13,7 @@ import { NodeFooterEdgeIndicators } from './NodeFooterEdgeIndicators'
 import { NodeHeaderTitle } from './NodeHeaderTitle'
 import { NodeMenubar } from './NodeMenubar'
 import { NodeStatusIndicator } from './NodeStatusIndicator'
-import { MenubarItem, MenubarSub, MenubarSubContent, MenubarSubTrigger } from '../ui/menubar'
+import { MenubarItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger } from '../ui/menubar'
 import { Sparkles } from 'lucide-react'
 import { InputHandle } from './NodeHandles'
 
@@ -541,6 +541,7 @@ export const RenderingNode = memo(function RenderingNode({ id, width, height }:
                         nodeType="render"
                         nodeMenuExtraContent={
                             <MenubarSub>
+                                <MenubarSeparator></MenubarSeparator>
                                 <MenubarSubTrigger className="text-xs" disabled={!svgContent}>
                                     Export
                                 </MenubarSubTrigger>