diff --git a/apps/editor/components/scene-loader.tsx b/apps/editor/components/scene-loader.tsx
index 8d8de58a86..251c1bb030 100644
--- a/apps/editor/components/scene-loader.tsx
+++ b/apps/editor/components/scene-loader.tsx
@@ -154,6 +154,13 @@ function isLightPreviewQuery(searchParams: URLSearchParams): boolean {
 
 export function SceneLoader(props: SceneLoaderProps) {
   const webXRInstalled = useWebXRInstalled()
+  // The editor follows its host's `.dark` class, and this app keeps the editor
+  // dark: the page root carries it from the first paint, and <body> for the
+  // menus and dialogs the editor portals there.
+  useEffect(() => {
+    document.body.classList.add('dark')
+    return () => document.body.classList.remove('dark')
+  }, [])
   return (
     <WebXRFeatureRuntime enabled={webXRInstalled}>
       <SceneEditor {...props} />
@@ -331,7 +338,7 @@ function SceneEditor({ initialScene, meta: initialMeta }: SceneLoaderProps) {
   )
 
   return (
-    <div className="relative h-screen w-screen">
+    <div className="dark relative h-screen w-screen">
       {conflict && (
         <div className="dark pointer-events-auto absolute top-14 left-1/2 z-50 w-full max-w-md -translate-x-1/2 rounded-lg border border-border bg-background p-4 text-foreground shadow-xl">
           <h2 className="font-semibold text-sm">Another session saved first — refresh?</h2>
diff --git a/apps/editor/components/viewer-toolbar.tsx b/apps/editor/components/viewer-toolbar.tsx
index f30e4e3e08..901bb044db 100644
--- a/apps/editor/components/viewer-toolbar.tsx
+++ b/apps/editor/components/viewer-toolbar.tsx
@@ -541,7 +541,7 @@ function DisplayMenu() {
         <DropdownMenuSub>
           <DropdownMenuSubTrigger>
             <SwatchBook className="h-4 w-4" />
-            <span>Theme</span>
+            <span>Scene theme</span>
             <span className="ml-auto truncate text-muted-foreground text-xs">
               {activeTheme.name}
             </span>
diff --git a/packages/editor/src/components/editor/editor-layout-mobile.tsx b/packages/editor/src/components/editor/editor-layout-mobile.tsx
index f803363b62..9e952dd24f 100644
--- a/packages/editor/src/components/editor/editor-layout-mobile.tsx
+++ b/packages/editor/src/components/editor/editor-layout-mobile.tsx
@@ -214,7 +214,7 @@ export function EditorLayoutMobile({
   }, [panelSheetHeight, committedSheetH])
 
   return (
-    <div className="dark flex h-full w-full flex-col bg-sidebar text-foreground">
+    <div className="flex h-full w-full flex-col bg-sidebar text-foreground">
       {navbarSlot}
 
       <div
diff --git a/packages/editor/src/components/editor/editor-layout-v2.tsx b/packages/editor/src/components/editor/editor-layout-v2.tsx
index 544f0e272e..e60bb1ea2d 100644
--- a/packages/editor/src/components/editor/editor-layout-v2.tsx
+++ b/packages/editor/src/components/editor/editor-layout-v2.tsx
@@ -332,7 +332,7 @@ export function EditorLayoutV2({
   }
 
   return (
-    <div className="dark flex h-full w-full flex-col bg-sidebar text-foreground">
+    <div className="flex h-full w-full flex-col bg-sidebar text-foreground">
       {/* Top navbar */}
       {navbarSlot}
 
diff --git a/packages/editor/src/components/editor/floorplan-mode-coordinator.tsx b/packages/editor/src/components/editor/floorplan-mode-coordinator.tsx
index bb8a213e10..e235e52ce9 100644
--- a/packages/editor/src/components/editor/floorplan-mode-coordinator.tsx
+++ b/packages/editor/src/components/editor/floorplan-mode-coordinator.tsx
@@ -59,7 +59,7 @@ export function FloorplanModeCoordinator() {
       <span>{notice.message}</span>
       {notice.kind === 'switch-to-expert' ? (
         <button
-          className="shrink-0 rounded-md bg-cyan-500/15 px-2.5 py-1 font-medium text-cyan-400 hover:bg-cyan-500/25"
+          className="shrink-0 rounded-md bg-cyan-500/15 px-2.5 py-1 font-medium text-cyan-700 dark:text-cyan-400 hover:bg-cyan-500/25"
           onClick={() => {
             setFloorplanMode('expert')
             dismissNotice()
@@ -71,7 +71,7 @@ export function FloorplanModeCoordinator() {
       ) : null}
       <button
         aria-label="Dismiss"
-        className="shrink-0 rounded p-1 text-muted-foreground hover:bg-white/10 hover:text-foreground"
+        className="shrink-0 rounded p-1 text-muted-foreground hover:bg-black/6 dark:hover:bg-white/10 hover:text-foreground"
         onClick={dismissNotice}
         type="button"
       >
diff --git a/packages/editor/src/components/editor/floorplan-panel.tsx b/packages/editor/src/components/editor/floorplan-panel.tsx
index 011165fa19..9f95e5efad 100644
--- a/packages/editor/src/components/editor/floorplan-panel.tsx
+++ b/packages/editor/src/components/editor/floorplan-panel.tsx
@@ -11265,7 +11265,7 @@ export function FloorplanPanel({
             }}
           >
             <div className="mb-3 flex items-start gap-2.5">
-              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-border bg-white/5">
+              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-border bg-black/4 dark:bg-white/5">
                 <Ruler className="h-4 w-4 text-foreground/80" />
               </div>
               <div className="min-w-0">
@@ -11277,7 +11277,7 @@ export function FloorplanPanel({
               </div>
             </div>
 
-            <div className="mb-3 rounded-xl border border-border/70 bg-white/5 px-3 py-2">
+            <div className="mb-3 rounded-xl border border-border/70 bg-black/4 dark:bg-white/5 px-3 py-2">
               <div className="text-[11px] text-muted-foreground uppercase tracking-wide">
                 Drawn line
               </div>
@@ -11340,7 +11340,7 @@ export function FloorplanPanel({
 
             <div className="mt-4 flex justify-end gap-2">
               <button
-                className="h-8 rounded-lg border border-border px-3 font-medium text-muted-foreground text-xs transition hover:bg-white/8 hover:text-foreground"
+                className="h-8 rounded-lg border border-border px-3 font-medium text-muted-foreground text-xs transition hover:bg-black/5 dark:hover:bg-white/8 hover:text-foreground"
                 onClick={() => setPendingReferenceScale(null)}
                 type="button"
               >
diff --git a/packages/editor/src/components/editor/index.tsx b/packages/editor/src/components/editor/index.tsx
index e39ff0afb9..a5d4ada43b 100644
--- a/packages/editor/src/components/editor/index.tsx
+++ b/packages/editor/src/components/editor/index.tsx
@@ -1566,13 +1566,6 @@ function EditorContent({
     if (!isPreviewMode) setPreviewStageMode('3d')
   }, [isPreviewMode])
 
-  useEffect(() => {
-    document.body.classList.add('dark')
-    return () => {
-      document.body.classList.remove('dark')
-    }
-  }, [])
-
   const handleSceneReadyChange = useCallback((ready: boolean) => {
     setIsViewerSceneReady(ready)
   }, [])
@@ -1824,7 +1817,7 @@ function EditorContent({
   const overlayLeft = LAYOUT_PADDING + (isSidebarCollapsed ? 8 : sidebarWidth) + LAYOUT_GAP
 
   return (
-    <div className="dark flex h-full w-full gap-3 bg-neutral-100 p-3 text-foreground">
+    <div className="flex h-full w-full gap-3 bg-neutral-100 p-3 text-foreground">
       <FloorplanModeCoordinator />
       {visibleLoader && (
         <div className="fixed inset-0 z-60">
diff --git a/packages/editor/src/components/editor/riser-diagram-panel.tsx b/packages/editor/src/components/editor/riser-diagram-panel.tsx
index e89122e192..74aa0ba998 100644
--- a/packages/editor/src/components/editor/riser-diagram-panel.tsx
+++ b/packages/editor/src/components/editor/riser-diagram-panel.tsx
@@ -6,8 +6,10 @@ import { X } from 'lucide-react'
 import { useMemo } from 'react'
 import useEditor from '../../store/use-editor'
 
-const WASTE_COLOR = '#0ea5e9'
-const VENT_COLOR = '#a855f7'
+// Set per theme on the panel root; the light values are darker so the 9-unit
+// diameter labels read on white.
+const WASTE_COLOR = 'var(--riser-waste)'
+const VENT_COLOR = 'var(--riser-vent)'
 const MARKER_COLOR = '#1e293b'
 const PADDING = 32
 /** Meters → SVG units. The iso projection is in meters; scale up so a
@@ -45,14 +47,14 @@ function RiserDiagramContent() {
   const ty = diagram ? -diagram.bounds.minY * SCALE + PADDING : 0
 
   return (
-    <div className="dark pointer-events-auto absolute top-4 right-4 z-30 flex max-h-[80vh] w-[26rem] flex-col overflow-hidden rounded-2xl border border-border/40 bg-background/95 text-foreground shadow-lg backdrop-blur-xl">
+    <div className="pointer-events-auto absolute top-4 right-4 z-30 flex max-h-[80vh] w-[26rem] flex-col overflow-hidden rounded-2xl border border-border/40 bg-background/95 text-foreground shadow-lg backdrop-blur-xl [--riser-vent:#9333ea] [--riser-waste:#0369a1] dark:[--riser-vent:#a855f7] dark:[--riser-waste:#0ea5e9]">
       <div className="flex items-center justify-between border-border/40 border-b px-4 py-2.5">
         <div className="flex flex-col">
           <span className="font-medium text-sm">Riser Diagram</span>
           <span className="text-muted-foreground text-xs">DWV plumbing isometric</span>
         </div>
         <button
-          className="flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-white/10"
+          className="flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-black/6 dark:hover:bg-white/10"
           onClick={() => setRiserOpen(false)}
         >
           <X className="h-4 w-4 text-muted-foreground" />
@@ -87,18 +89,18 @@ function RiserDiagramContent() {
                     <line
                       className="cursor-pointer"
                       onClick={() => select(line.nodeId)}
-                      stroke={color}
                       strokeDasharray={line.system === 'vent' ? '5 4' : undefined}
                       strokeLinecap="round"
                       strokeWidth={(line.vertical ? 3.5 : 2.5) + (isSel ? 2 : 0)}
+                      style={{ stroke: color }}
                       x1={line.from[0] * SCALE}
                       x2={line.to[0] * SCALE}
                       y1={line.from[1] * SCALE}
                       y2={line.to[1] * SCALE}
                     />
                     <text
-                      fill={color}
                       fontSize={9}
+                      style={{ fill: color }}
                       x={((line.from[0] + line.to[0]) / 2) * SCALE + 4}
                       y={((line.from[1] + line.to[1]) / 2) * SCALE - 3}
                     >
@@ -115,7 +117,12 @@ function RiserDiagramContent() {
                   transform={`translate(${marker.point[0] * SCALE}, ${marker.point[1] * SCALE})`}
                 >
                   {marker.kind === 'vent-termination' ? (
-                    <path d="M -5 0 L 0 -7 L 5 0" fill="none" stroke={VENT_COLOR} strokeWidth={2} />
+                    <path
+                      d="M -5 0 L 0 -7 L 5 0"
+                      fill="none"
+                      strokeWidth={2}
+                      style={{ stroke: VENT_COLOR }}
+                    />
                   ) : (
                     <circle fill={MARKER_COLOR} r={3} stroke={MARKER_COLOR} strokeWidth={1.5} />
                   )}
diff --git a/packages/editor/src/components/editor/snapshot-capture-overlay.tsx b/packages/editor/src/components/editor/snapshot-capture-overlay.tsx
index df0126aa3f..ec2fb46871 100644
--- a/packages/editor/src/components/editor/snapshot-capture-overlay.tsx
+++ b/packages/editor/src/components/editor/snapshot-capture-overlay.tsx
@@ -566,7 +566,7 @@ export function SnapshotCaptureOverlay({ projectId }: { projectId: string }) {
   const captureDisabled = captureState !== 'idle' || (mode === 'area' && !hasSelection)
 
   return (
-    <div className="pointer-events-none absolute inset-0 z-40" ref={overlayRef}>
+    <div className="dark pointer-events-none absolute inset-0 z-40" ref={overlayRef}>
       {/* Walk / drone keep the walkthrough's centered pointer (the ring means
           E opens the door / window under it) — the capture overlay replaces
           the walkthrough HUD, so the crosshair rides along here. */}
diff --git a/packages/editor/src/components/editor/views/view-bar.tsx b/packages/editor/src/components/editor/views/view-bar.tsx
index 5dc0e93d59..b5918d331c 100644
--- a/packages/editor/src/components/editor/views/view-bar.tsx
+++ b/packages/editor/src/components/editor/views/view-bar.tsx
@@ -24,8 +24,9 @@ const GROUP = cn(
 )
 const SEGMENT =
   'flex items-center justify-center gap-1.5 px-2.5 font-medium text-xs transition-colors'
-const ACTIVE = 'bg-white/10 text-foreground'
-const IDLE = 'text-muted-foreground/70 hover:bg-white/8 hover:text-muted-foreground'
+const ACTIVE = 'bg-black/6 dark:bg-white/10 text-foreground'
+const IDLE =
+  'text-muted-foreground/70 hover:bg-black/5 dark:hover:bg-white/8 hover:text-muted-foreground'
 
 /** The views of one pane: its pinned views, the one it shows, and a menu with the rest. */
 export function ViewTabs({ pane, className }: { pane: ViewPaneIndex; className?: string }) {
@@ -184,7 +185,7 @@ function MoreViewsMenu({
                   aria-label={pinned ? `Unpin ${view.label}` : `Pin ${view.label}`}
                   aria-pressed={pinned}
                   className={cn(
-                    'flex h-6 w-6 items-center justify-center rounded-md transition-colors hover:bg-white/10',
+                    'flex h-6 w-6 items-center justify-center rounded-md transition-colors hover:bg-black/6 dark:hover:bg-white/10',
                     pinned ? 'text-foreground' : 'text-muted-foreground/60',
                   )}
                   onClick={(event) => {
diff --git a/packages/editor/src/components/ui/action-menu/action-button.tsx b/packages/editor/src/components/ui/action-menu/action-button.tsx
index b8c3781df1..6ad1c12cf1 100644
--- a/packages/editor/src/components/ui/action-menu/action-button.tsx
+++ b/packages/editor/src/components/ui/action-menu/action-button.tsx
@@ -14,6 +14,8 @@ interface ActionButtonProps extends React.ComponentProps<typeof Button> {
   isActive?: boolean
   tooltipContent?: React.ReactNode
   tooltipSide?: 'top' | 'right' | 'bottom' | 'left'
+  /** The tooltip portals to `<body>`, so a button in a themed scope passes the scope here. */
+  tooltipClassName?: string
 }
 
 export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(
@@ -26,6 +28,7 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
       isActive,
       tooltipContent,
       tooltipSide,
+      tooltipClassName,
       onClick,
       onMouseEnter,
       ...props
@@ -68,7 +71,7 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
             )}
           </Button>
         </TooltipTrigger>
-        <TooltipContent side={tooltipSide}>
+        <TooltipContent className={tooltipClassName} side={tooltipSide}>
           {tooltipContent || (
             <p>
               {label} {shortcut && `(${shortcut})`}
diff --git a/packages/editor/src/components/ui/action-menu/camera-actions.tsx b/packages/editor/src/components/ui/action-menu/camera-actions.tsx
index 9f42f17d68..3397c6d77f 100644
--- a/packages/editor/src/components/ui/action-menu/camera-actions.tsx
+++ b/packages/editor/src/components/ui/action-menu/camera-actions.tsx
@@ -30,7 +30,7 @@ export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
         <>
           {/* Orbit CCW */}
           <ActionButton
-            className="group hover:bg-white/5"
+            className="group hover:bg-black/4"
             label="Orbit Left"
             onClick={orbitCCW}
             size="icon"
@@ -47,7 +47,7 @@ export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
 
           {/* Orbit CW */}
           <ActionButton
-            className="group hover:bg-white/5"
+            className="group hover:bg-black/4"
             label="Orbit Right"
             onClick={orbitCW}
             size="icon"
@@ -70,7 +70,7 @@ export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
       {/* Top View */}
       {!is2dOnly && (
         <ActionButton
-          className="group hover:bg-white/5"
+          className="group hover:bg-black/4"
           label="Top View"
           onClick={goToTopView}
           size="icon"
diff --git a/packages/editor/src/components/ui/action-menu/control-modes.tsx b/packages/editor/src/components/ui/action-menu/control-modes.tsx
index cf0f31ed17..b95e1e27d8 100644
--- a/packages/editor/src/components/ui/action-menu/control-modes.tsx
+++ b/packages/editor/src/components/ui/action-menu/control-modes.tsx
@@ -30,16 +30,16 @@ const controls: ControlConfig[] = [
     imageSrc: '/icons/select.webp',
     label: 'Select',
     shortcut: 'V',
-    color: 'hover:bg-blue-500/20 hover:text-blue-400',
-    activeColor: 'bg-blue-500/20 text-blue-400',
+    color: 'hover:bg-blue-500/20 hover:text-blue-600 dark:hover:text-blue-400',
+    activeColor: 'bg-blue-500/20 text-blue-600 dark:text-blue-400 dark:hover:text-accent-foreground',
   },
   {
     id: 'delete',
     icon: Trash2,
     label: 'Delete',
     shortcut: 'X',
-    color: 'hover:bg-red-500/20 hover:text-red-400',
-    activeColor: 'bg-red-500/20 text-red-400',
+    color: 'hover:bg-red-500/20 hover:text-red-600 dark:hover:text-red-400',
+    activeColor: 'bg-red-500/20 text-red-600 dark:text-red-400 dark:hover:text-accent-foreground',
   },
 ]
 
@@ -87,8 +87,8 @@ export function ControlModes() {
                 'group text-muted-foreground',
                 !(isImageMode || isActive) && c.color,
                 !isImageMode && isActive && c.activeColor,
-                isImageMode && isActive && 'bg-white/10 hover:bg-white/10',
-                isImageMode && !isActive && 'hover:bg-white/5',
+                isImageMode && isActive && 'bg-black/6 hover:bg-black/6 dark:bg-white/10',
+                isImageMode && !isActive && 'hover:bg-black/4',
               )}
               // A static hook for a host app that wants to point a first-run
               // tour at this button. Nothing here reads it.
diff --git a/packages/editor/src/components/ui/action-menu/follow-pascal-pill.tsx b/packages/editor/src/components/ui/action-menu/follow-pascal-pill.tsx
index e1f96407e5..61c9e9e1e1 100644
--- a/packages/editor/src/components/ui/action-menu/follow-pascal-pill.tsx
+++ b/packages/editor/src/components/ui/action-menu/follow-pascal-pill.tsx
@@ -17,7 +17,7 @@ export function FollowPascalPill() {
       {shows ? (
         <motion.button
           animate={{ opacity: 1, y: 0, scale: 1 }}
-          className="-translate-x-1/2 fixed bottom-24 left-1/2 z-50 rounded-full border border-violet-400/40 bg-background/90 px-4 py-2 font-medium text-sm text-violet-200 shadow-xl backdrop-blur-md active:scale-[0.97]"
+          className="-translate-x-1/2 fixed bottom-24 left-1/2 z-50 rounded-full border border-violet-400/40 bg-background/90 px-4 py-2 font-medium text-sm text-violet-700 shadow-xl dark:text-violet-200 backdrop-blur-md active:scale-[0.97]"
           exit={{ opacity: 0, y: reduced ? 0 : 8, scale: reduced ? 1 : 0.96 }}
           initial={{ opacity: 0, y: reduced ? 0 : 8, scale: reduced ? 1 : 0.96 }}
           onClick={resume}
diff --git a/packages/editor/src/components/ui/action-menu/follow-pascal-toggle.tsx b/packages/editor/src/components/ui/action-menu/follow-pascal-toggle.tsx
index 4762bc3c34..a86eb23bcf 100644
--- a/packages/editor/src/components/ui/action-menu/follow-pascal-toggle.tsx
+++ b/packages/editor/src/components/ui/action-menu/follow-pascal-toggle.tsx
@@ -6,19 +6,28 @@ import useFollowPascal from '../../../store/use-follow-pascal'
 import { ActionButton } from './action-button'
 
 /** The toolbar's switch for Follow Pascal: the camera follows what the agent builds. */
-export function FollowPascalToggle({ className }: { className?: string }) {
+export function FollowPascalToggle({
+  className,
+  tooltipClassName,
+}: {
+  className?: string
+  tooltipClassName?: string
+}) {
   const on = useFollowPascal((state) => state.on)
   const setOn = useFollowPascal((state) => state.setOn)
   return (
     <ActionButton
       aria-pressed={on}
       className={cn(
-        on ? 'bg-violet-500/20 text-violet-300' : 'hover:bg-white/5 hover:text-violet-300',
+        on
+          ? 'bg-violet-500/20 text-violet-600 dark:text-violet-300 dark:hover:text-accent-foreground'
+          : 'hover:bg-black/4 hover:text-violet-600 dark:hover:text-violet-300',
         className,
       )}
       label={`Follow Pascal: ${on ? 'On' : 'Off'}`}
       onClick={() => setOn(!on)}
       size="icon"
+      tooltipClassName={tooltipClassName}
       variant="ghost"
     >
       <Video className="h-6 w-6" />
diff --git a/packages/editor/src/components/ui/action-menu/measurement-control.tsx b/packages/editor/src/components/ui/action-menu/measurement-control.tsx
index 76ba4383ec..d139ed8eb9 100644
--- a/packages/editor/src/components/ui/action-menu/measurement-control.tsx
+++ b/packages/editor/src/components/ui/action-menu/measurement-control.tsx
@@ -146,8 +146,8 @@ export function MeasurementControl() {
           className={cn(
             'rounded-r-none p-0 text-muted-foreground',
             isControlActive
-              ? 'bg-cyan-500/20 text-cyan-400 hover:bg-cyan-500/20'
-              : 'hover:bg-cyan-500/15 hover:text-cyan-400',
+              ? 'bg-cyan-500/20 text-cyan-700 hover:bg-cyan-500/20 dark:text-cyan-400 dark:hover:text-accent-foreground'
+              : 'hover:bg-cyan-500/15 hover:text-cyan-700 dark:hover:text-cyan-400',
           )}
           label={`Measure: ${selectedLabel}`}
           onClick={handlePrimaryClick}
@@ -166,8 +166,8 @@ export function MeasurementControl() {
             className={cn(
               'flex h-11 w-6 items-center justify-center rounded-r-lg text-muted-foreground transition-colors',
               isOpen
-                ? 'bg-cyan-500/15 text-cyan-400'
-                : 'hover:bg-cyan-500/10 hover:text-cyan-400',
+                ? 'bg-cyan-500/15 text-cyan-700 dark:text-cyan-400'
+                : 'hover:bg-cyan-500/10 hover:text-cyan-700 dark:hover:text-cyan-400',
             )}
             type="button"
           >
@@ -198,8 +198,8 @@ export function MeasurementControl() {
                 className={cn(
                   'flex h-9 w-full items-center gap-2 rounded-md px-2.5 text-left text-sm transition-colors',
                   isSelected
-                    ? 'bg-white/10 text-foreground'
-                    : 'text-muted-foreground hover:bg-white/8 hover:text-foreground',
+                    ? 'bg-black/6 dark:bg-white/10 text-foreground'
+                    : 'text-muted-foreground hover:bg-black/5 dark:hover:bg-white/8 hover:text-foreground',
                 )}
                 key={option.kind}
                 onClick={() => {
@@ -234,8 +234,8 @@ export function MeasurementControl() {
                     className={cn(
                       'flex h-9 w-full items-center gap-2 rounded-md px-2.5 text-left text-sm transition-colors',
                       isSelected
-                        ? 'bg-white/10 text-foreground'
-                        : 'text-muted-foreground hover:bg-white/8 hover:text-foreground',
+                        ? 'bg-black/6 dark:bg-white/10 text-foreground'
+                        : 'text-muted-foreground hover:bg-black/5 dark:hover:bg-white/8 hover:text-foreground',
                     )}
                     key={`${option.mode}-${option.chainMode}`}
                     onClick={() => {
diff --git a/packages/editor/src/components/ui/action-menu/point-ask-button.tsx b/packages/editor/src/components/ui/action-menu/point-ask-button.tsx
index e7df1da3af..948611791d 100644
--- a/packages/editor/src/components/ui/action-menu/point-ask-button.tsx
+++ b/packages/editor/src/components/ui/action-menu/point-ask-button.tsx
@@ -24,7 +24,9 @@ export function PointAskButton() {
     <ActionButton
       className={cn(
         'group text-muted-foreground',
-        active ? 'bg-[#a99bff]/20 text-[#c9c1ff]' : 'hover:bg-[#a99bff]/15 hover:text-[#c9c1ff]',
+        active
+          ? 'bg-[#a99bff]/20 text-[#5d49df] dark:text-[#c9c1ff] dark:hover:text-accent-foreground'
+          : 'hover:bg-[#a99bff]/15 hover:text-[#5d49df] dark:hover:text-[#c9c1ff]',
       )}
       data-guide-target="mode-point-ask"
       disabled={unavailable}
diff --git a/packages/editor/src/components/ui/action-menu/view-toggles.tsx b/packages/editor/src/components/ui/action-menu/view-toggles.tsx
index e3023323cf..dc6262bbc0 100644
--- a/packages/editor/src/components/ui/action-menu/view-toggles.tsx
+++ b/packages/editor/src/components/ui/action-menu/view-toggles.tsx
@@ -149,7 +149,7 @@ function UploadButton({ onError }: { onError: (message: string | null) => void }
     <>
       <button
         aria-label="Upload scan or guide image"
-        className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-border/40 text-muted-foreground transition-colors hover:bg-white/10 hover:text-foreground"
+        className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-border/40 text-muted-foreground transition-colors hover:bg-black/6 dark:hover:bg-white/10 hover:text-foreground"
         disabled={isAddingGuide}
         onClick={() => fileInputRef.current?.click()}
         type="button"
@@ -207,8 +207,8 @@ function GuidesControl() {
           className={cn(
             'rounded-r-none p-0',
             showGuides
-              ? 'bg-white/15'
-              : 'opacity-60 grayscale hover:bg-white/5 hover:opacity-100 hover:grayscale-0',
+              ? 'bg-black/9 hover:bg-black/9 dark:bg-white/15'
+              : 'opacity-60 grayscale hover:bg-black/4 hover:opacity-100 hover:grayscale-0',
           )}
           label={`Guides: ${showGuides ? 'Visible' : 'Hidden'}`}
           onClick={() => setShowGuides(!showGuides)}
@@ -221,7 +221,7 @@ function GuidesControl() {
               className="h-[28px] w-[28px] object-contain"
               src="/icons/floorplan.webp"
             />
-            <span className="absolute -right-1.5 -bottom-1 min-w-[14px] rounded-full bg-white/20 px-[3px] text-center font-medium text-[9px] text-white/70 leading-[14px]">
+            <span className="absolute -right-1.5 -bottom-1 min-w-[14px] rounded-full bg-black/12 dark:bg-white/20 px-[3px] text-center font-medium text-[9px] text-foreground/70 dark:text-white/70 leading-[14px]">
               {guides.length}
             </span>
           </div>
@@ -236,11 +236,11 @@ function GuidesControl() {
               'flex h-11 w-6 items-center justify-center rounded-r-lg transition-colors',
               showGuides
                 ? isOpen
-                  ? 'bg-white/10'
-                  : 'bg-white/5 hover:bg-white/8'
+                  ? 'bg-black/6 dark:bg-white/10'
+                  : 'bg-black/4 dark:bg-white/5 hover:bg-black/5 dark:hover:bg-white/8'
                 : isOpen
-                  ? 'bg-white/8'
-                  : 'opacity-60 hover:bg-white/5 hover:opacity-100',
+                  ? 'bg-black/5 dark:bg-white/8'
+                  : 'opacity-60 hover:bg-black/4 dark:hover:bg-white/5 hover:opacity-100',
             )}
             type="button"
           >
@@ -284,7 +284,7 @@ function GuidesControl() {
                   className={cn(
                     'group/item space-y-2 rounded-xl border bg-background/75 p-2.5 transition-colors',
                     selectedReferenceId === guide.id
-                      ? 'border-foreground/35 bg-white/10'
+                      ? 'border-foreground/35 bg-black/6 dark:bg-white/10'
                       : 'border-border/45',
                   )}
                   key={guide.id}
@@ -386,8 +386,8 @@ function ScansControl() {
           className={cn(
             'rounded-r-none p-0',
             showScans
-              ? 'bg-white/15'
-              : 'opacity-60 grayscale hover:bg-white/5 hover:opacity-100 hover:grayscale-0',
+              ? 'bg-black/9 hover:bg-black/9 dark:bg-white/15'
+              : 'opacity-60 grayscale hover:bg-black/4 hover:opacity-100 hover:grayscale-0',
           )}
           label={`Scans: ${showScans ? 'Visible' : 'Hidden'}`}
           onClick={() => setShowScans(!showScans)}
@@ -396,7 +396,7 @@ function ScansControl() {
         >
           <div className="relative">
             <img alt="Scans" className="h-[28px] w-[28px] object-contain" src="/icons/mesh.webp" />
-            <span className="absolute -right-1.5 -bottom-1 min-w-[14px] rounded-full bg-white/20 px-[3px] text-center font-medium text-[9px] text-white/70 leading-[14px]">
+            <span className="absolute -right-1.5 -bottom-1 min-w-[14px] rounded-full bg-black/12 dark:bg-white/20 px-[3px] text-center font-medium text-[9px] text-foreground/70 dark:text-white/70 leading-[14px]">
               {scans.length}
             </span>
           </div>
@@ -411,11 +411,11 @@ function ScansControl() {
               'flex h-11 w-6 items-center justify-center rounded-r-lg transition-colors',
               showScans
                 ? isOpen
-                  ? 'bg-white/10'
-                  : 'bg-white/5 hover:bg-white/8'
+                  ? 'bg-black/6 dark:bg-white/10'
+                  : 'bg-black/4 dark:bg-white/5 hover:bg-black/5 dark:hover:bg-white/8'
                 : isOpen
-                  ? 'bg-white/8'
-                  : 'opacity-60 hover:bg-white/5 hover:opacity-100',
+                  ? 'bg-black/5 dark:bg-white/8'
+                  : 'opacity-60 hover:bg-black/4 dark:hover:bg-white/5 hover:opacity-100',
             )}
             type="button"
           >
@@ -459,7 +459,7 @@ function ScansControl() {
                   className={cn(
                     'group/item space-y-2 rounded-xl border bg-background/75 p-2.5 transition-colors',
                     selectedReferenceId === scan.id
-                      ? 'border-foreground/35 bg-white/10'
+                      ? 'border-foreground/35 bg-black/6 dark:bg-white/10'
                       : 'border-border/45',
                   )}
                   key={scan.id}
@@ -578,7 +578,7 @@ function ReferenceListSection({
         </div>
         <button
           aria-label={show ? `Hide ${title.toLowerCase()}` : `Show ${title.toLowerCase()}`}
-          className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-border/40 text-muted-foreground transition-colors hover:bg-white/10 hover:text-foreground"
+          className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-border/40 text-muted-foreground transition-colors hover:bg-black/6 dark:hover:bg-white/10 hover:text-foreground"
           onClick={() => setShow(!show)}
           type="button"
         >
@@ -594,7 +594,7 @@ function ReferenceListSection({
               className={cn(
                 'group/item space-y-2 rounded-xl border bg-background/75 p-2.5 transition-colors',
                 selectedReferenceId === node.id
-                  ? 'border-foreground/35 bg-white/10'
+                  ? 'border-foreground/35 bg-black/6 dark:bg-white/10'
                   : 'border-border/45',
               )}
               key={node.id}
@@ -682,8 +682,8 @@ function ReferencesControl() {
           className={cn(
             'rounded-r-none p-0',
             anyVisible
-              ? 'bg-white/15'
-              : 'opacity-60 grayscale hover:bg-white/5 hover:opacity-100 hover:grayscale-0',
+              ? 'bg-black/9 hover:bg-black/9 dark:bg-white/15'
+              : 'opacity-60 grayscale hover:bg-black/4 hover:opacity-100 hover:grayscale-0',
           )}
           label={`References: ${anyVisible ? 'Visible' : 'Hidden'}`}
           onClick={toggleAll}
@@ -696,7 +696,7 @@ function ReferencesControl() {
               className="h-[28px] w-[28px] object-contain"
               src="/icons/floorplan.webp"
             />
-            <span className="absolute -right-1.5 -bottom-1 min-w-[14px] rounded-full bg-white/20 px-[3px] text-center font-medium text-[9px] text-white/70 leading-[14px]">
+            <span className="absolute -right-1.5 -bottom-1 min-w-[14px] rounded-full bg-black/12 dark:bg-white/20 px-[3px] text-center font-medium text-[9px] text-foreground/70 dark:text-white/70 leading-[14px]">
               {total}
             </span>
           </div>
@@ -710,11 +710,11 @@ function ReferencesControl() {
               'flex h-11 w-6 items-center justify-center rounded-r-lg transition-colors',
               anyVisible
                 ? isOpen
-                  ? 'bg-white/10'
-                  : 'bg-white/5 hover:bg-white/8'
+                  ? 'bg-black/6 dark:bg-white/10'
+                  : 'bg-black/4 dark:bg-white/5 hover:bg-black/5 dark:hover:bg-white/8'
                 : isOpen
-                  ? 'bg-white/8'
-                  : 'opacity-60 hover:bg-white/5 hover:opacity-100',
+                  ? 'bg-black/5 dark:bg-white/8'
+                  : 'opacity-60 hover:bg-black/4 dark:hover:bg-white/5 hover:opacity-100',
             )}
             type="button"
           >
@@ -784,8 +784,8 @@ function ReferenceFloorControl() {
           className={cn(
             'rounded-r-none p-0',
             showReferenceFloor && selectedLevel
-              ? 'bg-white/15'
-              : 'opacity-60 grayscale hover:bg-white/5 hover:opacity-100 hover:grayscale-0',
+              ? 'bg-black/9 hover:bg-black/9 dark:bg-white/15'
+              : 'opacity-60 grayscale hover:bg-black/4 hover:opacity-100 hover:grayscale-0',
           )}
           disabled={!hasLowerLevels}
           label={
@@ -801,7 +801,7 @@ function ReferenceFloorControl() {
         >
           <div className="relative">
             <Layers2 className="h-4 w-4" />
-            <span className="absolute -right-1.5 -bottom-1 min-w-[14px] rounded-full bg-white/20 px-[3px] text-center font-medium text-[9px] text-white/70 leading-[14px]">
+            <span className="absolute -right-1.5 -bottom-1 min-w-[14px] rounded-full bg-black/12 dark:bg-white/20 px-[3px] text-center font-medium text-[9px] text-foreground/70 dark:text-white/70 leading-[14px]">
               {lowerLevels.length}
             </span>
           </div>
@@ -815,11 +815,11 @@ function ReferenceFloorControl() {
               'flex h-11 w-6 items-center justify-center rounded-r-lg transition-colors',
               showReferenceFloor && selectedLevel
                 ? isOpen
-                  ? 'bg-white/10'
-                  : 'bg-white/5 hover:bg-white/8'
+                  ? 'bg-black/6 dark:bg-white/10'
+                  : 'bg-black/4 dark:bg-white/5 hover:bg-black/5 dark:hover:bg-white/8'
                 : isOpen
-                  ? 'bg-white/8'
-                  : 'opacity-60 hover:bg-white/5 hover:opacity-100',
+                  ? 'bg-black/5 dark:bg-white/8'
+                  : 'opacity-60 hover:bg-black/4 dark:hover:bg-white/5 hover:opacity-100',
             )}
             disabled={!hasLowerLevels}
             type="button"
@@ -848,7 +848,7 @@ function ReferenceFloorControl() {
             </div>
             <button
               aria-label={showReferenceFloor ? 'Hide reference floor' : 'Show reference floor'}
-              className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-border/40 text-muted-foreground transition-colors hover:bg-white/10 hover:text-foreground disabled:pointer-events-none disabled:opacity-40"
+              className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-border/40 text-muted-foreground transition-colors hover:bg-black/6 dark:hover:bg-white/10 hover:text-foreground disabled:pointer-events-none disabled:opacity-40"
               disabled={!hasLowerLevels}
               onClick={toggleReferenceFloor}
               type="button"
@@ -870,8 +870,8 @@ function ReferenceFloorControl() {
                   return (
                     <button
                       className={cn(
-                        'flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm transition-colors hover:bg-white/8',
-                        isSelected && showReferenceFloor && 'bg-white/10 text-foreground',
+                        'flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm transition-colors hover:bg-black/5 dark:hover:bg-white/8',
+                        isSelected && showReferenceFloor && 'bg-black/6 dark:bg-white/10 text-foreground',
                       )}
                       key={level.id}
                       onClick={() => {
@@ -928,8 +928,8 @@ function RiserControl() {
     <ActionButton
       className={cn(
         isRiserOpen
-          ? 'bg-white/15'
-          : 'opacity-60 grayscale hover:bg-white/5 hover:opacity-100 hover:grayscale-0',
+          ? 'bg-black/9 hover:bg-black/9 dark:bg-white/15'
+          : 'opacity-60 grayscale hover:bg-black/4 hover:opacity-100 hover:grayscale-0',
       )}
       label="Riser diagram"
       onClick={toggleRiserOpen}
diff --git a/packages/editor/src/components/ui/build-panel/build-panel.tsx b/packages/editor/src/components/ui/build-panel/build-panel.tsx
index 70e417bd3e..48c4f8c43d 100644
--- a/packages/editor/src/components/ui/build-panel/build-panel.tsx
+++ b/packages/editor/src/components/ui/build-panel/build-panel.tsx
@@ -151,7 +151,9 @@ export function BuildToolTile({
         // Small tiles grow to two label lines ("Spawn point"); a grid row's
         // tiles stretch together, so a row keeps one height.
         size === 'lg' ? 'h-[104px] gap-1.5 px-1.5 pt-2 pb-2.5' : 'min-h-[74px] gap-1 px-1 pt-1.5 pb-2',
-        active ? 'bg-primary/10 ring-1 ring-primary/50' : 'bg-muted/40 hover:bg-muted',
+        active
+          ? 'bg-primary/10 ring-1 ring-primary/50'
+          : 'bg-black/4 hover:bg-black/8 dark:bg-muted/40 dark:hover:bg-muted',
         className,
       )}
       type="button"
diff --git a/packages/editor/src/components/ui/controls/action-button.tsx b/packages/editor/src/components/ui/controls/action-button.tsx
index 65381cfba4..50713d018e 100644
--- a/packages/editor/src/components/ui/controls/action-button.tsx
+++ b/packages/editor/src/components/ui/controls/action-button.tsx
@@ -12,7 +12,10 @@ export function ActionButton({ icon, label, className, ...props }: ActionButtonP
     <button
       {...props}
       className={cn(
-        'flex h-9 flex-1 items-center justify-center gap-1.5 rounded-lg border border-border/50 bg-[#2C2C2E] px-3 font-medium text-foreground text-xs transition-colors hover:bg-[#3e3e3e] active:bg-[#3e3e3e]',
+        // The fill runs through custom properties so a caller's `bg-*` or
+        // `hover:bg-*` replaces it in both themes; tailwind-merge would keep a
+        // `dark:bg-*` fill alive under the caller's class.
+        'flex h-9 flex-1 items-center justify-center gap-1.5 rounded-lg border border-border/50 bg-(--action-fill) px-3 font-medium text-foreground text-xs transition-colors [--action-fill-hover:rgb(0_0_0/0.08)] [--action-fill:rgb(0_0_0/0.04)] hover:bg-(--action-fill-hover) active:bg-(--action-fill-hover) dark:[--action-fill-hover:#3e3e3e] dark:[--action-fill:#2C2C2E]',
         className,
       )}
     >
diff --git a/packages/editor/src/components/ui/controls/metric-control.tsx b/packages/editor/src/components/ui/controls/metric-control.tsx
index 797ea8e835..749ad84378 100644
--- a/packages/editor/src/components/ui/controls/metric-control.tsx
+++ b/packages/editor/src/components/ui/controls/metric-control.tsx
@@ -310,7 +310,7 @@ export function MetricControl({
     <div
       className={cn(
         'group flex h-10 w-full items-center justify-between rounded-lg border border-border/50 px-3 text-sm transition-colors',
-        isDragging ? 'bg-[#3e3e3e]' : 'bg-[#2C2C2E] hover:bg-[#3e3e3e]',
+        isDragging ? 'bg-black/8 dark:bg-[#3e3e3e]' : 'bg-black/4 dark:bg-[#2C2C2E] hover:bg-black/8 dark:hover:bg-[#3e3e3e]',
         className,
       )}
       onMouseEnter={() => setIsHovered(true)}
diff --git a/packages/editor/src/components/ui/controls/segmented-control.tsx b/packages/editor/src/components/ui/controls/segmented-control.tsx
index 773afeb872..75dd6d6aae 100644
--- a/packages/editor/src/components/ui/controls/segmented-control.tsx
+++ b/packages/editor/src/components/ui/controls/segmented-control.tsx
@@ -22,7 +22,7 @@ export function SegmentedControl<T extends string>({
   return (
     <div
       className={cn(
-        'flex h-9 w-full items-center rounded-lg border border-border/50 bg-[#2C2C2E] p-[3px]',
+        'flex h-9 w-full items-center rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] p-[3px]',
         disabled && 'opacity-60',
         className,
       )}
@@ -31,12 +31,14 @@ export function SegmentedControl<T extends string>({
         const isSelected = !mixed && value === option.value
         return (
           <button
+            aria-pressed={isSelected}
             className={cn(
               'relative flex h-full flex-1 items-center justify-center rounded-md font-medium text-xs transition-all duration-200',
               isSelected
-                ? 'bg-[#3e3e3e] text-foreground shadow-sm ring-1 ring-border/50'
-                : 'text-muted-foreground hover:bg-white/5 hover:text-foreground',
-              disabled && 'cursor-not-allowed hover:bg-transparent hover:text-muted-foreground',
+                ? 'bg-white dark:bg-[#3e3e3e] text-foreground shadow-sm ring-1 ring-border/50'
+                : 'text-muted-foreground hover:bg-black/4 dark:hover:bg-white/5 hover:text-foreground',
+              disabled &&
+                'cursor-not-allowed hover:bg-transparent hover:text-muted-foreground dark:hover:bg-transparent',
             )}
             disabled={disabled}
             key={option.value}
diff --git a/packages/editor/src/components/ui/controls/select-control.tsx b/packages/editor/src/components/ui/controls/select-control.tsx
index 545a660d21..3858e5b819 100644
--- a/packages/editor/src/components/ui/controls/select-control.tsx
+++ b/packages/editor/src/components/ui/controls/select-control.tsx
@@ -34,7 +34,7 @@ export function SelectControl<T extends string>({
         <button
           aria-label={label}
           className={cn(
-            'group flex h-10 w-full items-center justify-between gap-2 rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-sm transition-colors hover:bg-[#3e3e3e] data-[state=open]:bg-[#3e3e3e]',
+            'group flex h-10 w-full items-center justify-between gap-2 rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 text-sm transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] data-[state=open]:bg-black/8 dark:data-[state=open]:bg-[#3e3e3e]',
             className,
           )}
           type="button"
diff --git a/packages/editor/src/components/ui/controls/slider-control.tsx b/packages/editor/src/components/ui/controls/slider-control.tsx
index 90cea697bf..3bf74c6b75 100644
--- a/packages/editor/src/components/ui/controls/slider-control.tsx
+++ b/packages/editor/src/components/ui/controls/slider-control.tsx
@@ -329,7 +329,7 @@ export function SliderControl({
     <div
       className={cn(
         'group flex h-7 w-full select-none items-center rounded-lg px-2 transition-colors',
-        isDragging ? 'bg-white/5' : 'hover:bg-white/5',
+        isDragging ? 'bg-black/4 dark:bg-white/5' : 'hover:bg-black/4 dark:hover:bg-white/5',
         className,
       )}
       onMouseEnter={() => setIsHovered(true)}
diff --git a/packages/editor/src/components/ui/controls/toggle-control.tsx b/packages/editor/src/components/ui/controls/toggle-control.tsx
index a83720ea94..1f6403c431 100644
--- a/packages/editor/src/components/ui/controls/toggle-control.tsx
+++ b/packages/editor/src/components/ui/controls/toggle-control.tsx
@@ -21,7 +21,7 @@ export function ToggleControl({
   return (
     <div
       className={cn(
-        'group flex h-10 w-full cursor-pointer items-center justify-between rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-sm transition-colors hover:bg-[#3e3e3e]',
+        'group flex h-10 w-full cursor-pointer items-center justify-between rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 text-sm transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e]',
         className,
       )}
       onClick={() => onChange(!checked)}
@@ -34,10 +34,10 @@ export function ToggleControl({
         className={cn(
           'flex h-5 w-5 items-center justify-center rounded-[4px] border transition-all duration-200',
           mixed
-            ? 'border-muted-foreground/70 bg-black/20 text-muted-foreground'
+            ? 'border-muted-foreground/70 bg-black/5 dark:bg-black/20 text-muted-foreground'
             : checked
               ? 'border-primary bg-primary text-primary-foreground'
-              : 'border-border bg-black/20 text-transparent group-hover:border-muted-foreground',
+              : 'border-border bg-black/5 dark:bg-black/20 text-transparent group-hover:border-muted-foreground',
         )}
       >
         {mixed ? (
diff --git a/packages/editor/src/components/ui/controls/tool-options-panel.tsx b/packages/editor/src/components/ui/controls/tool-options-panel.tsx
index a0d4d4144b..9404050c28 100644
--- a/packages/editor/src/components/ui/controls/tool-options-panel.tsx
+++ b/packages/editor/src/components/ui/controls/tool-options-panel.tsx
@@ -50,7 +50,7 @@ function ToolOptionRow({
                 'rounded-lg px-2 py-2 text-center font-medium text-xs transition-colors',
                 selected
                   ? 'bg-primary/10 text-primary ring-1 ring-primary/50'
-                  : 'bg-muted/40 text-muted-foreground hover:bg-muted hover:text-foreground',
+                  : 'bg-black/4 text-muted-foreground hover:bg-black/8 hover:text-foreground dark:bg-muted/40 dark:hover:bg-muted',
               )}
               key={choice.value}
               onClick={() => {
diff --git a/packages/editor/src/components/ui/floating-level-selector.tsx b/packages/editor/src/components/ui/floating-level-selector.tsx
index ff8da87dfe..cc2afec102 100644
--- a/packages/editor/src/components/ui/floating-level-selector.tsx
+++ b/packages/editor/src/components/ui/floating-level-selector.tsx
@@ -196,17 +196,17 @@ function LevelRow({
         <div
           className={cn(
             'flex items-center rounded-lg transition-colors',
-            isDragging && 'bg-white/10 text-foreground shadow-lg',
+            isDragging && 'bg-black/6 dark:bg-white/10 text-foreground shadow-lg',
             isSelected
-              ? 'bg-white/10 text-foreground'
-              : 'text-muted-foreground/70 hover:bg-white/5 hover:text-muted-foreground',
+              ? 'bg-black/6 dark:bg-white/10 text-foreground'
+              : 'text-muted-foreground/70 hover:bg-black/4 dark:hover:bg-white/5 hover:text-muted-foreground',
           )}
         >
           <button
             {...dragHandleProps}
             aria-label={`Reorder ${getLevelDisplayName(level)}`}
             className={cn(
-              'ml-0.5 flex h-6 w-4 shrink-0 cursor-grab touch-none items-center justify-center rounded-md text-muted-foreground/35 opacity-0 transition-colors hover:bg-white/5 hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 group-hover/level:opacity-100',
+              'ml-0.5 flex h-6 w-4 shrink-0 cursor-grab touch-none items-center justify-center rounded-md text-muted-foreground/35 opacity-0 transition-colors hover:bg-black/4 dark:hover:bg-white/5 hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 group-hover/level:opacity-100',
               isDragging && 'cursor-grabbing opacity-100',
             )}
             onClick={(e) => {
@@ -244,7 +244,7 @@ function LevelRow({
           <Popover>
             <PopoverTrigger asChild>
               <button
-                className="mr-0.5 shrink-0 whitespace-nowrap rounded px-1 py-0.5 font-mono text-[10px] text-muted-foreground/50 tabular-nums transition-colors hover:bg-white/5 hover:text-foreground"
+                className="mr-0.5 shrink-0 whitespace-nowrap rounded px-1 py-0.5 font-mono text-[10px] text-muted-foreground tabular-nums transition-colors hover:bg-black/4 hover:text-foreground dark:text-muted-foreground/50 dark:hover:bg-white/5 dark:hover:text-foreground"
                 onClick={(e) => e.stopPropagation()}
                 title="Level height"
                 type="button"
@@ -295,7 +295,7 @@ function LevelRow({
             </PopoverTrigger>
             <PopoverContent align="start" className="w-44 p-1" side="right" sideOffset={8}>
               <button
-                className="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-muted-foreground text-xs transition-colors hover:bg-white/10 hover:text-foreground"
+                className="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-muted-foreground text-xs transition-colors hover:bg-black/6 dark:hover:bg-white/10 hover:text-foreground"
                 onClick={(e) => {
                   e.stopPropagation()
                   onDuplicate()
@@ -306,7 +306,7 @@ function LevelRow({
                 Duplicate level
               </button>
               <button
-                className="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-muted-foreground text-xs transition-colors hover:bg-white/10 hover:text-foreground"
+                className="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-muted-foreground text-xs transition-colors hover:bg-black/6 dark:hover:bg-white/10 hover:text-foreground"
                 onClick={(e) => {
                   e.stopPropagation()
                   setDuplicateDialogOpen(true)
@@ -318,7 +318,7 @@ function LevelRow({
               </button>
               {onPaste && (
                 <button
-                  className="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-muted-foreground text-xs transition-colors hover:bg-white/10 hover:text-foreground"
+                  className="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-muted-foreground text-xs transition-colors hover:bg-black/6 dark:hover:bg-white/10 hover:text-foreground"
                   onClick={(e) => {
                     e.stopPropagation()
                     onPaste()
@@ -330,7 +330,7 @@ function LevelRow({
                 </button>
               )}
               <button
-                className="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-muted-foreground text-xs transition-colors enabled:hover:bg-white/10 enabled:hover:text-red-400 disabled:cursor-not-allowed disabled:opacity-50"
+                className="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-muted-foreground text-xs transition-colors enabled:hover:bg-black/6 dark:enabled:hover:bg-white/10 enabled:hover:text-red-600 dark:enabled:hover:text-red-400 disabled:cursor-not-allowed disabled:opacity-50"
                 disabled={!canDeleteLevel}
                 onClick={(e) => {
                   e.stopPropagation()
@@ -435,7 +435,7 @@ function UnitFocusChip() {
       <span className="truncate">{focusedUnit.name || 'Unit'}</span>
       <button
         aria-label="Exit unit focus"
-        className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-white/10 hover:text-foreground"
+        className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-black/6 dark:hover:bg-white/10 hover:text-foreground"
         onClick={() => leaveUnitFocus()}
         title="Exit unit focus"
         type="button"
@@ -632,7 +632,7 @@ export function FloatingLevelSelector() {
   const sortableLevelIds = reversedLevels.map((level) => level.id)
 
   const addButtonClass =
-    'absolute left-1/2 z-10 flex h-4 w-4 -translate-x-1/2 items-center justify-center rounded-full border border-border/80 bg-neutral-800 text-muted-foreground/60 shadow-md transition-colors hover:bg-neutral-700 hover:text-foreground'
+    'absolute left-1/2 z-10 flex h-4 w-4 -translate-x-1/2 items-center justify-center rounded-full border border-border/80 bg-white text-muted-foreground/60 shadow-md transition-colors hover:bg-neutral-100 hover:text-foreground dark:bg-neutral-800 dark:hover:bg-neutral-700'
 
   return (
     <>
diff --git a/packages/editor/src/components/ui/helpers/contextual-helper-panel.tsx b/packages/editor/src/components/ui/helpers/contextual-helper-panel.tsx
index ab15e0e02f..aebb139ab9 100644
--- a/packages/editor/src/components/ui/helpers/contextual-helper-panel.tsx
+++ b/packages/editor/src/components/ui/helpers/contextual-helper-panel.tsx
@@ -73,14 +73,16 @@ function ShortcutSequence({
                   <span className="text-[9px] text-muted-foreground/70">/</span>
                 ) : null}
                 <ShortcutToken
-                  className={cn(TOKEN_CLASS, active && 'border-white bg-white text-black shadow-sm')}
+                  className={cn(TOKEN_CLASS, active &&
+                      'border-foreground bg-foreground text-background shadow-sm dark:border-white dark:bg-white dark:text-black')}
                   value={alternative}
                 />
               </Fragment>
             ))
           ) : (
             <ShortcutToken
-              className={cn(TOKEN_CLASS, active && 'border-white bg-white text-black shadow-sm')}
+              className={cn(TOKEN_CLASS, active &&
+                      'border-foreground bg-foreground text-background shadow-sm dark:border-white dark:bg-white dark:text-black')}
               value={entry}
             />
           )}
@@ -431,7 +433,7 @@ function HintRow({ hint }: { hint: ContextualShortcutHint }) {
         <div
           className={cn(
             'text-xs leading-5',
-            hint.active ? 'font-medium text-white' : 'text-muted-foreground',
+            hint.active ? 'font-medium text-foreground dark:text-white' : 'text-muted-foreground',
           )}
         >
           {hint.label}
diff --git a/packages/editor/src/components/ui/panels/collections/collections-popover.tsx b/packages/editor/src/components/ui/panels/collections/collections-popover.tsx
index 0bed2750bd..b8d7fa48c3 100644
--- a/packages/editor/src/components/ui/panels/collections/collections-popover.tsx
+++ b/packages/editor/src/components/ui/panels/collections/collections-popover.tsx
@@ -106,7 +106,7 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
             </span>
           </div>
           <button
-            className="flex items-center gap-1 rounded-md px-2 py-1 font-medium text-[11px] text-muted-foreground transition-colors hover:bg-white/10 hover:text-foreground"
+            className="flex items-center gap-1 rounded-md px-2 py-1 font-medium text-[11px] text-muted-foreground transition-colors hover:bg-black/6 dark:hover:bg-white/10 hover:text-foreground"
             onClick={() => {
               setShowCreateInput((v) => !v)
               setCreateName('')
@@ -120,7 +120,7 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
 
         {/* Create input */}
         {showCreateInput && (
-          <div className="flex items-center gap-1.5 border-border/50 border-b bg-white/5 px-3 py-2">
+          <div className="flex items-center gap-1.5 border-border/50 border-b bg-black/4 dark:bg-white/5 px-3 py-2">
             <input
               autoFocus
               className="min-w-0 flex-1 rounded-md border border-border/50 bg-background/50 px-2 py-1 text-foreground text-xs outline-none placeholder:text-muted-foreground/60 focus:border-ring focus:ring-1 focus:ring-ring/30"
@@ -144,7 +144,7 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
               <Check className="h-3.5 w-3.5" />
             </button>
             <button
-              className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-white/10"
+              className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-black/6 dark:hover:bg-white/10"
               onClick={() => {
                 setShowCreateInput(false)
                 setCreateName('')
@@ -186,7 +186,7 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
                       </span>
                       <div className="flex shrink-0 items-center gap-1">
                         <button
-                          className="rounded-md bg-red-500/20 px-2 py-0.5 font-medium text-[11px] text-red-400 transition-colors hover:bg-red-500/30"
+                          className="rounded-md bg-red-500/20 px-2 py-0.5 font-medium text-[11px] text-red-600 dark:text-red-400 transition-colors hover:bg-red-500/30"
                           onClick={() => {
                             deleteCollection(collection.id)
                             setDeletingId(null)
@@ -196,7 +196,7 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
                           Delete
                         </button>
                         <button
-                          className="rounded-md px-2 py-0.5 font-medium text-[11px] text-muted-foreground transition-colors hover:bg-white/10"
+                          className="rounded-md px-2 py-0.5 font-medium text-[11px] text-muted-foreground transition-colors hover:bg-black/6 dark:hover:bg-white/10"
                           onClick={() => setDeletingId(null)}
                           type="button"
                         >
@@ -229,7 +229,7 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
                         <Check className="h-3.5 w-3.5" />
                       </button>
                       <button
-                        className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-white/10"
+                        className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-black/6 dark:hover:bg-white/10"
                         onClick={() => setRenamingId(null)}
                         type="button"
                       >
@@ -241,7 +241,7 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
 
                 return (
                   <li key={collection.id}>
-                    <div className="group flex items-center gap-2 px-3 py-2 transition-colors hover:bg-white/5">
+                    <div className="group flex items-center gap-2 px-3 py-2 transition-colors hover:bg-black/4 dark:hover:bg-white/5">
                       {/* Color dot — click to pick color */}
                       <ColorDot
                         color={collection.color ?? '#6366f1'}
@@ -299,7 +299,7 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
                       <DropdownMenu modal={false}>
                         <DropdownMenuTrigger asChild>
                           <button
-                            className="flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground opacity-0 transition-colors hover:bg-white/10 hover:text-foreground group-hover:opacity-100"
+                            className="flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground opacity-0 transition-colors hover:bg-black/6 dark:hover:bg-white/10 hover:text-foreground group-hover:opacity-100"
                             type="button"
                           >
                             <MoreHorizontal className="h-3.5 w-3.5" />
diff --git a/packages/editor/src/components/ui/panels/mobile-panel-sheet.tsx b/packages/editor/src/components/ui/panels/mobile-panel-sheet.tsx
index bcad6df89e..92c086096b 100644
--- a/packages/editor/src/components/ui/panels/mobile-panel-sheet.tsx
+++ b/packages/editor/src/components/ui/panels/mobile-panel-sheet.tsx
@@ -56,7 +56,7 @@ export function MobilePanelSheet({ open, onClose, icon, title, children }: Mobil
       {open && (
         <motion.div
           animate={{ y: 0 }}
-          className="dark fixed right-0 bottom-0 left-0 z-[60] flex flex-col overflow-hidden rounded-t-2xl bg-sidebar text-sidebar-foreground shadow-[0_-8px_24px_rgba(0,0,0,0.24)]"
+          className="fixed right-0 bottom-0 left-0 z-[60] flex flex-col overflow-hidden rounded-t-2xl bg-sidebar text-sidebar-foreground shadow-[0_-8px_24px_rgba(0,0,0,0.24)]"
           drag="y"
           dragConstraints={{ top: 0, bottom: 0 }}
           dragElastic={{ top: 0, bottom: 0.4 }}
@@ -89,7 +89,7 @@ export function MobilePanelSheet({ open, onClose, icon, title, children }: Mobil
             </div>
             <button
               aria-label="Close"
-              className="flex h-8 w-8 items-center justify-center rounded-md bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-[#3e3e3e] hover:text-foreground"
+              className="flex h-8 w-8 items-center justify-center rounded-md bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground"
               onClick={onClose}
               type="button"
             >
diff --git a/packages/editor/src/components/ui/panels/mobile-selection-bar.tsx b/packages/editor/src/components/ui/panels/mobile-selection-bar.tsx
index 577879e6f4..7fc15324e5 100644
--- a/packages/editor/src/components/ui/panels/mobile-selection-bar.tsx
+++ b/packages/editor/src/components/ui/panels/mobile-selection-bar.tsx
@@ -18,7 +18,7 @@ interface MobileSelectionBarProps {
 }
 
 const ACTION_BTN =
-  'flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-white/8 hover:text-foreground'
+  'flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-black/5 dark:hover:bg-white/8 hover:text-foreground'
 
 export function MobileSelectionBar({
   node,
@@ -40,7 +40,7 @@ export function MobileSelectionBar({
       <button
         aria-label={`Edit ${resolvedLabel}`}
         className={cn(
-          'flex min-w-0 flex-1 items-center gap-2 rounded-lg px-2 text-left transition-colors hover:bg-white/8',
+          'flex min-w-0 flex-1 items-center gap-2 rounded-lg px-2 text-left transition-colors hover:bg-black/5 dark:hover:bg-white/8',
         )}
         onClick={onEdit}
         type="button"
@@ -80,7 +80,10 @@ export function MobileSelectionBar({
         </button>
         <button
           aria-label="Delete"
-          className={cn(ACTION_BTN, 'hover:bg-red-500/15 hover:text-red-400')}
+          className={cn(
+            ACTION_BTN,
+            'hover:bg-red-500/15 hover:text-red-600 dark:hover:bg-red-500/15 dark:hover:text-red-400',
+          )}
           onClick={(e) => {
             stop(e)
             onDelete()
diff --git a/packages/editor/src/components/ui/panels/multi-selection-panel.tsx b/packages/editor/src/components/ui/panels/multi-selection-panel.tsx
index 17a9f56528..9ab8a01d53 100644
--- a/packages/editor/src/components/ui/panels/multi-selection-panel.tsx
+++ b/packages/editor/src/components/ui/panels/multi-selection-panel.tsx
@@ -147,8 +147,8 @@ export function MultiSelectionActions() {
         onClick={() => duplicateSelectionAndPickUp()}
       />
       <ActionButton
-        className="min-w-20 px-2 border-red-500/40 text-red-200 hover:bg-red-500/15"
-        icon={<Trash2 className="h-4 w-4 text-red-400" />}
+        className="min-w-20 px-2 border-red-500/40 text-red-700 dark:text-red-200 hover:bg-red-500/15"
+        icon={<Trash2 className="h-4 w-4 text-red-600 dark:text-red-400" />}
         label="Delete"
         onClick={() => deleteSelection()}
       />
diff --git a/packages/editor/src/components/ui/panels/panel-wrapper.tsx b/packages/editor/src/components/ui/panels/panel-wrapper.tsx
index ae30936196..b2c5800188 100644
--- a/packages/editor/src/components/ui/panels/panel-wrapper.tsx
+++ b/packages/editor/src/components/ui/panels/panel-wrapper.tsx
@@ -327,7 +327,7 @@ export function PanelWrapper({
           <div className={cn('flex min-w-0 items-center gap-2', titleContent && 'flex-1 pr-2')}>
             {onBack && (
               <button
-                className="mr-1 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-[#3e3e3e] hover:text-foreground"
+                className="mr-1 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground"
                 onClick={onBack}
                 type="button"
               >
@@ -374,7 +374,7 @@ export function PanelWrapper({
           <div className="flex items-center gap-1">
             {onReset && (
               <button
-                className="flex h-7 w-7 items-center justify-center rounded-md bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-[#3e3e3e] hover:text-foreground"
+                className="flex h-7 w-7 items-center justify-center rounded-md bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground"
                 onClick={onReset}
                 type="button"
               >
@@ -395,8 +395,8 @@ export function PanelWrapper({
                   className={cn(
                     'flex h-7 w-7 items-center justify-center rounded-md transition-colors',
                     isActive
-                      ? 'bg-cyan-500/20 text-cyan-400 hover:bg-cyan-500/30'
-                      : 'bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground',
+                      ? 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-400 hover:bg-cyan-500/30'
+                      : 'bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground',
                   )}
                   key={extension.id}
                   onClick={() =>
@@ -412,7 +412,7 @@ export function PanelWrapper({
             <button
               aria-expanded={!collapsed}
               aria-label={collapsed ? 'Expand panel' : 'Collapse panel'}
-              className="flex h-7 w-7 items-center justify-center rounded-md bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-[#3e3e3e] hover:text-foreground"
+              className="flex h-7 w-7 items-center justify-center rounded-md bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground"
               onClick={handleCardToggle}
               type="button"
             >
@@ -422,7 +422,7 @@ export function PanelWrapper({
             </button>
             {onClose && (
               <button
-                className="flex h-7 w-7 items-center justify-center rounded-md bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-[#3e3e3e] hover:text-foreground"
+                className="flex h-7 w-7 items-center justify-center rounded-md bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground"
                 onClick={onClose}
                 type="button"
               >
diff --git a/packages/editor/src/components/ui/panels/parametric-field-control.tsx b/packages/editor/src/components/ui/panels/parametric-field-control.tsx
index dfea2aaa90..271f5e8374 100644
--- a/packages/editor/src/components/ui/panels/parametric-field-control.tsx
+++ b/packages/editor/src/components/ui/panels/parametric-field-control.tsx
@@ -82,7 +82,7 @@ export function ParametricFieldControl({
         <div className="flex items-center justify-between px-3 py-2">
           <span className="text-foreground/80 text-xs">{prettifyKey(key)}</span>
           <select
-            className="rounded-md border border-border/50 bg-[#2C2C2E] px-2 py-1 text-foreground text-xs focus:outline-none focus:ring-1 focus:ring-foreground/30"
+            className="rounded-md border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-2 py-1 text-foreground text-xs focus:outline-none focus:ring-1 focus:ring-foreground/30"
             onChange={(e) => apply(e.target.value)}
             value={mixed ? '' : str}
           >
@@ -119,7 +119,7 @@ export function ParametricFieldControl({
               value={str}
             />
             <input
-              className="w-20 rounded-md border border-border/50 bg-[#2C2C2E] px-2 py-1 text-foreground text-xs focus:outline-none focus:ring-1 focus:ring-foreground/30"
+              className="w-20 rounded-md border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-2 py-1 text-foreground text-xs focus:outline-none focus:ring-1 focus:ring-foreground/30"
               onChange={(e) => apply(e.target.value)}
               type="text"
               value={mixed ? 'Mixed' : str}
diff --git a/packages/editor/src/components/ui/panels/parametric-inspector.tsx b/packages/editor/src/components/ui/panels/parametric-inspector.tsx
index fbc65c7b12..468741fd8a 100644
--- a/packages/editor/src/components/ui/panels/parametric-inspector.tsx
+++ b/packages/editor/src/components/ui/panels/parametric-inspector.tsx
@@ -180,20 +180,20 @@ export function ParametricInspector({
                 <>
                   <ActionButton
                     className="w-full flex-none"
-                    icon={<Trash2 className="h-4 w-4 text-red-400" />}
+                    icon={<Trash2 className="h-4 w-4 text-red-600 dark:text-red-400" />}
                     label="Delete"
                     onClick={() => handleDelete(false)}
                   />
                   <ActionButton
                     className="w-full flex-none"
-                    icon={<Trash2 className="h-4 w-4 text-red-400" />}
+                    icon={<Trash2 className="h-4 w-4 text-red-600 dark:text-red-400" />}
                     label="Delete with contents"
                     onClick={() => handleDelete(true)}
                   />
                 </>
               ) : (
                 <ActionButton
-                  className="border-red-500/40 text-red-200 hover:bg-red-500/15"
+                  className="border-red-500/40 text-red-700 dark:text-red-200 hover:bg-red-500/15"
                   icon={<Trash2 className="h-4 w-4" />}
                   label="Delete"
                   onClick={() => handleDelete()}
diff --git a/packages/editor/src/components/ui/sidebar/app-sidebar.tsx b/packages/editor/src/components/ui/sidebar/app-sidebar.tsx
index be4fa28ea5..95c38b8748 100644
--- a/packages/editor/src/components/ui/sidebar/app-sidebar.tsx
+++ b/packages/editor/src/components/ui/sidebar/app-sidebar.tsx
@@ -78,7 +78,7 @@ export function AppSidebar({
 
   return (
     <>
-      <div className={cn('dark flex h-full w-full bg-sidebar text-sidebar-foreground')}>
+      <div className="flex h-full w-full bg-sidebar text-sidebar-foreground">
         {/* Icon Rail */}
         <IconRail
           activePanel={activePanel}
diff --git a/packages/editor/src/components/ui/sidebar/icon-rail.tsx b/packages/editor/src/components/ui/sidebar/icon-rail.tsx
index b1853a337b..52996cb3e7 100644
--- a/packages/editor/src/components/ui/sidebar/icon-rail.tsx
+++ b/packages/editor/src/components/ui/sidebar/icon-rail.tsx
@@ -65,7 +65,7 @@ export function IconRail({
           <button
             className={cn(
               'flex h-9 w-9 items-center justify-center rounded-lg transition-all',
-              isActive ? 'bg-accent' : 'hover:bg-accent',
+              isActive ? 'bg-sidebar-accent' : 'hover:bg-sidebar-accent',
             )}
             onClick={() => onPanelChange(panel.id)}
             type="button"
@@ -107,7 +107,7 @@ export function IconRail({
               <button
                 className={cn(
                   'flex h-9 w-9 items-center justify-center rounded-lg transition-all',
-                  isActive ? 'bg-accent' : 'hover:bg-accent',
+                  isActive ? 'bg-sidebar-accent' : 'hover:bg-sidebar-accent',
                 )}
                 onClick={() => onPanelChange(panel.id)}
                 type="button"
@@ -138,7 +138,7 @@ export function IconRail({
               <button
                 className={cn(
                   'flex h-9 w-9 items-center justify-center rounded-lg transition-all',
-                  isActive ? 'bg-accent' : 'hover:bg-accent',
+                  isActive ? 'bg-sidebar-accent' : 'hover:bg-sidebar-accent',
                 )}
                 onClick={() => onPanelChange(panel.id)}
                 type="button"
diff --git a/packages/editor/src/components/ui/sidebar/panels/items-panel/function-tree-panel.tsx b/packages/editor/src/components/ui/sidebar/panels/items-panel/function-tree-panel.tsx
index f11028a217..4113ff5c6f 100644
--- a/packages/editor/src/components/ui/sidebar/panels/items-panel/function-tree-panel.tsx
+++ b/packages/editor/src/components/ui/sidebar/panels/items-panel/function-tree-panel.tsx
@@ -136,7 +136,7 @@ export function FunctionTreePanel({
                       'relative flex aspect-square items-center justify-center rounded-xl transition-all duration-200',
                       isActive
                         ? 'bg-primary/10 ring-1 ring-primary/50'
-                        : 'bg-muted/40 opacity-70 grayscale hover:bg-muted hover:opacity-100 hover:grayscale-0',
+                        : 'bg-black/4 opacity-70 grayscale hover:bg-black/8 hover:opacity-100 hover:grayscale-0 dark:bg-muted/40 dark:hover:bg-muted',
                     )}
                     onClick={() => {
                       triggerSFX('sfx:menu-click')
diff --git a/packages/editor/src/components/ui/sidebar/panels/items-panel/index.tsx b/packages/editor/src/components/ui/sidebar/panels/items-panel/index.tsx
index df81988a6f..89f2ee65c7 100644
--- a/packages/editor/src/components/ui/sidebar/panels/items-panel/index.tsx
+++ b/packages/editor/src/components/ui/sidebar/panels/items-panel/index.tsx
@@ -279,7 +279,7 @@ function LegacyItemsPanel({
                     'cursor-pointer rounded-md px-2 py-0.5 font-medium text-xs transition-colors',
                     activePlacementTag === null
                       ? 'bg-blue-500 text-white'
-                      : 'bg-blue-950/50 text-blue-300 hover:bg-blue-900/60 hover:text-blue-200',
+                      : 'bg-blue-50 dark:bg-blue-950/50 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-900/60 hover:text-blue-800 dark:hover:text-blue-200',
                   )}
                   onClick={() => setActivePlacementTag(null)}
                   type="button"
@@ -297,8 +297,8 @@ function LegacyItemsPanel({
                         isActive
                           ? 'bg-blue-500 text-white'
                           : isEmpty
-                            ? 'cursor-not-allowed bg-zinc-800 text-zinc-500'
-                            : 'bg-blue-950/50 text-blue-300 hover:bg-blue-900/60 hover:text-blue-200',
+                            ? 'cursor-not-allowed bg-zinc-100 dark:bg-zinc-800 text-zinc-400 dark:text-zinc-500'
+                            : 'bg-blue-50 dark:bg-blue-950/50 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-900/60 hover:text-blue-800 dark:hover:text-blue-200',
                       )}
                       disabled={isEmpty}
                       key={tag}
@@ -312,7 +312,7 @@ function LegacyItemsPanel({
                           isActive
                             ? 'text-blue-200'
                             : isEmpty
-                              ? 'text-zinc-600'
+                              ? 'text-zinc-400 dark:text-zinc-600'
                               : 'text-blue-500/70',
                         )}
                       >
@@ -337,7 +337,7 @@ function LegacyItemsPanel({
                         isActive
                           ? 'bg-violet-500 text-white'
                           : isEmpty
-                            ? 'cursor-not-allowed bg-zinc-800 text-zinc-500'
+                            ? 'cursor-not-allowed bg-zinc-100 dark:bg-zinc-800 text-zinc-400 dark:text-zinc-500'
                             : 'bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground',
                       )}
                       disabled={isEmpty}
@@ -352,7 +352,7 @@ function LegacyItemsPanel({
                           isActive
                             ? 'text-violet-200'
                             : isEmpty
-                              ? 'text-zinc-600'
+                              ? 'text-zinc-400 dark:text-zinc-600'
                               : 'text-zinc-500/70',
                         )}
                       >
diff --git a/packages/editor/src/components/ui/sidebar/panels/settings-panel/index.tsx b/packages/editor/src/components/ui/sidebar/panels/settings-panel/index.tsx
index c9e5c1f04d..06f50f6a17 100644
--- a/packages/editor/src/components/ui/sidebar/panels/settings-panel/index.tsx
+++ b/packages/editor/src/components/ui/sidebar/panels/settings-panel/index.tsx
@@ -26,9 +26,12 @@ import {
   Layers,
   ListTree,
   Map as MapIcon,
+  Monitor,
+  Moon,
   Save,
   ChevronDown,
   Send,
+  Sun,
   Trash2,
   Upload,
 } from 'lucide-react'
@@ -55,6 +58,7 @@ import {
   sendGlbToLocalApp,
   waitForLocalImport,
 } from '../../../../../lib/send-to-app'
+import { SegmentedControl } from './../../../../../components/ui/controls/segmented-control'
 import { Button } from './../../../../../components/ui/primitives/button'
 import {
   Dialog,
@@ -302,6 +306,65 @@ export function SettingsSwitchRow({
   )
 }
 
+export type InterfaceTheme = 'system' | 'light' | 'dark'
+
+const INTERFACE_THEME_OPTIONS: { label: ReactNode; value: InterfaceTheme }[] = [
+  {
+    label: (
+      <>
+        <Monitor className="size-3.5" />
+        System
+      </>
+    ),
+    value: 'system',
+  },
+  {
+    label: (
+      <>
+        <Sun className="size-3.5" />
+        Light
+      </>
+    ),
+    value: 'light',
+  },
+  {
+    label: (
+      <>
+        <Moon className="size-3.5" />
+        Dark
+      </>
+    ),
+    value: 'dark',
+  },
+]
+
+/**
+ * The interface theme as a System / Light / Dark row. The editor applies no theme itself: its
+ * chrome follows the host's `.dark` class, so a host that owns the setting passes this row.
+ */
+export function InterfaceThemeRow({
+  onChange,
+  value,
+}: {
+  onChange: (value: InterfaceTheme) => void
+  value: InterfaceTheme
+}) {
+  const labelId = useId()
+  return (
+    <div className="flex flex-col gap-2 py-1 @sm:flex-row @sm:items-center @sm:justify-between @sm:gap-4">
+      <div className="min-w-0 space-y-0.5">
+        <p className="font-medium text-sm" id={labelId}>
+          Interface theme
+        </p>
+        <p className="text-muted-foreground text-xs">System follows your device’s appearance.</p>
+      </div>
+      <div aria-labelledby={labelId} className="w-full shrink-0 @sm:w-60" role="group">
+        <SegmentedControl onChange={onChange} options={INTERFACE_THEME_OPTIONS} value={value} />
+      </div>
+    </div>
+  )
+}
+
 export interface SettingsPanelProps {
   /** Merged onto the scrolling root so hosts can restyle padding (e.g. inside a dialog). */
   className?: string
@@ -313,7 +376,10 @@ export interface SettingsPanelProps {
     field: 'isPrivate' | 'showScansPublic' | 'showGuidesPublic',
     value: boolean,
   ) => Promise<void>
-  /** Rows a host adds under Preferences, for its own features (SettingsSwitchRow). */
+  /**
+   * Rows a host adds under Preferences, for its own features and settings (SettingsSwitchRow,
+   * InterfaceThemeRow).
+   */
   preferences?: ReactNode
 }
 
@@ -1214,7 +1280,7 @@ export function SettingsPanel({
                 </Button>
               </div>
             </DialogTrigger>
-            <DialogContent className="h-[80vh] max-w-[95vw] gap-0 overflow-hidden border-0 bg-[#1e1e1e] p-0 shadow-none sm:max-w-5xl">
+            <DialogContent className="dark h-[80vh] max-w-[95vw] gap-0 overflow-hidden border-0 bg-[#1e1e1e] p-0 shadow-none sm:max-w-5xl">
               <DialogTitle className="sr-only">Scene Graph</DialogTitle>
               <div
                 className="flex h-full min-h-0 w-full min-w-0 *:h-full *:w-full *:overflow-y-auto"
diff --git a/packages/editor/src/components/ui/sidebar/panels/settings-panel/interface-theme.test.tsx b/packages/editor/src/components/ui/sidebar/panels/settings-panel/interface-theme.test.tsx
new file mode 100644
index 0000000000..2d3808a380
--- /dev/null
+++ b/packages/editor/src/components/ui/sidebar/panels/settings-panel/interface-theme.test.tsx
@@ -0,0 +1,20 @@
+import { describe, expect, test } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { InterfaceThemeRow, SettingsPanel } from '.'
+
+const pressedLabels = (html: string) =>
+  [...html.matchAll(/aria-pressed="true"[^>]*>(?:<[^>]+>)*([^<]+)/g)].map((match) => match[1])
+
+describe('Interface theme setting', () => {
+  test("the row shows the host's value pressed", () => {
+    const html = renderToStaticMarkup(<InterfaceThemeRow onChange={() => {}} value="light" />)
+    expect(html).toContain('Interface theme')
+    expect(pressedLabels(html)).toEqual(['Light'])
+  })
+
+  test('Settings shows the row a host passes, and none without it', () => {
+    const row = <InterfaceThemeRow onChange={() => {}} value="system" />
+    expect(renderToStaticMarkup(<SettingsPanel preferences={row} />)).toContain('Interface theme')
+    expect(renderToStaticMarkup(<SettingsPanel />)).not.toContain('Interface theme')
+  })
+})
diff --git a/packages/editor/src/components/ui/sidebar/panels/site-panel/index.tsx b/packages/editor/src/components/ui/sidebar/panels/site-panel/index.tsx
index d9753d722d..bfcf92f41a 100644
--- a/packages/editor/src/components/ui/sidebar/panels/site-panel/index.tsx
+++ b/packages/editor/src/components/ui/sidebar/panels/site-panel/index.tsx
@@ -200,7 +200,7 @@ const PropertyLineSection = memo(function PropertyLineSection() {
           className={cn(
             'flex h-6 w-6 cursor-pointer items-center justify-center rounded transition-colors',
             isEditing
-              ? 'bg-orange-500/20 text-orange-400'
+              ? 'bg-orange-500/20 text-orange-700 dark:text-orange-400'
               : 'text-muted-foreground hover:bg-accent',
           )}
           onClick={handleToggleEdit}
@@ -256,7 +256,7 @@ const PropertyLineSection = memo(function PropertyLineSection() {
                   className={cn(
                     'flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded',
                     points.length > 3
-                      ? 'text-muted-foreground hover:bg-red-500/20 hover:text-red-400'
+                      ? 'text-muted-foreground hover:bg-red-500/20 hover:text-red-600 dark:hover:text-red-400'
                       : 'cursor-not-allowed text-muted-foreground/30',
                   )}
                   disabled={points.length <= 3}
diff --git a/packages/editor/src/components/ui/sidebar/panels/zone-panel/index.tsx b/packages/editor/src/components/ui/sidebar/panels/zone-panel/index.tsx
index 914bb85dac..71f81b0589 100644
--- a/packages/editor/src/components/ui/sidebar/panels/zone-panel/index.tsx
+++ b/packages/editor/src/components/ui/sidebar/panels/zone-panel/index.tsx
@@ -195,14 +195,14 @@ export function ZonePanel() {
           />
           <ActionButton
             className="w-full flex-none"
-            icon={<Trash2 className="h-4 w-4 text-red-400" />}
+            icon={<Trash2 className="h-4 w-4 text-red-600 dark:text-red-400" />}
             label="Delete"
             onClick={() => deleteSelectedZone(false)}
             type="button"
           />
           <ActionButton
             className="w-full flex-none"
-            icon={<Trash2 className="h-4 w-4 text-red-400" />}
+            icon={<Trash2 className="h-4 w-4 text-red-600 dark:text-red-400" />}
             label="Delete with contents"
             onClick={() => deleteSelectedZone(true)}
             type="button"
diff --git a/packages/editor/src/components/ui/sidebar/tab-bar.tsx b/packages/editor/src/components/ui/sidebar/tab-bar.tsx
index e65caa5ddc..89f7c2352d 100644
--- a/packages/editor/src/components/ui/sidebar/tab-bar.tsx
+++ b/packages/editor/src/components/ui/sidebar/tab-bar.tsx
@@ -47,8 +47,8 @@ export function TabBar({ tabs, activeTab, onTabChange }: TabBarProps) {
             className={cn(
               'relative h-7 rounded-md px-3 font-medium text-sm transition-colors',
               isActive
-                ? 'bg-accent text-foreground'
-                : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground',
+                ? 'bg-sidebar-accent text-foreground'
+                : 'text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground',
             )}
             key={tab.id}
             onClick={() => {
@@ -101,8 +101,8 @@ export function IconRail({ tabs, activeTab, collapsed, onIconClick }: IconRailPr
             className={cn(
               'group flex h-11 w-11 items-center justify-center rounded-xl transition-all duration-200 [&_img]:transition-[opacity,filter] [&_img]:duration-200',
               showActive
-                ? 'bg-accent text-foreground shadow-sm [&_img]:opacity-100 [&_img]:grayscale-0'
-                : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground [&_img]:opacity-60 [&_img]:grayscale hover:[&_img]:opacity-100 hover:[&_img]:grayscale-0',
+                ? 'bg-sidebar-accent text-foreground shadow-sm [&_img]:opacity-100 [&_img]:grayscale-0'
+                : 'text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground [&_img]:opacity-60 [&_img]:grayscale hover:[&_img]:opacity-100 hover:[&_img]:grayscale-0',
             )}
             onClick={() => {
               triggerSFX('sfx:menu-click')
diff --git a/packages/editor/src/components/viewer/viewer-controls-bar.tsx b/packages/editor/src/components/viewer/viewer-controls-bar.tsx
index 732aa6d718..9a0f24682c 100644
--- a/packages/editor/src/components/viewer/viewer-controls-bar.tsx
+++ b/packages/editor/src/components/viewer/viewer-controls-bar.tsx
@@ -104,13 +104,14 @@ function VisibilityMenu({
           className="hover:bg-white/5 hover:text-foreground"
           label="Visibility"
           size="icon"
+          tooltipClassName="dark"
           tooltipSide="top"
           variant="ghost"
         >
           <Eye className="h-5 w-5" />
         </ActionButton>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="center" className="min-w-44" side="top">
+      <DropdownMenuContent align="center" className="dark min-w-44" side="top">
         {canShowScans && (
           <DropdownMenuItem
             onSelect={(e) => keepOpen(e, () => useViewer.getState().setShowScans(!showScans))}
@@ -161,13 +162,14 @@ function DisplayMenu() {
           className="hover:bg-white/5 hover:text-foreground"
           label="Display settings"
           size="icon"
+          tooltipClassName="dark"
           tooltipSide="top"
           variant="ghost"
         >
           <SlidersHorizontal className="h-5 w-5" />
         </ActionButton>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="center" className="min-w-56" side="top">
+      <DropdownMenuContent align="center" className="dark min-w-56" side="top">
         <DropdownMenuItem
           onSelect={(e) => keepOpen(e, () => useViewer.getState().setShadows(!shadows))}
         >
@@ -208,7 +210,7 @@ function DisplayMenu() {
             <span>Render</span>
             <span className="ml-auto text-muted-foreground text-xs">{activeShading.name}</span>
           </DropdownMenuSubTrigger>
-          <DropdownMenuSubContent className="min-w-56">
+          <DropdownMenuSubContent className="dark min-w-56">
             {SHADING_OPTIONS.map((option) => {
               const OptionIcon = option.icon
               return (
@@ -233,12 +235,12 @@ function DisplayMenu() {
         <DropdownMenuSub>
           <DropdownMenuSubTrigger>
             <SwatchBook className="h-4 w-4" />
-            <span>Theme</span>
+            <span>Scene theme</span>
             <span className="ml-auto truncate text-muted-foreground text-xs">
               {activeTheme.name}
             </span>
           </DropdownMenuSubTrigger>
-          <DropdownMenuSubContent className="min-w-48">
+          <DropdownMenuSubContent className="dark min-w-48">
             {SCENE_THEMES.map((t) => {
               const swatches = (['wall', 'roof', 'floor', 'glazing'] as const).map(
                 (role) => t.clayTints?.[role] ?? CLAY_PALETTE[role],
@@ -271,7 +273,7 @@ function DisplayMenu() {
             <span>Edges</span>
             <span className="ml-auto text-muted-foreground text-xs">{activeEdges.name}</span>
           </DropdownMenuSubTrigger>
-          <DropdownMenuSubContent className="min-w-56">
+          <DropdownMenuSubContent className="dark min-w-56">
             {EDGE_OPTIONS.map((option) => (
               <DropdownMenuItem
                 key={option.id}
@@ -361,6 +363,7 @@ export const ViewerControlsBar = ({
               useViewer.getState().setLevelMode(modes[nextIndex] ?? 'stacked')
             }}
             size="icon"
+            tooltipClassName="dark"
             tooltipSide="top"
             variant="ghost"
           >
@@ -384,6 +387,7 @@ export const ViewerControlsBar = ({
                 useViewer.getState().setWallMode(modes[nextIndex] ?? 'cutaway')
               }}
               size="icon"
+              tooltipClassName="dark"
               tooltipSide="top"
               variant="ghost"
             >
@@ -407,6 +411,7 @@ export const ViewerControlsBar = ({
             label={`Walkthrough: ${walkthroughActive ? 'On' : 'Off'}`}
             onClick={onWalkthroughToggle}
             size="icon"
+            tooltipClassName="dark"
             tooltipSide="top"
             variant="ghost"
           >
@@ -416,7 +421,7 @@ export const ViewerControlsBar = ({
           <div className="mx-1 h-5 w-px bg-border/40" />
 
           {/* Follow Pascal */}
-          <FollowPascalToggle className="hidden sm:inline-flex" />
+          <FollowPascalToggle className="hidden sm:inline-flex" tooltipClassName="dark" />
 
           {/* Camera actions */}
           <ActionButton
@@ -424,6 +429,7 @@ export const ViewerControlsBar = ({
             label="Orbit left"
             onClick={() => emitter.emit('camera-controls:orbit-ccw')}
             size="icon"
+            tooltipClassName="dark"
             tooltipSide="top"
             variant="ghost"
           >
@@ -439,6 +445,7 @@ export const ViewerControlsBar = ({
             label="Orbit right"
             onClick={() => emitter.emit('camera-controls:orbit-cw')}
             size="icon"
+            tooltipClassName="dark"
             tooltipSide="top"
             variant="ghost"
           >
@@ -454,6 +461,7 @@ export const ViewerControlsBar = ({
             label="Top view"
             onClick={() => emitter.emit('camera-controls:top-view')}
             size="icon"
+            tooltipClassName="dark"
             tooltipSide="top"
             variant="ghost"
           >
diff --git a/packages/editor/src/index.tsx b/packages/editor/src/index.tsx
index d8888cdb66..4bf2341229 100644
--- a/packages/editor/src/index.tsx
+++ b/packages/editor/src/index.tsx
@@ -300,6 +300,8 @@ export type { ExtraPanel } from './components/ui/sidebar/icon-rail'
 export { ItemsPanel } from './components/ui/sidebar/panels/items-panel'
 export type { FunctionTreeNode } from './components/ui/sidebar/panels/items-panel/function-tree-panel'
 export {
+  type InterfaceTheme,
+  InterfaceThemeRow,
   type ProjectVisibility,
   SettingsPanel,
   type SettingsPanelProps,
diff --git a/packages/editor/src/lib/sfx-player.test.ts b/packages/editor/src/lib/sfx-player.test.ts
index d909ca4c2e..55da0ed03a 100644
--- a/packages/editor/src/lib/sfx-player.test.ts
+++ b/packages/editor/src/lib/sfx-player.test.ts
@@ -1,10 +1,10 @@
 import { afterAll, beforeEach, describe, expect, mock, test } from 'bun:test'
+import useAudio from '../store/use-audio'
 
 type FakeContext = { id: string }
 
 let activeContext: FakeContext = { id: 'first' }
 let initialState: 'loaded' | 'loading' = 'loaded'
-let muted = false
 let throwOnPlay = false
 const instances: FakeHowl[] = []
 
@@ -92,12 +92,6 @@ const fakeHowler = {
 }
 
 mock.module('howler', () => ({ Howl: FakeHowl, Howler: fakeHowler }))
-mock.module('../store/use-audio', () => ({
-  default: {
-    getState: () => ({ masterVolume: 100, muted, sfxVolume: 100 }),
-    subscribe: () => () => {},
-  },
-}))
 
 const { disposeSFX, playSFX, preloadSFX, startLoopSFX, stopLoopSFX, updateSFXVolumes } =
   await import('./sfx-player')
@@ -107,7 +101,7 @@ beforeEach(() => {
   disposeSFXBus()
   activeContext = { id: 'first' }
   initialState = 'loaded'
-  muted = false
+  useAudio.setState({ masterVolume: 100, muted: false, sfxVolume: 100 })
   throwOnPlay = false
   instances.length = 0
 })
@@ -141,11 +135,11 @@ describe('SFX audio context lifecycle', () => {
   })
 
   test('muted startup neither starts audio nor consumes a later fresh cue', () => {
-    muted = true
+    useAudio.setState({ muted: true })
     initSFXBus()
     triggerSFX('sfx:item-place')
     expect(instances.every((sound) => sound.playCount === 0)).toBe(true)
-    muted = false
+    useAudio.setState({ muted: false })
     updateSFXVolumes()
     triggerSFX('sfx:item-place')
     expect(instances.reduce((sum, sound) => sum + sound.playCount, 0)).toBe(1)
@@ -279,7 +273,7 @@ describe('SFX audio context lifecycle', () => {
     startLoopSFX('terrainLower')
     const lower = instances.find((sound) => sound.loop && sound.playCount === 1)
 
-    muted = true
+    useAudio.setState({ muted: true })
     updateSFXVolumes()
 
     expect(lower?.fadeCalls.at(-1)).toEqual([0.2, 0, 90, 1])
diff --git a/packages/nodes/src/block/panel.tsx b/packages/nodes/src/block/panel.tsx
index a079fbe2c0..1f5f593fdc 100644
--- a/packages/nodes/src/block/panel.tsx
+++ b/packages/nodes/src/block/panel.tsx
@@ -39,7 +39,7 @@ import {
 const SLOT_TRAILING_ACTION_CLASS =
   'm-2 ml-0 flex w-8 shrink-0 items-center justify-center rounded-md'
 const SLOT_DISABLED_ACTION_CLASS =
-  'disabled:cursor-not-allowed disabled:opacity-45 disabled:hover:bg-[#2C2C2E] disabled:active:bg-[#2C2C2E]'
+  'disabled:cursor-not-allowed disabled:opacity-45 disabled:hover:bg-black/4 dark:disabled:hover:bg-[#2C2C2E] disabled:active:bg-black/4 dark:disabled:active:bg-[#2C2C2E]'
 const NEW_BLOCK_SLOT_MATERIAL = {
   preset: 'custom',
   properties: {
@@ -319,7 +319,7 @@ export default function BlockPanel() {
           </div>
         ) : null}
 
-        <div className="mt-2 max-h-44 overflow-y-auto rounded-lg border border-border/60 bg-[#252527]">
+        <div className="mt-2 max-h-44 overflow-y-auto rounded-lg border border-border/60 bg-black/3 dark:bg-[#252527]">
           {slotDeclarations.map((slot, index) => {
             const ref = node.slots?.[slot.slotId]
             const active =
@@ -334,7 +334,7 @@ export default function BlockPanel() {
               <div
                 className={`group relative flex min-h-11 items-stretch border-border/50 ${
                   index > 0 ? 'border-t' : ''
-                } ${active ? 'bg-primary/15' : 'hover:bg-white/[0.035]'}`}
+                } ${active ? 'bg-primary/15' : 'hover:bg-black/4 dark:hover:bg-white/[0.035]'}`}
                 key={slot.slotId}
               >
                 <button
@@ -347,7 +347,7 @@ export default function BlockPanel() {
                 />
                 <span className="pointer-events-none relative z-10 flex w-12 shrink-0 items-center justify-center">
                   <span
-                    className="h-7 w-7 shrink-0 rounded-md border border-white/10 bg-cover bg-center shadow-inner"
+                    className="h-7 w-7 shrink-0 rounded-md border border-black/10 dark:border-white/10 bg-cover bg-center shadow-inner"
                     style={{
                       backgroundColor:
                         !ref && slot.slotId !== BLOCK_BODY_SLOT_ID ? '#7768d8' : preview.color,
@@ -388,7 +388,7 @@ export default function BlockPanel() {
                   </span>
                 ) : (
                   <button
-                    className={`${SLOT_TRAILING_ACTION_CLASS} relative z-10 text-muted-foreground transition-colors hover:bg-red-500/15 hover:text-red-300 focus-visible:bg-red-500/15 focus-visible:text-red-300 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-muted-foreground`}
+                    className={`${SLOT_TRAILING_ACTION_CLASS} relative z-10 text-muted-foreground transition-colors hover:bg-red-500/15 hover:text-red-700 dark:hover:text-red-300 focus-visible:bg-red-500/15 focus-visible:text-red-700 dark:focus-visible:text-red-300 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-muted-foreground dark:disabled:hover:text-muted-foreground`}
                     aria-label={`Delete ${slot.label} slot`}
                     disabled={!editing || readOnly}
                     onClick={() => removeMaterialSlot(slot.slotId)}
@@ -408,7 +408,7 @@ export default function BlockPanel() {
         <ActionGroup>
           <ActionButton icon={<Move className="h-4 w-4" />} label="Move" onClick={move} />
           <ActionButton
-            className="border-red-500/40 text-red-200 hover:bg-red-500/15"
+            className="border-red-500/40 text-red-700 dark:text-red-200 hover:bg-red-500/15"
             icon={<Trash2 className="h-4 w-4" />}
             label="Delete"
             onClick={() => {
diff --git a/packages/nodes/src/box-vent/panel.tsx b/packages/nodes/src/box-vent/panel.tsx
index 662bb98d88..2979041553 100644
--- a/packages/nodes/src/box-vent/panel.tsx
+++ b/packages/nodes/src/box-vent/panel.tsx
@@ -413,7 +413,7 @@ export default function BoxVentPanel() {
           />
           <ActionButton
             className="hover:bg-red-500/20"
-            icon={<Trash2 className="h-3.5 w-3.5 text-red-400" />}
+            icon={<Trash2 className="h-3.5 w-3.5 text-red-600 dark:text-red-400" />}
             label="Delete"
             onClick={handleDelete}
           />
diff --git a/packages/nodes/src/cabinet/compartment-card.tsx b/packages/nodes/src/cabinet/compartment-card.tsx
index 4fb5432789..8843b4f2d4 100644
--- a/packages/nodes/src/cabinet/compartment-card.tsx
+++ b/packages/nodes/src/cabinet/compartment-card.tsx
@@ -95,10 +95,10 @@ const DOOR_TYPE_OPTIONS = [
 ] as const
 
 const ICON_BUTTON_CLASS =
-  'flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border/40 bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-[#343437] hover:text-foreground disabled:opacity-30 disabled:hover:bg-[#2C2C2E] disabled:hover:text-muted-foreground'
+  'flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border/40 bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-black/8 dark:hover:bg-[#343437] hover:text-foreground disabled:opacity-30 disabled:hover:bg-black/4 dark:disabled:hover:bg-[#2C2C2E] disabled:hover:text-muted-foreground'
 
 const STEPPER_BUTTON_CLASS =
-  'flex h-8 w-8 items-center justify-center rounded-md border border-border/40 bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-[#343437] hover:text-foreground'
+  'flex h-8 w-8 items-center justify-center rounded-md border border-border/40 bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-black/8 dark:hover:bg-[#343437] hover:text-foreground'
 
 function Stepper({
   label,
@@ -114,7 +114,7 @@ function Stepper({
   max: number
 }) {
   return (
-    <div className="flex items-center justify-between rounded-lg border border-border/30 bg-black/10 px-2 py-1.5">
+    <div className="flex items-center justify-between rounded-lg border border-border/30 bg-black/3 dark:bg-black/10 px-2 py-1.5">
       <span className="text-[11px] font-medium text-muted-foreground">{label}</span>
       <div className="flex items-center gap-1.5">
         <button
@@ -156,7 +156,7 @@ function CompartmentTypeControl({
       ? [...COMPARTMENT_TYPE_CONTROL_OPTIONS, HOOD_TYPE_OPTION]
       : COMPARTMENT_TYPE_CONTROL_OPTIONS
   return (
-    <div className="grid w-full grid-cols-3 gap-1 rounded-lg border border-border/50 bg-[#2C2C2E] p-[3px]">
+    <div className="grid w-full grid-cols-3 gap-1 rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] p-[3px]">
       {options.map((option) => {
         const isSelected = value === option.value
         return (
@@ -164,8 +164,8 @@ function CompartmentTypeControl({
             className={[
               'flex h-8 items-center justify-center rounded-md text-xs font-medium transition-all duration-200',
               isSelected
-                ? 'bg-[#3e3e3e] text-foreground shadow-sm ring-1 ring-border/50'
-                : 'text-muted-foreground hover:bg-white/5 hover:text-foreground',
+                ? 'bg-white dark:bg-[#3e3e3e] text-foreground shadow-sm ring-1 ring-border/50'
+                : 'text-muted-foreground hover:bg-black/4 dark:hover:bg-white/5 hover:text-foreground',
             ].join(' ')}
             key={option.value}
             onClick={() => onChange(option.value)}
@@ -213,7 +213,7 @@ export function CompartmentCard({
   const isHood = isHoodCompartmentType(type)
   const isCooktop = isCooktopCompartmentType(type)
   return (
-    <div className="rounded-lg border border-border/40 bg-[#252527] p-2">
+    <div className="rounded-lg border border-border/40 bg-black/3 dark:bg-[#252527] p-2">
       <div className="flex items-center justify-between pb-1.5">
         <span className="text-[10px] uppercase tracking-wide text-muted-foreground">
           {displayIndex === 0
@@ -240,7 +240,7 @@ export function CompartmentCard({
             <ArrowDown className="h-3.5 w-3.5" />
           </button>
           <button
-            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-red-500/20 bg-red-500/8 text-red-300 transition-colors hover:bg-red-500/15 hover:text-red-200 disabled:opacity-30 disabled:hover:bg-red-500/8"
+            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-red-500/20 bg-red-500/8 text-red-700 dark:text-red-300 transition-colors hover:bg-red-500/15 hover:text-red-700 dark:hover:text-red-200 disabled:opacity-30 disabled:hover:bg-red-500/8"
             disabled={total <= 1}
             onClick={onRemove}
             type="button"
@@ -326,7 +326,7 @@ export function CompartmentCard({
             />
           </div>
           <button
-            className="flex h-8 w-full items-center justify-center gap-1.5 rounded-md border border-border/40 bg-[#2C2C2E] text-xs font-medium text-foreground transition-colors hover:bg-[#343437] disabled:cursor-not-allowed disabled:opacity-40"
+            className="flex h-8 w-full items-center justify-center gap-1.5 rounded-md border border-border/40 bg-black/4 dark:bg-[#2C2C2E] text-xs font-medium text-foreground transition-colors hover:bg-black/8 dark:hover:bg-[#343437] disabled:cursor-not-allowed disabled:opacity-40"
             disabled={
               compartmentDoorType(compartment, width) !== 'single-left' &&
               compartmentDoorType(compartment, width) !== 'single-right'
@@ -381,7 +381,7 @@ export function CompartmentCard({
       )}
 
       {isHood && (
-        <div className="rounded-lg border border-border/30 bg-black/10 px-2 py-1.5 text-[11px] font-medium text-muted-foreground">
+        <div className="rounded-lg border border-border/30 bg-black/3 dark:bg-black/10 px-2 py-1.5 text-[11px] font-medium text-muted-foreground">
           Chimney
         </div>
       )}
diff --git a/packages/nodes/src/cabinet/panel.tsx b/packages/nodes/src/cabinet/panel.tsx
index 03fae6e692..7032682642 100644
--- a/packages/nodes/src/cabinet/panel.tsx
+++ b/packages/nodes/src/cabinet/panel.tsx
@@ -128,7 +128,7 @@ const EMPTY_MODULES: CabinetModuleNodeType[] = []
 const EMPTY_MODULE_IDS: AnyNodeId[] = []
 
 const PRESET_BUTTON_CLASS =
-  'flex h-9 items-center justify-center rounded-md border border-border/40 bg-[#252527] px-3 py-2 text-center text-xs font-medium text-foreground transition-colors hover:border-border/70 hover:bg-[#303033]'
+  'flex h-9 items-center justify-center rounded-md border border-border/40 bg-black/3 dark:bg-[#252527] px-3 py-2 text-center text-xs font-medium text-foreground transition-colors hover:border-border/70 hover:bg-black/6 dark:hover:bg-[#303033]'
 const REFLOW_REJECTED_MESSAGE =
   'No space in this run. No base cabinet can shrink enough to fit this item.'
 
@@ -803,7 +803,7 @@ export default function CabinetPanel() {
               </>
             )}
             {ceilingOverflow > 1e-4 && (
-              <div className="flex gap-1.5 px-1 text-xs leading-5 text-red-300">
+              <div className="flex gap-1.5 px-1 text-xs leading-5 text-red-700 dark:text-red-300">
                 <AlertTriangle className="mt-1 h-3.5 w-3.5 shrink-0" />
                 <span>
                   Finished height extends {(ceilingOverflow * 1000).toFixed(0)} mm above the
@@ -821,7 +821,7 @@ export default function CabinetPanel() {
             <div className="space-y-1 px-1 pb-2 text-xs leading-5">
               {planningReport.errors.map((planningIssue) => (
                 <div
-                  className="flex gap-1.5 text-red-300"
+                  className="flex gap-1.5 text-red-700 dark:text-red-300"
                   key={`${planningIssue.severity}-${planningIssue.code}-${planningIssue.nodeIds.join('-')}`}
                 >
                   <AlertTriangle className="mt-1 h-3.5 w-3.5 shrink-0" />
@@ -830,7 +830,7 @@ export default function CabinetPanel() {
               ))}
               {planningReport.warnings.map((planningIssue) => (
                 <div
-                  className={`flex gap-1.5 ${planningIssue.code === 'ceiling-overflow' ? 'text-red-300' : 'text-amber-300'}`}
+                  className={`flex gap-1.5 ${planningIssue.code === 'ceiling-overflow' ? 'text-red-700 dark:text-red-300' : 'text-amber-700 dark:text-amber-300'}`}
                   key={`${planningIssue.severity}-${planningIssue.code}-${planningIssue.nodeIds.join('-')}`}
                 >
                   <AlertTriangle className="mt-1 h-3.5 w-3.5 shrink-0" />
@@ -866,7 +866,7 @@ export default function CabinetPanel() {
                     ? 'Close cabinet'
                     : 'Open cabinet'
               }
-              className="flex h-7 shrink-0 items-center gap-1.5 rounded-lg border border-border/40 bg-[#2C2C2E] px-2.5 text-[11px] font-medium text-foreground transition-colors hover:bg-[#3e3e3e]"
+              className="flex h-7 shrink-0 items-center gap-1.5 rounded-lg border border-border/40 bg-black/4 dark:bg-[#2C2C2E] px-2.5 text-[11px] font-medium text-foreground transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e]"
               onClick={() => {
                 if (isAnimating) {
                   stopAnimation()
@@ -896,7 +896,7 @@ export default function CabinetPanel() {
         {reflowNotice ? (
           <p
             aria-live="polite"
-            className="px-1 pb-2 text-xs leading-5 text-amber-400"
+            className="px-1 pb-2 text-xs leading-5 text-amber-700 dark:text-amber-400"
             role="status"
           >
             {reflowNotice.message}
diff --git a/packages/nodes/src/cabinet/run-panel.tsx b/packages/nodes/src/cabinet/run-panel.tsx
index df80f7bd9b..004eedf278 100644
--- a/packages/nodes/src/cabinet/run-panel.tsx
+++ b/packages/nodes/src/cabinet/run-panel.tsx
@@ -613,7 +613,7 @@ export function CabinetRunPanel({
         <div className="flex flex-col gap-2 px-1 pb-2">
           {sortedModules.map((module, index) => (
             <div
-              className="flex items-center justify-between rounded-lg border border-border/40 bg-[#252527] px-2 py-2"
+              className="flex items-center justify-between rounded-lg border border-border/40 bg-black/3 dark:bg-[#252527] px-2 py-2"
               key={module.id}
             >
               <button
@@ -630,7 +630,7 @@ export function CabinetRunPanel({
               </button>
               <button
                 aria-label={`Use ${module.name || `Module ${index + 1}`} as array source`}
-                className="mr-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border/50 text-muted-foreground transition-colors hover:bg-white/8 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-30"
+                className="mr-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border/50 text-muted-foreground transition-colors hover:bg-black/5 dark:hover:bg-white/8 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-30"
                 disabled={module.moduleKind === 'corner-filler'}
                 onClick={() => setArraySourceId(module.id as AnyNodeId)}
                 title={
@@ -643,7 +643,7 @@ export function CabinetRunPanel({
                 <Copy className="h-3.5 w-3.5" />
               </button>
               <button
-                className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-red-500/20 bg-red-500/8 text-red-300 transition-colors hover:bg-red-500/15 hover:text-red-200 disabled:opacity-30"
+                className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-red-500/20 bg-red-500/8 text-red-700 dark:text-red-300 transition-colors hover:bg-red-500/15 hover:text-red-700 dark:hover:text-red-200 disabled:opacity-30"
                 disabled={modules.length <= 1}
                 onClick={() => deleteModule(module)}
                 type="button"
@@ -682,7 +682,7 @@ export function CabinetRunPanel({
 
       <PanelSection title="Duplicate along run">
         <div className="space-y-2 px-1 pb-2">
-          <div className="rounded-lg border border-border/40 bg-[#252527] px-2 py-2">
+          <div className="rounded-lg border border-border/40 bg-black/3 dark:bg-[#252527] px-2 py-2">
             <div className="text-[10px] uppercase tracking-wide text-muted-foreground">
               Source module
             </div>
diff --git a/packages/nodes/src/ceiling/panel.tsx b/packages/nodes/src/ceiling/panel.tsx
index 7ca0dab0f1..958fe6e5f2 100644
--- a/packages/nodes/src/ceiling/panel.tsx
+++ b/packages/nodes/src/ceiling/panel.tsx
@@ -323,7 +323,7 @@ export function CeilingPanel() {
       <PanelSection title="Info">
         <div className="flex items-center justify-between px-2 py-1 text-muted-foreground text-sm">
           <span>Area</span>
-          <span className="font-mono text-white">{area.toFixed(2)} m²</span>
+          <span className="font-mono text-foreground dark:text-white">{area.toFixed(2)} m²</span>
         </div>
       </PanelSection>
 
@@ -348,7 +348,7 @@ export function CeilingPanel() {
                 >
                   <div className="min-w-0 flex-1">
                     <p
-                      className={`font-medium text-xs ${isEditing ? 'text-primary' : 'text-white'}`}
+                      className={`font-medium text-xs ${isEditing ? 'text-primary' : 'text-foreground dark:text-white'}`}
                     >
                       Hole {index + 1} {isEditing && '(Editing)'}
                     </p>
@@ -373,20 +373,20 @@ export function CeilingPanel() {
                         }}
                       />
                     ) : isAutoHole ? (
-                      <div className="rounded-md bg-[#2C2C2E] px-2 py-1 text-[10px] text-muted-foreground">
+                      <div className="rounded-md bg-black/4 dark:bg-[#2C2C2E] px-2 py-1 text-[10px] text-muted-foreground">
                         Auto
                       </div>
                     ) : canEditHoles ? (
                       <>
                         <button
-                          className="flex h-7 w-7 items-center justify-center rounded-md bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground"
+                          className="flex h-7 w-7 items-center justify-center rounded-md bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground"
                           onClick={() => handleEditHole(index)}
                           type="button"
                         >
                           <Edit className="h-3.5 w-3.5" />
                         </button>
                         <button
-                          className="flex h-7 w-7 items-center justify-center rounded-md bg-red-500/10 text-red-400 hover:bg-red-500/20 hover:text-red-300"
+                          className="flex h-7 w-7 items-center justify-center rounded-md bg-red-500/10 text-red-600 dark:text-red-400 hover:bg-red-500/20 hover:text-red-700 dark:hover:text-red-300"
                           onClick={() => handleDeleteHole(index)}
                           type="button"
                         >
diff --git a/packages/nodes/src/chimney/panel.tsx b/packages/nodes/src/chimney/panel.tsx
index d97af04fe7..529bd989fc 100644
--- a/packages/nodes/src/chimney/panel.tsx
+++ b/packages/nodes/src/chimney/panel.tsx
@@ -540,7 +540,7 @@ export default function ChimneyPanel() {
                   'flex min-h-12 items-center rounded-lg border px-3 py-2.5 text-left text-xs transition-colors',
                   isSelected
                     ? 'border-orange-400/60 bg-orange-400/10 text-foreground'
-                    : 'border-border/50 bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground',
+                    : 'border-border/50 bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground',
                 )}
                 key={option.value}
                 onClick={() => setChimneyType(option.value)}
@@ -894,7 +894,7 @@ export default function ChimneyPanel() {
         <ActionGroup>
           <ActionButton
             className="hover:bg-red-500/20"
-            icon={<Trash2 className="h-3.5 w-3.5 text-red-400" />}
+            icon={<Trash2 className="h-3.5 w-3.5 text-red-600 dark:text-red-400" />}
             label="Delete"
             onClick={handleDelete}
           />
diff --git a/packages/nodes/src/column/panel.tsx b/packages/nodes/src/column/panel.tsx
index 3c93a902bc..e2d15756ab 100644
--- a/packages/nodes/src/column/panel.tsx
+++ b/packages/nodes/src/column/panel.tsx
@@ -27,7 +27,7 @@ import { AuthoredParams } from '../item/authored-params'
 import { planColumnEdit } from './hosted-resize'
 
 const SELECT_CLASS =
-  'h-10 w-full rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-sm text-foreground outline-none transition-colors hover:bg-[#3e3e3e] focus:ring-1 focus:ring-border'
+  'h-10 w-full rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 text-sm text-foreground outline-none transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] focus:ring-1 focus:ring-border'
 
 const MANAGED_LEAN_TO_LAYOUT_FIELDS = new Set<keyof ColumnNode>([
   'position',
@@ -387,7 +387,7 @@ export default function ColumnPanel() {
                       'flex min-h-12 items-center rounded-lg border px-3 py-2.5 text-left text-xs transition-colors',
                       isSelected
                         ? 'border-orange-400/60 bg-orange-400/10 text-foreground'
-                        : 'border-border/50 bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground',
+                        : 'border-border/50 bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground',
                     )}
                     key={option.value}
                     onClick={() => {
@@ -526,7 +526,7 @@ export default function ColumnPanel() {
                           'group flex flex-col items-center justify-center gap-1.5 rounded-lg border py-2.5 transition-all',
                           isSelected
                             ? 'border-orange-400/60 bg-orange-400/10 text-foreground shadow-[0_0_0_1px_rgba(251,146,60,0.25)_inset]'
-                            : 'border-border/50 bg-[#2C2C2E] text-muted-foreground hover:border-border hover:bg-[#3e3e3e] hover:text-foreground',
+                            : 'border-border/50 bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground hover:border-border hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground',
                         )}
                         key={option.value}
                         onClick={() => handleUpdate({ crossSection: option.value })}
@@ -535,7 +535,9 @@ export default function ColumnPanel() {
                         <span
                           className={cn(
                             'flex h-7 w-7 items-center justify-center',
-                            isSelected ? 'text-orange-300' : 'text-muted-foreground/80',
+                            isSelected
+                              ? 'text-orange-700 dark:text-orange-300'
+                              : 'text-muted-foreground/80',
                           )}
                         >
                           {option.icon}
@@ -1157,7 +1159,7 @@ export default function ColumnPanel() {
         <ActionGroup>
           <ActionButton icon={<Move className="h-4 w-4" />} label="Move" onClick={handleMove} />
           <ActionButton
-            className="border-red-500/40 text-red-200 hover:bg-red-500/15"
+            className="border-red-500/40 text-red-700 dark:text-red-200 hover:bg-red-500/15"
             icon={<Trash2 className="h-4 w-4" />}
             label="Delete"
             onClick={handleDelete}
diff --git a/packages/nodes/src/construction-dimension/panel.tsx b/packages/nodes/src/construction-dimension/panel.tsx
index 3a1ef55a2f..b3dadacef0 100644
--- a/packages/nodes/src/construction-dimension/panel.tsx
+++ b/packages/nodes/src/construction-dimension/panel.tsx
@@ -311,7 +311,7 @@ export default function ConstructionDimensionPanel() {
       <PanelSection title="Actions">
         <ActionGroup>
           <ActionButton
-            className="border-red-500/40 text-red-200 hover:bg-red-500/15"
+            className="border-red-500/40 text-red-700 dark:text-red-200 hover:bg-red-500/15"
             icon={<Trash2 className="h-4 w-4" />}
             label="Delete"
             onClick={() => {
diff --git a/packages/nodes/src/cupola/panel.tsx b/packages/nodes/src/cupola/panel.tsx
index ef854d73de..894c0b0dbf 100644
--- a/packages/nodes/src/cupola/panel.tsx
+++ b/packages/nodes/src/cupola/panel.tsx
@@ -257,7 +257,7 @@ export default function CupolaPanel() {
           />
           <ActionButton
             className="hover:bg-red-500/20"
-            icon={<Trash2 className="h-3.5 w-3.5 text-red-400" />}
+            icon={<Trash2 className="h-3.5 w-3.5 text-red-600 dark:text-red-400" />}
             label="Delete"
             onClick={handleDelete}
           />
diff --git a/packages/nodes/src/door/panel.tsx b/packages/nodes/src/door/panel.tsx
index 1cf72bc31e..1eec365ddc 100644
--- a/packages/nodes/src/door/panel.tsx
+++ b/packages/nodes/src/door/panel.tsx
@@ -307,9 +307,9 @@ export default function DoorPanel() {
                       'flex min-h-12 items-center gap-2.5 rounded-lg border px-3 py-2.5 text-left text-xs transition-colors',
                       isSelected
                         ? 'border-orange-400/60 bg-orange-400/10 text-foreground'
-                        : 'border-border/50 bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground',
+                        : 'border-border/50 bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground',
                       !option.available &&
-                        'cursor-not-allowed opacity-45 hover:bg-[#2C2C2E] hover:text-muted-foreground',
+                        'cursor-not-allowed opacity-45 hover:bg-black/4 dark:hover:bg-[#2C2C2E] hover:text-muted-foreground',
                     )}
                     disabled={!option.available}
                     key={option.value}
@@ -336,7 +336,7 @@ export default function DoorPanel() {
                   'flex min-h-10 items-center rounded-lg border px-3 py-2 text-left text-xs transition-colors',
                   doorStyles.includes(style)
                     ? 'border-orange-400/60 bg-orange-400/10 text-foreground'
-                    : 'border-border/50 bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground',
+                    : 'border-border/50 bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground',
                 )}
                 key={style}
                 onClick={() => handleUpdate(doorStyleLook(style))}
@@ -924,7 +924,9 @@ export default function DoorPanel() {
                 return (
                   <div className="mb-2 flex flex-col gap-1" key={i}>
                     <div className="flex items-center justify-between pb-1">
-                      <span className="font-medium text-white/80 text-xs">Segment {i + 1}</span>
+                      <span className="font-medium text-foreground/80 dark:text-white/80 text-xs">
+                        Segment {i + 1}
+                      </span>
                     </div>
 
                     <SegmentedControl
@@ -1060,7 +1062,7 @@ export default function DoorPanel() {
                 />
                 {node.segments.length > 1 && (
                   <ActionButton
-                    className="text-white/60 hover:text-white"
+                    className="text-foreground/60 hover:text-foreground dark:text-white/60 dark:hover:text-white"
                     label="- Remove"
                     onClick={() => handleUpdate({ segments: node.segments.slice(0, -1) })}
                   />
@@ -1081,7 +1083,7 @@ export default function DoorPanel() {
           />
           <ActionButton
             className="hover:bg-red-500/20"
-            icon={<Trash2 className="h-3.5 w-3.5 text-red-400" />}
+            icon={<Trash2 className="h-3.5 w-3.5 text-red-600 dark:text-red-400" />}
             label="Delete"
             onClick={handleDelete}
           />
diff --git a/packages/nodes/src/dormer/panel-actions-section.tsx b/packages/nodes/src/dormer/panel-actions-section.tsx
index d8c8cdf013..8bf619efeb 100644
--- a/packages/nodes/src/dormer/panel-actions-section.tsx
+++ b/packages/nodes/src/dormer/panel-actions-section.tsx
@@ -27,7 +27,7 @@ export function DormerActionsSection({
         />
         <ActionButton
           className="hover:bg-red-500/20"
-          icon={<Trash2 className="h-3.5 w-3.5 text-red-400" />}
+          icon={<Trash2 className="h-3.5 w-3.5 text-red-600 dark:text-red-400" />}
           label="Delete"
           onClick={onDelete}
         />
diff --git a/packages/nodes/src/dormer/panel-windows-section.tsx b/packages/nodes/src/dormer/panel-windows-section.tsx
index e6300d329a..afa12dfde4 100644
--- a/packages/nodes/src/dormer/panel-windows-section.tsx
+++ b/packages/nodes/src/dormer/panel-windows-section.tsx
@@ -23,11 +23,11 @@ export function DormerWindowsSection({
         <div className="flex flex-col gap-1">
           {windows.map((window, index) => (
             <div
-              className="flex items-center gap-1 rounded-lg border border-border/50 bg-[#2C2C2E] p-1"
+              className="flex items-center gap-1 rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] p-1"
               key={window.id}
             >
               <button
-                className="min-w-0 flex-1 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-[#3e3e3e]"
+                className="min-w-0 flex-1 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e]"
                 onClick={() => onEdit(window)}
                 type="button"
               >
@@ -41,7 +41,7 @@ export function DormerWindowsSection({
               </button>
               <button
                 aria-label={`Edit ${window.name || `Window ${index + 1}`}`}
-                className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-[#3e3e3e] hover:text-foreground"
+                className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground"
                 onClick={() => onEdit(window)}
                 title="Edit window"
                 type="button"
@@ -50,7 +50,7 @@ export function DormerWindowsSection({
               </button>
               <button
                 aria-label={`Move ${window.name || `Window ${index + 1}`}`}
-                className="flex h-8 shrink-0 items-center justify-center gap-1 rounded-md px-2 text-muted-foreground text-xs transition-colors hover:bg-[#3e3e3e] hover:text-foreground"
+                className="flex h-8 shrink-0 items-center justify-center gap-1 rounded-md px-2 text-muted-foreground text-xs transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground"
                 onClick={() => onMove(window)}
                 title="Move window"
                 type="button"
diff --git a/packages/nodes/src/dormer/panel.tsx b/packages/nodes/src/dormer/panel.tsx
index 5af5be3f0e..e770815f33 100644
--- a/packages/nodes/src/dormer/panel.tsx
+++ b/packages/nodes/src/dormer/panel.tsx
@@ -266,7 +266,7 @@ export default function DormerPanel() {
                   'flex min-h-10 items-center justify-center rounded-lg border px-2 py-2 text-center text-xs transition-colors',
                   isSelected
                     ? 'border-orange-400/60 bg-orange-400/10 text-foreground'
-                    : 'border-border/50 bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground',
+                    : 'border-border/50 bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground',
                 )}
                 key={option.value}
                 onClick={() => setSection(option.value)}
@@ -342,7 +342,7 @@ export default function DormerPanel() {
                       'flex min-h-10 items-center justify-center rounded-lg border px-2 py-2 text-xs transition-colors',
                       isSelected
                         ? 'border-orange-400/60 bg-orange-400/10 text-foreground'
-                        : 'border-border/50 bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground',
+                        : 'border-border/50 bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground',
                     )}
                     key={option.value}
                     onClick={() => handleUpdate({ roofType: option.value })}
@@ -366,7 +366,7 @@ export default function DormerPanel() {
                         'flex min-h-10 items-center justify-center rounded-lg border px-2 py-2 text-xs transition-colors',
                         isSelected
                           ? 'border-orange-400/60 bg-orange-400/10 text-foreground'
-                          : 'border-border/50 bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground',
+                          : 'border-border/50 bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground',
                       )}
                       key={option.value}
                       onClick={() => handleUpdate({ shedHighSide: option.value })}
diff --git a/packages/nodes/src/elevator/panel.tsx b/packages/nodes/src/elevator/panel.tsx
index 8917feb10a..44235be543 100644
--- a/packages/nodes/src/elevator/panel.tsx
+++ b/packages/nodes/src/elevator/panel.tsx
@@ -565,7 +565,7 @@ export default function ElevatorPanel() {
               From
             </div>
             <select
-              className="h-9 w-full rounded-lg border border-border/50 bg-[#2C2C2E] px-2 text-sm text-foreground"
+              className="h-9 w-full rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-2 text-sm text-foreground"
               onChange={(event) => handleServiceBoundaryChange('fromLevelId', event.target.value)}
               value={fromLevelId}
             >
@@ -582,7 +582,7 @@ export default function ElevatorPanel() {
               To
             </div>
             <select
-              className="h-9 w-full rounded-lg border border-border/50 bg-[#2C2C2E] px-2 text-sm text-foreground"
+              className="h-9 w-full rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-2 text-sm text-foreground"
               onChange={(event) => handleServiceBoundaryChange('toLevelId', event.target.value)}
               value={toLevelId}
             >
@@ -600,7 +600,7 @@ export default function ElevatorPanel() {
             Default Floor
           </div>
           <select
-            className="h-9 w-full rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-sm text-foreground"
+            className="h-9 w-full rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 text-sm text-foreground"
             onChange={(event) => handleUpdate({ defaultLevelId: event.target.value || null })}
             value={selectedDefaultLevelId}
           >
@@ -658,7 +658,7 @@ export default function ElevatorPanel() {
             Shaft Style
           </div>
           <select
-            className="h-9 w-full rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-sm text-foreground"
+            className="h-9 w-full rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 text-sm text-foreground"
             onChange={(event) =>
               handleUpdate({ shaftStyle: event.target.value as ElevatorNode['shaftStyle'] })
             }
@@ -715,7 +715,7 @@ export default function ElevatorPanel() {
             Opening Style
           </div>
           <select
-            className="h-9 w-full rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-sm text-foreground"
+            className="h-9 w-full rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 text-sm text-foreground"
             onChange={(event) =>
               handleUpdate({ doorStyle: event.target.value as ElevatorNode['doorStyle'] })
             }
@@ -733,7 +733,7 @@ export default function ElevatorPanel() {
             Door Type
           </div>
           <select
-            className="h-9 w-full rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-sm text-foreground"
+            className="h-9 w-full rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 text-sm text-foreground"
             onChange={(event) =>
               handleUpdate({
                 doorPanelStyle: event.target.value as ElevatorNode['doorPanelStyle'],
@@ -782,7 +782,7 @@ export default function ElevatorPanel() {
 
             return (
               <div
-                className="flex items-center justify-between gap-2 rounded-lg border border-border/45 bg-[#2C2C2E] px-2.5 py-2"
+                className="flex items-center justify-between gap-2 rounded-lg border border-border/45 bg-black/4 dark:bg-[#2C2C2E] px-2.5 py-2"
                 key={level.id}
               >
                 <span className="min-w-0 truncate text-sm">{getLevelDisplayName(level)}</span>
@@ -790,8 +790,8 @@ export default function ElevatorPanel() {
                   <button
                     className={`rounded-md border px-2 py-1 text-[11px] transition-colors ${
                       isServiceOnly
-                        ? 'border-sky-300/45 bg-sky-400/15 text-sky-100'
-                        : 'border-border/50 bg-black/15 text-muted-foreground hover:text-foreground'
+                        ? 'border-sky-600/40 bg-sky-400/15 text-sky-800 dark:border-sky-300/45 dark:text-sky-100'
+                        : 'border-border/50 bg-black/4 dark:bg-black/15 text-muted-foreground hover:text-foreground'
                     } ${isDisabled ? 'cursor-not-allowed opacity-45' : ''}`}
                     disabled={isDisabled}
                     onClick={() => toggleLevelAccess('serviceOnlyLevelIds', level.id)}
@@ -802,8 +802,8 @@ export default function ElevatorPanel() {
                   <button
                     className={`rounded-md border px-2 py-1 text-[11px] transition-colors ${
                       isDisabled
-                        ? 'border-red-300/45 bg-red-400/15 text-red-100'
-                        : 'border-border/50 bg-black/15 text-muted-foreground hover:text-foreground'
+                        ? 'border-red-600/40 bg-red-400/15 text-red-700 dark:border-red-300/45 dark:text-red-100'
+                        : 'border-border/50 bg-black/4 dark:bg-black/15 text-muted-foreground hover:text-foreground'
                     }`}
                     onClick={() => toggleLevelAccess('disabledLevelIds', level.id)}
                     type="button"
@@ -828,10 +828,10 @@ export default function ElevatorPanel() {
               <button
                 className={`flex min-h-11 items-center justify-between gap-2 rounded-lg border px-2.5 text-left transition-colors ${
                   isDisabled
-                    ? 'cursor-not-allowed border-border/35 bg-[#202024] text-muted-foreground/55'
+                    ? 'cursor-not-allowed border-border/35 bg-black/3 dark:bg-[#202024] text-muted-foreground/55'
                     : isActive
-                      ? 'border-emerald-400/45 bg-emerald-400/15 text-emerald-100'
-                      : 'border-border/50 bg-[#2C2C2E] text-foreground hover:bg-[#3e3e3e]'
+                      ? 'border-emerald-600/45 bg-emerald-400/15 text-emerald-800 dark:border-emerald-400/45 dark:text-emerald-100'
+                      : 'border-border/50 bg-black/4 dark:bg-[#2C2C2E] text-foreground hover:bg-black/8 dark:hover:bg-[#3e3e3e]'
                 }`}
                 disabled={isDisabled}
                 key={level.id}
@@ -857,7 +857,7 @@ export default function ElevatorPanel() {
                   )}
                 </span>
                 <span
-                  className={`flex h-6 min-w-6 items-center justify-center rounded-full border border-white/15 bg-black/20 ${
+                  className={`flex h-6 min-w-6 items-center justify-center rounded-full border border-black/15 dark:border-white/15 bg-black/5 dark:bg-black/20 ${
                     stopOrder ? 'px-1.5 font-mono text-[11px] font-semibold' : ''
                   }`}
                 >
diff --git a/packages/nodes/src/eyebrow-vent/panel.tsx b/packages/nodes/src/eyebrow-vent/panel.tsx
index 6062b9cc5a..ab49bf9f98 100644
--- a/packages/nodes/src/eyebrow-vent/panel.tsx
+++ b/packages/nodes/src/eyebrow-vent/panel.tsx
@@ -276,7 +276,7 @@ export default function EyebrowVentPanel() {
           />
           <ActionButton
             className="hover:bg-red-500/20"
-            icon={<Trash2 className="h-3.5 w-3.5 text-red-400" />}
+            icon={<Trash2 className="h-3.5 w-3.5 text-red-600 dark:text-red-400" />}
             label="Delete"
             onClick={handleDelete}
           />
diff --git a/packages/nodes/src/fence-feature/inspector.tsx b/packages/nodes/src/fence-feature/inspector.tsx
index a25560bb60..a643a8997a 100644
--- a/packages/nodes/src/fence-feature/inspector.tsx
+++ b/packages/nodes/src/fence-feature/inspector.tsx
@@ -234,7 +234,7 @@ export function FenceFeatureEditor({
                 <label className="flex min-h-9 items-center justify-between gap-3 text-xs text-muted-foreground">
                   Gate style
                   <select
-                    className="h-8 min-w-0 max-w-40 rounded-lg border border-border/50 bg-[#2C2C2E] px-2 text-xs text-foreground outline-none transition-colors hover:bg-[#3e3e3e] focus-visible:ring-2 focus-visible:ring-ring"
+                    className="h-8 min-w-0 max-w-40 rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-2 text-xs text-foreground outline-none transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] focus-visible:ring-2 focus-visible:ring-ring"
                     value={feature.style && feature.style !== 'match' ? feature.style : 'picket'}
                     onChange={(event) => {
                       const style = FenceStyle.safeParse(event.currentTarget.value)
@@ -258,7 +258,7 @@ export function FenceFeatureEditor({
                   >
                     {field.label}
                     <select
-                      className="h-8 min-w-0 max-w-40 rounded-lg border border-border/50 bg-[#2C2C2E] px-2 text-xs text-foreground outline-none transition-colors hover:bg-[#3e3e3e] focus-visible:ring-2 focus-visible:ring-ring"
+                      className="h-8 min-w-0 max-w-40 rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-2 text-xs text-foreground outline-none transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] focus-visible:ring-2 focus-visible:ring-ring"
                       value={field.value}
                       onChange={(event) => update(feature.id, { [field.key]: event.target.value })}
                     >
diff --git a/packages/nodes/src/fence/move-endpoint-tool.tsx b/packages/nodes/src/fence/move-endpoint-tool.tsx
index 64d830815b..4639bb3a78 100644
--- a/packages/nodes/src/fence/move-endpoint-tool.tsx
+++ b/packages/nodes/src/fence/move-endpoint-tool.tsx
@@ -273,7 +273,7 @@ export const MoveFenceEndpointTool: React.FC<{ target: MovingFenceEndpoint }> =
           <div
             className={`whitespace-nowrap rounded-full border px-2 py-1 font-medium text-[11px] shadow-lg backdrop-blur-md transition-colors ${
               altPressed
-                ? 'border-amber-500/70 bg-amber-500/15 text-amber-100'
+                ? 'border-amber-500/70 bg-amber-50/95 text-amber-800 dark:bg-amber-500/15 dark:text-amber-100'
                 : 'border-border/70 bg-background/90 text-foreground/80'
             }`}
           >
diff --git a/packages/nodes/src/gutter/downspouts-panel.tsx b/packages/nodes/src/gutter/downspouts-panel.tsx
index 640312f6f3..1f02eaa549 100644
--- a/packages/nodes/src/gutter/downspouts-panel.tsx
+++ b/packages/nodes/src/gutter/downspouts-panel.tsx
@@ -132,11 +132,11 @@ export default function DownspoutsPanel() {
       <div className="flex flex-col gap-1">
         {downspouts.map((d, i) => (
           <div
-            className="flex items-center justify-between rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-foreground text-sm"
+            className="flex items-center justify-between rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 py-2 text-foreground text-sm"
             key={d.id}
           >
             <button
-              className="flex-1 truncate text-left transition-colors hover:text-white"
+              className="flex-1 truncate text-left transition-colors hover:text-foreground dark:hover:text-white"
               onClick={() => handleSelectDownspout(d.id as AnyNodeId)}
               type="button"
             >
@@ -144,7 +144,7 @@ export default function DownspoutsPanel() {
             </button>
             <button
               aria-label="Remove downspout"
-              className="ml-2 text-muted-foreground text-xs transition-colors hover:text-red-400"
+              className="ml-2 text-muted-foreground text-xs transition-colors hover:text-red-600 dark:hover:text-red-400"
               onClick={() => handleRemove(d)}
               type="button"
             >
diff --git a/packages/nodes/src/item/panel.tsx b/packages/nodes/src/item/panel.tsx
index e42599c01b..14780379be 100644
--- a/packages/nodes/src/item/panel.tsx
+++ b/packages/nodes/src/item/panel.tsx
@@ -102,7 +102,7 @@ export default function ItemPanel() {
     >
       {fitWarning && (
         <div className="mx-1 mb-1 flex gap-2 rounded-lg bg-amber-400/10 px-3 py-2 text-xs">
-          <span className="font-semibold text-amber-400">!</span>
+          <span className="font-semibold text-amber-700 dark:text-amber-400">!</span>
           <div className="flex flex-col gap-0.5">
             <span className="font-medium text-foreground">{fitWarning.line}</span>
             {fitWarning.detail && (
@@ -214,8 +214,8 @@ export default function ItemPanel() {
           <button
             className={
               uniformScale
-                ? 'flex h-6 w-6 items-center justify-center rounded-md bg-[#3e3e3e] text-muted-foreground transition-colors hover:text-foreground'
-                : 'flex h-6 w-6 items-center justify-center rounded-md bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-[#3e3e3e] hover:text-foreground'
+                ? 'flex h-6 w-6 items-center justify-center rounded-md bg-black/8 dark:bg-[#3e3e3e] text-muted-foreground transition-colors hover:text-foreground'
+                : 'flex h-6 w-6 items-center justify-center rounded-md bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground'
             }
             onClick={() => setUniformScale((v) => !v)}
             type="button"
@@ -298,7 +298,7 @@ export default function ItemPanel() {
           {(() => {
             const [w, h, d] = getScaledDimensions(node)
             return (
-              <span className="font-mono text-white">
+              <span className="font-mono text-foreground dark:text-white">
                 {Math.round(w * 100) / 100}×{Math.round(h * 100) / 100}×{Math.round(d * 100) / 100}
               </span>
             )
@@ -316,7 +316,7 @@ export default function ItemPanel() {
           />
           <ActionButton
             className="hover:bg-red-500/20"
-            icon={<Trash2 className="h-3.5 w-3.5 text-red-400" />}
+            icon={<Trash2 className="h-3.5 w-3.5 text-red-600 dark:text-red-400" />}
             label="Delete"
             onClick={handleDelete}
           />
diff --git a/packages/nodes/src/ridge-vent/panel.tsx b/packages/nodes/src/ridge-vent/panel.tsx
index 5d4137a94a..a644058b1a 100644
--- a/packages/nodes/src/ridge-vent/panel.tsx
+++ b/packages/nodes/src/ridge-vent/panel.tsx
@@ -251,7 +251,7 @@ export default function RidgeVentPanel() {
           />
           <ActionButton
             className="hover:bg-red-500/20"
-            icon={<Trash2 className="h-3.5 w-3.5 text-red-400" />}
+            icon={<Trash2 className="h-3.5 w-3.5 text-red-600 dark:text-red-400" />}
             label="Delete"
             onClick={handleDelete}
           />
diff --git a/packages/nodes/src/roof-segment/panel.tsx b/packages/nodes/src/roof-segment/panel.tsx
index 5a90642a40..50dae7c61f 100644
--- a/packages/nodes/src/roof-segment/panel.tsx
+++ b/packages/nodes/src/roof-segment/panel.tsx
@@ -731,7 +731,7 @@ export default function RoofSegmentPanel() {
           />
           <ActionButton
             className="hover:bg-red-500/20"
-            icon={<Trash2 className="h-3.5 w-3.5 text-red-400" />}
+            icon={<Trash2 className="h-3.5 w-3.5 text-red-600 dark:text-red-400" />}
             label="Delete"
             onClick={handleDelete}
           />
diff --git a/packages/nodes/src/roof/panel.tsx b/packages/nodes/src/roof/panel.tsx
index f1087f7367..0a50330f45 100644
--- a/packages/nodes/src/roof/panel.tsx
+++ b/packages/nodes/src/roof/panel.tsx
@@ -247,7 +247,7 @@ export default function RoofPanel() {
         <div className="flex flex-col gap-1">
           {segments.map((seg, i) => (
             <button
-              className="flex items-center justify-between rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-[#3e3e3e]"
+              className="flex items-center justify-between rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e]"
               key={seg.id}
               onClick={() => handleSelectSegment(seg.id)}
               type="button"
@@ -364,7 +364,7 @@ export default function RoofPanel() {
           <div className="flex flex-col gap-1">
             {chimneys.map((chimney, i) => (
               <button
-                className="flex items-center justify-between rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-[#3e3e3e]"
+                className="flex items-center justify-between rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e]"
                 key={chimney.id}
                 onClick={() => handleSelectElement(chimney.id)}
                 type="button"
@@ -385,7 +385,7 @@ export default function RoofPanel() {
           <div className="flex flex-col gap-1">
             {dormers.map((dormer, i) => (
               <button
-                className="flex items-center justify-between rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-[#3e3e3e]"
+                className="flex items-center justify-between rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e]"
                 key={dormer.id}
                 onClick={() => handleSelectElement(dormer.id)}
                 type="button"
@@ -406,7 +406,7 @@ export default function RoofPanel() {
           <div className="flex flex-col gap-1">
             {skylights.map((skylight, i) => (
               <button
-                className="flex items-center justify-between rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-[#3e3e3e]"
+                className="flex items-center justify-between rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e]"
                 key={skylight.id}
                 onClick={() => handleSelectElement(skylight.id)}
                 type="button"
@@ -427,7 +427,7 @@ export default function RoofPanel() {
           <div className="flex flex-col gap-1">
             {solarPanels.map((panel, i) => (
               <button
-                className="flex items-center justify-between rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-[#3e3e3e]"
+                className="flex items-center justify-between rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e]"
                 key={panel.id}
                 onClick={() => handleSelectElement(panel.id)}
                 type="button"
@@ -448,7 +448,7 @@ export default function RoofPanel() {
           <div className="flex flex-col gap-1">
             {vents.map((vent, i) => (
               <button
-                className="flex items-center justify-between rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-[#3e3e3e]"
+                className="flex items-center justify-between rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e]"
                 key={vent.id}
                 onClick={() => handleSelectElement(vent.id)}
                 type="button"
@@ -511,7 +511,7 @@ export default function RoofPanel() {
           <div className="flex flex-col gap-1">
             {gutters.map((gutter, i) => (
               <button
-                className="flex items-center justify-between rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-[#3e3e3e]"
+                className="flex items-center justify-between rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e]"
                 key={gutter.id}
                 onClick={() => handleSelectElement(gutter.id)}
                 type="button"
@@ -541,7 +541,7 @@ export default function RoofPanel() {
           />
           <ActionButton
             className="hover:bg-red-500/20"
-            icon={<Trash2 className="h-3.5 w-3.5 text-red-400" />}
+            icon={<Trash2 className="h-3.5 w-3.5 text-red-600 dark:text-red-400" />}
             label="Delete"
             onClick={handleDelete}
           />
diff --git a/packages/nodes/src/shared/panel-fields.tsx b/packages/nodes/src/shared/panel-fields.tsx
index 9ab5c23ce3..7876b25db6 100644
--- a/packages/nodes/src/shared/panel-fields.tsx
+++ b/packages/nodes/src/shared/panel-fields.tsx
@@ -28,7 +28,7 @@ export function PanelTextField({
   }
 
   return (
-    <label className="flex h-10 items-center gap-3 rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-sm">
+    <label className="flex h-10 items-center gap-3 rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 text-sm">
       <span className="shrink-0 text-muted-foreground">{label}</span>
       <input
         className="min-w-0 flex-1 bg-transparent text-right text-foreground outline-none selection:bg-primary/30"
@@ -60,10 +60,10 @@ export function PanelSelect({
   value: string
 }) {
   return (
-    <label className="flex h-10 items-center justify-between gap-3 rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-sm">
+    <label className="flex h-10 items-center justify-between gap-3 rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 text-sm">
       <span className="text-muted-foreground">{label}</span>
       <select
-        className="min-w-0 rounded-md border border-border/50 bg-[#232325] px-2 py-1 text-foreground text-xs outline-none"
+        className="min-w-0 rounded-md border border-border/50 bg-white dark:bg-[#232325] px-2 py-1 text-foreground text-xs outline-none"
         onChange={(event) => onChange(event.target.value)}
         value={value}
       >
diff --git a/packages/nodes/src/skylight/panel.tsx b/packages/nodes/src/skylight/panel.tsx
index 8ab9ce7dd5..754452f133 100644
--- a/packages/nodes/src/skylight/panel.tsx
+++ b/packages/nodes/src/skylight/panel.tsx
@@ -274,7 +274,7 @@ export default function SkylightPanel() {
                   'flex min-h-12 items-center gap-2.5 rounded-lg border px-3 py-2.5 text-left text-xs transition-colors',
                   isSelected
                     ? 'border-orange-400/60 bg-orange-400/10 text-foreground'
-                    : 'border-border/50 bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground',
+                    : 'border-border/50 bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground',
                 )}
                 key={skylightType}
                 onClick={() => handleTypeChange(skylightType)}
@@ -573,7 +573,7 @@ export default function SkylightPanel() {
         <ActionGroup>
           <ActionButton
             className="hover:bg-red-500/20"
-            icon={<Trash2 className="h-3.5 w-3.5 text-red-400" />}
+            icon={<Trash2 className="h-3.5 w-3.5 text-red-600 dark:text-red-400" />}
             label="Delete"
             onClick={handleDelete}
           />
diff --git a/packages/nodes/src/slab/panel.tsx b/packages/nodes/src/slab/panel.tsx
index fd71ed87f5..6f70e3b145 100644
--- a/packages/nodes/src/slab/panel.tsx
+++ b/packages/nodes/src/slab/panel.tsx
@@ -384,7 +384,7 @@ export function SlabPanel() {
       <PanelSection title="Info">
         <div className="flex items-center justify-between px-2 py-1 text-muted-foreground text-sm">
           <span>Area</span>
-          <span className="font-mono text-white">{area.toFixed(2)} m²</span>
+          <span className="font-mono text-foreground dark:text-white">{area.toFixed(2)} m²</span>
         </div>
       </PanelSection>
 
@@ -419,7 +419,7 @@ export function SlabPanel() {
                 >
                   <div className="min-w-0 flex-1">
                     <p
-                      className={`font-medium text-xs ${isEditing ? 'text-primary' : 'text-white'}`}
+                      className={`font-medium text-xs ${isEditing ? 'text-primary' : 'text-foreground dark:text-white'}`}
                     >
                       Hole {index + 1} {isEditing && '(Editing)'}
                     </p>
@@ -443,7 +443,7 @@ export function SlabPanel() {
                       />
                     ) : openingId ? (
                       <button
-                        className="flex h-7 w-7 items-center justify-center rounded-md bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground"
+                        className="flex h-7 w-7 items-center justify-center rounded-md bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground"
                         data-slab-hole-opening={openingId}
                         onClick={() => setSelection({ selectedIds: [openingId as AnyNode['id']] })}
                         type="button"
@@ -451,20 +451,20 @@ export function SlabPanel() {
                         <Edit className="h-3.5 w-3.5" />
                       </button>
                     ) : isAutoHole ? (
-                      <div className="rounded-md bg-[#2C2C2E] px-2 py-1 text-[10px] text-muted-foreground">
+                      <div className="rounded-md bg-black/4 dark:bg-[#2C2C2E] px-2 py-1 text-[10px] text-muted-foreground">
                         Auto
                       </div>
                     ) : (
                       <>
                         <button
-                          className="flex h-7 w-7 items-center justify-center rounded-md bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground"
+                          className="flex h-7 w-7 items-center justify-center rounded-md bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground"
                           onClick={() => handleEditHole(index)}
                           type="button"
                         >
                           <Edit className="h-3.5 w-3.5" />
                         </button>
                         <button
-                          className="flex h-7 w-7 items-center justify-center rounded-md bg-red-500/10 text-red-400 hover:bg-red-500/20 hover:text-red-300"
+                          className="flex h-7 w-7 items-center justify-center rounded-md bg-red-500/10 text-red-600 dark:text-red-400 hover:bg-red-500/20 hover:text-red-700 dark:hover:text-red-300"
                           onClick={() => handleDeleteHole(index)}
                           type="button"
                         >
diff --git a/packages/nodes/src/solar-panel/panel.tsx b/packages/nodes/src/solar-panel/panel.tsx
index 37aee8e087..cae977bb83 100644
--- a/packages/nodes/src/solar-panel/panel.tsx
+++ b/packages/nodes/src/solar-panel/panel.tsx
@@ -198,7 +198,7 @@ export default function SolarPanelPanel() {
                   'flex min-h-14 flex-col items-start gap-0.5 rounded-lg border px-2.5 py-2 text-left text-xs transition-colors',
                   isSelected
                     ? 'border-orange-400/60 bg-orange-400/10 text-foreground'
-                    : 'border-border/50 bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground',
+                    : 'border-border/50 bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground',
                 )}
                 key={card.key}
                 onClick={() => handlePresetChange(card.key)}
@@ -272,7 +272,9 @@ export default function SolarPanelPanel() {
         <ActionGroup>
           <ActionButton disabled={!segment} label="Auto-fit to roof" onClick={handleAutoFit} />
         </ActionGroup>
-        {autoFitMessage ? <p className="px-1 text-amber-400 text-xs">{autoFitMessage}</p> : null}
+        {autoFitMessage ? (
+          <p className="px-1 text-amber-700 dark:text-amber-400 text-xs">{autoFitMessage}</p>
+        ) : null}
       </PanelSection>
 
       <PanelSection title="Panel">
@@ -370,7 +372,7 @@ export default function SolarPanelPanel() {
         <ActionGroup>
           <ActionButton
             className="hover:bg-red-500/20"
-            icon={<Trash2 className="h-3.5 w-3.5 text-red-400" />}
+            icon={<Trash2 className="h-3.5 w-3.5 text-red-600 dark:text-red-400" />}
             label="Delete"
             onClick={handleDelete}
           />
diff --git a/packages/nodes/src/spawn/panel.tsx b/packages/nodes/src/spawn/panel.tsx
index bfdcba9e6d..7ac79cbea5 100644
--- a/packages/nodes/src/spawn/panel.tsx
+++ b/packages/nodes/src/spawn/panel.tsx
@@ -157,7 +157,7 @@ export default function SpawnPanel() {
         <ActionGroup>
           <ActionButton icon={<Move className="h-4 w-4" />} label="Move" onClick={handleMove} />
           <ActionButton
-            className="border-red-500/40 text-red-200 hover:bg-red-500/15"
+            className="border-red-500/40 text-red-700 dark:text-red-200 hover:bg-red-500/15"
             icon={<Trash2 className="h-4 w-4" />}
             label="Delete"
             onClick={handleDelete}
diff --git a/packages/nodes/src/stair-segment/panel.tsx b/packages/nodes/src/stair-segment/panel.tsx
index c4de740d55..04d99703a7 100644
--- a/packages/nodes/src/stair-segment/panel.tsx
+++ b/packages/nodes/src/stair-segment/panel.tsx
@@ -406,7 +406,7 @@ export default function StairSegmentPanel() {
           />
           <ActionButton
             className="hover:bg-red-500/20"
-            icon={<Trash2 className="h-3.5 w-3.5 text-red-400" />}
+            icon={<Trash2 className="h-3.5 w-3.5 text-red-600 dark:text-red-400" />}
             label="Delete"
             onClick={handleDelete}
           />
diff --git a/packages/nodes/src/stair/panel.tsx b/packages/nodes/src/stair/panel.tsx
index 946d5b6b5e..2b010e5042 100644
--- a/packages/nodes/src/stair/panel.tsx
+++ b/packages/nodes/src/stair/panel.tsx
@@ -592,7 +592,7 @@ export default function StairPanel() {
               From Level
             </div>
             <select
-              className="h-9 w-full rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-foreground text-sm"
+              className="h-9 w-full rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 text-foreground text-sm"
               onChange={(event) => handleFromLevelChange(event.target.value)}
               value={resolvedFromLevelId ?? ''}
             >
@@ -609,7 +609,7 @@ export default function StairPanel() {
               To
             </div>
             <select
-              className="h-9 w-full rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-foreground text-sm"
+              className="h-9 w-full rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 text-foreground text-sm"
               onChange={(event) => handleDestinationChange(event.target.value)}
               value={attachedDeck ? attachedDeck.id : (resolvedToLevelId ?? '')}
             >
@@ -721,7 +721,7 @@ export default function StairPanel() {
           <div className="flex flex-col gap-1">
             {segments.map((seg, i) => (
               <button
-                className="flex items-center justify-between rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-[#3e3e3e]"
+                className="flex items-center justify-between rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e]"
                 key={seg.id}
                 onClick={() => handleSelectSegment(seg.id)}
                 type="button"
@@ -951,7 +951,7 @@ export default function StairPanel() {
           />
           <ActionButton
             className="hover:bg-red-500/20"
-            icon={<Trash2 className="h-3.5 w-3.5 text-red-400" />}
+            icon={<Trash2 className="h-3.5 w-3.5 text-red-600 dark:text-red-400" />}
             label="Delete"
             onClick={handleDelete}
           />
diff --git a/packages/nodes/src/turbine-vent/panel.tsx b/packages/nodes/src/turbine-vent/panel.tsx
index 3f65190f3c..09d0b9edd7 100644
--- a/packages/nodes/src/turbine-vent/panel.tsx
+++ b/packages/nodes/src/turbine-vent/panel.tsx
@@ -307,7 +307,7 @@ export default function TurbineVentPanel() {
           />
           <ActionButton
             className="hover:bg-red-500/20"
-            icon={<Trash2 className="h-3.5 w-3.5 text-red-400" />}
+            icon={<Trash2 className="h-3.5 w-3.5 text-red-600 dark:text-red-400" />}
             label="Delete"
             onClick={handleDelete}
           />
diff --git a/packages/nodes/src/unit/unit-panel.tsx b/packages/nodes/src/unit/unit-panel.tsx
index 3f065de115..a5cfcde138 100644
--- a/packages/nodes/src/unit/unit-panel.tsx
+++ b/packages/nodes/src/unit/unit-panel.tsx
@@ -118,7 +118,7 @@ export default function UnitPanel({ node }: { node: UnitNode }) {
           options={UNIT_KIND_OPTIONS}
           value={node.kind}
         />
-        <label className="flex h-10 items-center justify-between gap-3 rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-sm">
+        <label className="flex h-10 items-center justify-between gap-3 rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 text-sm">
           <span className="text-muted-foreground">Color</span>
           <span className="flex items-center gap-2">
             <span className="font-mono text-muted-foreground text-xs">{node.color}</span>
@@ -140,7 +140,7 @@ export default function UnitPanel({ node }: { node: UnitNode }) {
         ) : (
           report.members.map((member) => (
             <div
-              className="flex h-9 items-center gap-2 rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-xs"
+              className="flex h-9 items-center gap-2 rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 text-xs"
               key={member.zoneId}
             >
               <span className="min-w-0 flex-1 truncate text-foreground">
@@ -154,7 +154,7 @@ export default function UnitPanel({ node }: { node: UnitNode }) {
               </span>
               <button
                 aria-label={`Remove ${member.name || 'zone'} from unit`}
-                className="shrink-0 rounded-full p-1 text-muted-foreground transition-colors hover:bg-[#3e3e3e] hover:text-foreground"
+                className="shrink-0 rounded-full p-1 text-muted-foreground transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground"
                 onClick={() => removeMember(member.zoneId)}
                 type="button"
               >
@@ -164,7 +164,7 @@ export default function UnitPanel({ node }: { node: UnitNode }) {
           ))
         )}
         {warningMessages.length > 0 ? (
-          <ul className="flex flex-col gap-1 text-amber-300 text-xs leading-snug">
+          <ul className="flex flex-col gap-1 text-amber-700 dark:text-amber-300 text-xs leading-snug">
             {warningMessages.map((message, index) => (
               <li key={warnings[index]?.code}>{message}</li>
             ))}
diff --git a/packages/nodes/src/wall/move-endpoint-tool.tsx b/packages/nodes/src/wall/move-endpoint-tool.tsx
index 6c535e0050..720a045025 100644
--- a/packages/nodes/src/wall/move-endpoint-tool.tsx
+++ b/packages/nodes/src/wall/move-endpoint-tool.tsx
@@ -710,7 +710,7 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({
               <div
                 className={`whitespace-nowrap rounded-full border px-2 py-1 font-medium text-[11px] shadow-lg backdrop-blur-md transition-colors ${
                   altPressed
-                    ? 'border-amber-500/80 bg-amber-500/15 text-amber-100'
+                    ? 'border-amber-500/80 bg-amber-50/95 text-amber-800 dark:bg-amber-500/15 dark:text-amber-100'
                     : 'border-border bg-background/95 text-muted-foreground'
                 }`}
               >
diff --git a/packages/nodes/src/window/panel.tsx b/packages/nodes/src/window/panel.tsx
index d2d34bc58e..c0b67cfbf6 100644
--- a/packages/nodes/src/window/panel.tsx
+++ b/packages/nodes/src/window/panel.tsx
@@ -405,7 +405,7 @@ export default function WindowPanel() {
                     'flex min-h-12 items-center rounded-lg border px-3 py-2.5 text-left text-xs transition-colors',
                     isSelected
                       ? 'border-orange-400/60 bg-orange-400/10 text-foreground'
-                      : 'border-border/50 bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground',
+                      : 'border-border/50 bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground',
                   )}
                   key={option.value}
                   onClick={() =>
@@ -491,7 +491,7 @@ export default function WindowPanel() {
                   'flex min-h-10 items-center rounded-lg border px-3 py-2 text-left text-xs transition-colors',
                   windowStyles.includes(style)
                     ? 'border-orange-400/60 bg-orange-400/10 text-foreground'
-                    : 'border-border/50 bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground',
+                    : 'border-border/50 bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground',
                 )}
                 key={style}
                 onClick={() => handleUpdate(getWindowStyleOverrides(style))}
@@ -518,7 +518,7 @@ export default function WindowPanel() {
                   Wraps the corner with {corner.partner.name || 'its partner'}
                 </span>
                 <button
-                  className="rounded-full border border-border/50 px-3 py-1 text-xs hover:bg-[#3e3e3e]"
+                  className="rounded-full border border-border/50 px-3 py-1 text-xs hover:bg-black/8 dark:hover:bg-[#3e3e3e]"
                   onClick={() =>
                     selectedId && writeWindows(unwrapCorner(useScene.getState().nodes, selectedId))
                   }
@@ -557,7 +557,7 @@ export default function WindowPanel() {
           ) : (
             <div className="px-1 pb-1">
               <button
-                className="w-full rounded-full border border-border/50 px-3 py-2 text-xs hover:bg-[#3e3e3e]"
+                className="w-full rounded-full border border-border/50 px-3 py-2 text-xs hover:bg-black/8 dark:hover:bg-[#3e3e3e]"
                 onClick={wrapTheCorner}
                 type="button"
               >
@@ -1043,7 +1043,7 @@ export default function WindowPanel() {
           />
           <ActionButton
             className="hover:bg-red-500/20"
-            icon={<Trash2 className="h-3.5 w-3.5 text-red-400" />}
+            icon={<Trash2 className="h-3.5 w-3.5 text-red-600 dark:text-red-400" />}
             label="Delete"
             onClick={handleDelete}
           />
diff --git a/wiki/architecture/materials-and-themes.md b/wiki/architecture/materials-and-themes.md
index b27954e848..6aa3744cce 100644
--- a/wiki/architecture/materials-and-themes.md
+++ b/wiki/architecture/materials-and-themes.md
@@ -182,7 +182,7 @@ A `SceneTheme` (`lib/scene-themes.ts`) bundles everything that defines a "look":
 | `toneMappingExposure` | Renderer exposure. |
 | `clayTints?` | Per-`SurfaceRole` colour overrides layered on top of `colorPreset` (see [resolving a colour](#resolving-a-colour)). |
 
-The editor UI chrome is always dark (a fixed `document.body.classList.add('dark')`) and is independent of `appearance`.
+The editor UI chrome follows the host's theme and is independent of `appearance`. The editor sets no `dark` class itself: its chrome and every portal resolve against the host's `.dark` ancestor (the open-source app adds `dark` to `<body>` while its editor page is mounted; Pascal's hosted app lets next-themes set it on `<html>`). Chrome colour literals have a light base with the dark value under `dark:` (`bg-black/4 dark:bg-[#2C2C2E]`), so a new control needs both. `dark:hover:*` ties with `disabled:hover:*` and is emitted later, so a control that resets its hover when disabled resets it under `dark:disabled:hover:` too. Presentation HUDs (Preview, walkthrough, the viewer's controls with their menus and tooltips) and self-contained overlays (cursor badges, room labels, the snapshot viewfinder, the Point and ask layer) stay dark in either theme. A host that owns the theme setting passes `InterfaceThemeRow` (System / Light / Dark) to `SettingsPanel` through `preferences`.
 
 ## Adding a theme