theme

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>