From a391cb0f316cbc39113ef1b80a70fde6f40581c9 Mon Sep 17 00:00:00 2001
From: Aymeric Rabot <aymeric.rabot@gmail.com>
Date: Mon, 12 Oct 2026 16:04:23 -0400
Subject: [PATCH 1/8] feat(editor): the host owns the interface theme

The editor forced its chrome dark: a mount effect put `dark` on <body> and
the v1, v2, mobile, sidebar, mobile-sheet and riser roots carried it too, so
a host's light theme never reached the editor or its portals. The editor now
sets no theme; it resolves against the host's `.dark` ancestor.

Every dark-only chrome literal gets a light base with the original kept under
`dark:` (bg-[#2C2C2E] -> bg-black/4 dark:bg-[#2C2C2E], white tints -> black
tints, 300/400 inks -> 600/700), so dark renders as before. Where a class is
merged with a caller's override, the pair is arranged so the override still
wins: ActionButton's fill runs through custom properties, ghost-button callers
leave the dark hover to the variant, and the mobile delete hover and disabled
segments carry their own dark twin. The rail's selection uses sidebar-accent,
which equals accent in dark and reads on the light sidebar.

Presentation HUDs keep `dark` (Preview stage, walkthrough, viewer controls
and now their dropdown menus), as do the scene-graph viewer and the self-dark
chips. The open-source app puts `dark` on <html>.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/editor/app/layout.tsx                    |  2 +-
 .../editor/capture-level-picker.tsx           |  4 +-
 .../editor/editor-layout-mobile.tsx           |  2 +-
 .../components/editor/editor-layout-v2.tsx    |  2 +-
 .../editor/floorplan-mode-coordinator.tsx     |  4 +-
 .../src/components/editor/floorplan-panel.tsx |  6 +-
 .../editor/src/components/editor/index.tsx    |  9 +--
 .../components/editor/riser-diagram-panel.tsx |  4 +-
 .../src/components/editor/views/view-bar.tsx  |  7 +-
 .../ui/action-menu/camera-actions.tsx         |  6 +-
 .../ui/action-menu/control-modes.tsx          | 12 +--
 .../ui/action-menu/measurement-control.tsx    | 16 ++--
 .../ui/action-menu/view-toggles.tsx           | 76 +++++++++----------
 .../components/ui/controls/action-button.tsx  |  5 +-
 .../components/ui/controls/metric-control.tsx |  2 +-
 .../ui/controls/segmented-control.tsx         |  9 ++-
 .../components/ui/controls/select-control.tsx |  2 +-
 .../components/ui/controls/slider-control.tsx |  2 +-
 .../components/ui/controls/toggle-control.tsx |  6 +-
 .../components/ui/floating-level-selector.tsx | 22 +++---
 .../ui/helpers/contextual-helper-panel.tsx    |  8 +-
 .../collections/collections-popover.tsx       | 16 ++--
 .../ui/panels/mobile-panel-sheet.tsx          |  4 +-
 .../ui/panels/mobile-selection-bar.tsx        |  9 ++-
 .../ui/panels/multi-selection-panel.tsx       |  4 +-
 .../components/ui/panels/panel-wrapper.tsx    | 12 +--
 .../ui/panels/parametric-field-control.tsx    |  4 +-
 .../ui/panels/parametric-inspector.tsx        |  6 +-
 .../src/components/ui/sidebar/app-sidebar.tsx |  2 +-
 .../src/components/ui/sidebar/icon-rail.tsx   |  6 +-
 .../ui/sidebar/panels/items-panel/index.tsx   | 12 +--
 .../sidebar/panels/settings-panel/index.tsx   |  2 +-
 .../ui/sidebar/panels/site-panel/index.tsx    |  4 +-
 .../ui/sidebar/panels/zone-panel/index.tsx    |  4 +-
 .../src/components/ui/sidebar/tab-bar.tsx     |  8 +-
 .../components/viewer/viewer-controls-bar.tsx | 10 +--
 packages/nodes/src/block/panel.tsx            | 12 +--
 packages/nodes/src/box-vent/panel.tsx         |  2 +-
 .../nodes/src/cabinet/compartment-card.tsx    | 20 ++---
 packages/nodes/src/cabinet/panel.tsx          | 12 +--
 packages/nodes/src/cabinet/run-panel.tsx      |  8 +-
 packages/nodes/src/ceiling/panel.tsx          | 10 +--
 packages/nodes/src/chimney/panel.tsx          |  4 +-
 packages/nodes/src/column/panel.tsx           | 12 +--
 .../src/construction-dimension/panel.tsx      |  2 +-
 packages/nodes/src/cupola/panel.tsx           |  2 +-
 packages/nodes/src/door/panel.tsx             | 14 ++--
 .../src/dormer/panel-actions-section.tsx      |  2 +-
 .../src/dormer/panel-windows-section.tsx      |  8 +-
 packages/nodes/src/dormer/panel.tsx           |  6 +-
 packages/nodes/src/elevator/panel.tsx         | 24 +++---
 packages/nodes/src/eyebrow-vent/panel.tsx     |  2 +-
 .../nodes/src/fence-feature/inspector.tsx     |  4 +-
 .../nodes/src/gutter/downspouts-panel.tsx     |  6 +-
 packages/nodes/src/item/panel.tsx             | 10 +--
 packages/nodes/src/ridge-vent/panel.tsx       |  2 +-
 packages/nodes/src/roof-segment/panel.tsx     |  2 +-
 packages/nodes/src/roof/panel.tsx             | 16 ++--
 packages/nodes/src/shared/panel-fields.tsx    |  6 +-
 packages/nodes/src/skylight/panel.tsx         |  4 +-
 packages/nodes/src/slab/panel.tsx             | 12 +--
 packages/nodes/src/solar-panel/panel.tsx      |  8 +-
 packages/nodes/src/spawn/panel.tsx            |  2 +-
 packages/nodes/src/stair-segment/panel.tsx    |  2 +-
 packages/nodes/src/stair/panel.tsx            |  8 +-
 packages/nodes/src/turbine-vent/panel.tsx     |  2 +-
 packages/nodes/src/unit/unit-panel.tsx        |  8 +-
 packages/nodes/src/window/panel.tsx           |  6 +-
 wiki/architecture/materials-and-themes.md     |  2 +-
 69 files changed, 279 insertions(+), 270 deletions(-)

diff --git a/apps/editor/app/layout.tsx b/apps/editor/app/layout.tsx
index 01965f4ba3..fb48d7f0b6 100644
--- a/apps/editor/app/layout.tsx
+++ b/apps/editor/app/layout.tsx
@@ -31,7 +31,7 @@ export default function RootLayout({
 
   return (
     <html
-      className={`${geistSans.variable} ${geistMono.variable} ${GeistPixelSquare.variable} ${barlow.variable}`}
+      className={`dark ${geistSans.variable} ${geistMono.variable} ${GeistPixelSquare.variable} ${barlow.variable}`}
       lang="en"
     >
       <body className="font-sans">
diff --git a/packages/editor/src/components/editor/capture-level-picker.tsx b/packages/editor/src/components/editor/capture-level-picker.tsx
index 9a54de3e2e..630d8a2f07 100644
--- a/packages/editor/src/components/editor/capture-level-picker.tsx
+++ b/packages/editor/src/components/editor/capture-level-picker.tsx
@@ -10,8 +10,8 @@ const rowClass = (selected: boolean) =>
   cn(
     'flex w-full min-w-0 items-center rounded-lg px-2.5 py-1.5 text-left font-medium text-xs transition-colors',
     selected
-      ? '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',
   )
 
 /**
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..1915bd5ace 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-600 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..cc3bad0b9c 100644
--- a/packages/editor/src/components/editor/riser-diagram-panel.tsx
+++ b/packages/editor/src/components/editor/riser-diagram-panel.tsx
@@ -45,14 +45,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">
       <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" />
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/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/measurement-control.tsx b/packages/editor/src/components/ui/action-menu/measurement-control.tsx
index 76ba4383ec..ef91b6bd22 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-600 hover:bg-cyan-500/20 dark:text-cyan-400 dark:hover:text-accent-foreground'
+              : 'hover:bg-cyan-500/15 hover:text-cyan-600 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-600 dark:text-cyan-400'
+                : 'hover:bg-cyan-500/10 hover:text-cyan-600 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/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/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..b75a7effe1 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,
       )}
@@ -34,9 +34,10 @@ export function SegmentedControl<T extends string>({
             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/floating-level-selector.tsx b/packages/editor/src/components/ui/floating-level-selector.tsx
index ff8da87dfe..80a4c03b82 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/50 tabular-nums transition-colors hover:bg-black/4 dark:hover:bg-white/5 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..ceae24f05e 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-600 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/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..90ae8516bd 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
@@ -1214,7 +1214,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/site-panel/index.tsx b/packages/editor/src/components/ui/sidebar/panels/site-panel/index.tsx
index d9753d722d..380303b23f 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-600 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..fff4a12fcb 100644
--- a/packages/editor/src/components/viewer/viewer-controls-bar.tsx
+++ b/packages/editor/src/components/viewer/viewer-controls-bar.tsx
@@ -110,7 +110,7 @@ function VisibilityMenu({
           <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))}
@@ -167,7 +167,7 @@ function DisplayMenu() {
           <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 +208,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 (
@@ -238,7 +238,7 @@ function DisplayMenu() {
               {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 +271,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}
diff --git a/packages/nodes/src/block/panel.tsx b/packages/nodes/src/block/panel.tsx
index a079fbe2c0..9c6d760604 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`}
                     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..b18d5c9998 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-600 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..7a343301f2 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>
@@ -791,7 +791,7 @@ export default function ElevatorPanel() {
                     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-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)}
@@ -803,7 +803,7 @@ export default function ElevatorPanel() {
                     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-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-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/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..0bb2e5fefd 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-600 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..307762fe53 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-600 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/window/panel.tsx b/packages/nodes/src/window/panel.tsx
index d2d34bc58e..86ec5f3117 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))}
@@ -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..0eb49c6eca 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 puts `dark` on `<html>`; Pascal's hosted app lets next-themes set it). 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. Presentation HUDs (Preview, walkthrough, the viewer's controls and their menus) and self-contained chips (cursor badges, room labels, the snapshot viewfinder) stay dark in either theme.
 
 ## Adding a theme
 

From 226253fdd799326afc5c5e7e9dea69a0824413ed Mon Sep 17 00:00:00 2001
From: Aymeric Rabot <aymeric.rabot@gmail.com>
Date: Mon, 12 Oct 2026 16:04:24 -0400
Subject: [PATCH 2/8] feat(editor): an Interface theme row in Settings

InterfaceThemeRow is the System / Light / Dark setting as a Preferences row,
exported like SettingsSwitchRow. The editor still applies no theme: the host
owns the value and the class, and passes the row through SettingsPanel's
`preferences` slot. A host that passes nothing (the open-source app) gets no
row.

SegmentedControl buttons report aria-pressed, which the row's group label
and the test read. The sfx-player test's use-audio mock is now callable like
the real hook: bun keeps a module mock for the rest of the process, and the
Settings panel rendered after it calls useAudio().

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../ui/controls/segmented-control.tsx         |  1 +
 .../sidebar/panels/settings-panel/index.tsx   | 68 ++++++++++++++++++-
 .../settings-panel/interface-theme.test.tsx   | 20 ++++++
 packages/editor/src/index.tsx                 |  2 +
 packages/editor/src/lib/sfx-player.test.ts    | 12 ++--
 wiki/architecture/materials-and-themes.md     |  2 +-
 6 files changed, 99 insertions(+), 6 deletions(-)
 create mode 100644 packages/editor/src/components/ui/sidebar/panels/settings-panel/interface-theme.test.tsx

diff --git a/packages/editor/src/components/ui/controls/segmented-control.tsx b/packages/editor/src/components/ui/controls/segmented-control.tsx
index b75a7effe1..75dd6d6aae 100644
--- a/packages/editor/src/components/ui/controls/segmented-control.tsx
+++ b/packages/editor/src/components/ui/controls/segmented-control.tsx
@@ -31,6 +31,7 @@ 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
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 90ae8516bd..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
 }
 
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/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..5b53c3c794 100644
--- a/packages/editor/src/lib/sfx-player.test.ts
+++ b/packages/editor/src/lib/sfx-player.test.ts
@@ -92,11 +92,15 @@ const fakeHowler = {
 }
 
 mock.module('howler', () => ({ Howl: FakeHowl, Howler: fakeHowler }))
+// A hook like the real store's: bun keeps a module mock for the rest of the
+// process, so components rendered by later test files call it.
+const audioState = () => ({ masterVolume: 100, muted, sfxVolume: 100 })
 mock.module('../store/use-audio', () => ({
-  default: {
-    getState: () => ({ masterVolume: 100, muted, sfxVolume: 100 }),
-    subscribe: () => () => {},
-  },
+  default: Object.assign(
+    <T>(selector?: (state: ReturnType<typeof audioState>) => T) =>
+      selector ? selector(audioState()) : audioState(),
+    { getState: audioState, subscribe: () => () => {} },
+  ),
 }))
 
 const { disposeSFX, playSFX, preloadSFX, startLoopSFX, stopLoopSFX, updateSFXVolumes } =
diff --git a/wiki/architecture/materials-and-themes.md b/wiki/architecture/materials-and-themes.md
index 0eb49c6eca..15770aa901 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 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 puts `dark` on `<html>`; Pascal's hosted app lets next-themes set it). 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. Presentation HUDs (Preview, walkthrough, the viewer's controls and their menus) and self-contained chips (cursor badges, room labels, the snapshot viewfinder) stay dark in either theme.
+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 puts `dark` on `<html>`; Pascal's hosted app lets next-themes set it). 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. Presentation HUDs (Preview, walkthrough, the viewer's controls and their menus) and self-contained chips (cursor badges, room labels, the snapshot viewfinder) stay dark in either theme. A host that owns the theme setting passes `InterfaceThemeRow` (System / Light / Dark) to `SettingsPanel` through `preferences`.
 
 ## Adding a theme
 

From 2efa328acefac2216a3ac36958030459f882b487 Mon Sep 17 00:00:00 2001
From: Aymeric Rabot <aymeric.rabot@gmail.com>
Date: Mon, 12 Oct 2026 19:30:39 -0400
Subject: [PATCH 3/8] fix(editor): the open-source app keeps only its editor
 page dark

`dark` on the app's <html> also turned its home, login, settings and setup
pages dark, which were light before. SceneLoader, the one page that mounts
the editor, now adds `dark` to <body> while mounted, as the editor itself
used to, so the editor and the menus it portals there stay dark and the
other pages keep their look.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/editor/app/layout.tsx                | 2 +-
 apps/editor/components/scene-loader.tsx   | 6 ++++++
 wiki/architecture/materials-and-themes.md | 2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/editor/app/layout.tsx b/apps/editor/app/layout.tsx
index fb48d7f0b6..01965f4ba3 100644
--- a/apps/editor/app/layout.tsx
+++ b/apps/editor/app/layout.tsx
@@ -31,7 +31,7 @@ export default function RootLayout({
 
   return (
     <html
-      className={`dark ${geistSans.variable} ${geistMono.variable} ${GeistPixelSquare.variable} ${barlow.variable}`}
+      className={`${geistSans.variable} ${geistMono.variable} ${GeistPixelSquare.variable} ${barlow.variable}`}
       lang="en"
     >
       <body className="font-sans">
diff --git a/apps/editor/components/scene-loader.tsx b/apps/editor/components/scene-loader.tsx
index 8d8de58a86..d20e38e90b 100644
--- a/apps/editor/components/scene-loader.tsx
+++ b/apps/editor/components/scene-loader.tsx
@@ -154,6 +154,12 @@ 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. On <body>, so the menus and dialogs it portals there are dark too.
+  useEffect(() => {
+    document.body.classList.add('dark')
+    return () => document.body.classList.remove('dark')
+  }, [])
   return (
     <WebXRFeatureRuntime enabled={webXRInstalled}>
       <SceneEditor {...props} />
diff --git a/wiki/architecture/materials-and-themes.md b/wiki/architecture/materials-and-themes.md
index 15770aa901..9ecbd45831 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 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 puts `dark` on `<html>`; Pascal's hosted app lets next-themes set it). 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. Presentation HUDs (Preview, walkthrough, the viewer's controls and their menus) and self-contained chips (cursor badges, room labels, the snapshot viewfinder) stay dark in either theme. A host that owns the theme setting passes `InterfaceThemeRow` (System / Light / Dark) to `SettingsPanel` through `preferences`.
+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. Presentation HUDs (Preview, walkthrough, the viewer's controls and their menus) and self-contained chips (cursor badges, room labels, the snapshot viewfinder) stay dark in either theme. A host that owns the theme setting passes `InterfaceThemeRow` (System / Light / Dark) to `SettingsPanel` through `preferences`.
 
 ## Adding a theme
 

From e63815fec7eaff9b19fff5eb10f95c81641843cd Mon Sep 17 00:00:00 2001
From: Aymeric Rabot <aymeric.rabot@gmail.com>
Date: Tue, 13 Oct 2026 00:39:25 -0400
Subject: [PATCH 4/8] fix(editor): the states the light pass missed read in
 both themes

- Elevator access and destination: selected Service, Disabled and the
  current stop get dark inks in light (they kept their -100 dark inks).
- Warning and accent inks in light are -700, which reach 4.5:1.
- Build, category and tool-option tiles get a light surface that reads.
- The storey height is legible in light; the riser diagram's waste and
  vent colours are darker in light; the endpoint drag pill reads on light.
- A block slot's disabled delete keeps its muted hover in dark:
  `dark:hover:*` ties with `disabled:hover:*` and is emitted later.

Dark keeps its values.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../editor/floorplan-mode-coordinator.tsx     |  2 +-
 .../components/editor/riser-diagram-panel.tsx | 19 +++++++++++++------
 .../ui/action-menu/measurement-control.tsx    |  8 ++++----
 .../components/ui/build-panel/build-panel.tsx |  4 +++-
 .../ui/controls/tool-options-panel.tsx        |  2 +-
 .../components/ui/floating-level-selector.tsx |  2 +-
 .../components/ui/panels/panel-wrapper.tsx    |  2 +-
 .../items-panel/function-tree-panel.tsx       |  2 +-
 .../ui/sidebar/panels/site-panel/index.tsx    |  2 +-
 packages/nodes/src/block/panel.tsx            |  2 +-
 packages/nodes/src/cabinet/panel.tsx          |  2 +-
 packages/nodes/src/elevator/panel.tsx         |  6 +++---
 .../nodes/src/fence/move-endpoint-tool.tsx    |  2 +-
 packages/nodes/src/item/panel.tsx             |  2 +-
 packages/nodes/src/solar-panel/panel.tsx      |  2 +-
 .../nodes/src/wall/move-endpoint-tool.tsx     |  2 +-
 wiki/architecture/materials-and-themes.md     |  2 +-
 17 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/packages/editor/src/components/editor/floorplan-mode-coordinator.tsx b/packages/editor/src/components/editor/floorplan-mode-coordinator.tsx
index 1915bd5ace..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-600 dark: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()
diff --git a/packages/editor/src/components/editor/riser-diagram-panel.tsx b/packages/editor/src/components/editor/riser-diagram-panel.tsx
index cc3bad0b9c..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,7 +47,7 @@ function RiserDiagramContent() {
   const ty = diagram ? -diagram.bounds.minY * SCALE + PADDING : 0
 
   return (
-    <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">
+    <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>
@@ -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/ui/action-menu/measurement-control.tsx b/packages/editor/src/components/ui/action-menu/measurement-control.tsx
index ef91b6bd22..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-600 hover:bg-cyan-500/20 dark:text-cyan-400 dark:hover:text-accent-foreground'
-              : 'hover:bg-cyan-500/15 hover:text-cyan-600 dark: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-600 dark:text-cyan-400'
-                : 'hover:bg-cyan-500/10 hover:text-cyan-600 dark: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"
           >
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/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 80a4c03b82..cc2afec102 100644
--- a/packages/editor/src/components/ui/floating-level-selector.tsx
+++ b/packages/editor/src/components/ui/floating-level-selector.tsx
@@ -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-black/4 dark: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"
diff --git a/packages/editor/src/components/ui/panels/panel-wrapper.tsx b/packages/editor/src/components/ui/panels/panel-wrapper.tsx
index ceae24f05e..b2c5800188 100644
--- a/packages/editor/src/components/ui/panels/panel-wrapper.tsx
+++ b/packages/editor/src/components/ui/panels/panel-wrapper.tsx
@@ -395,7 +395,7 @@ 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-600 dark:text-cyan-400 hover:bg-cyan-500/30'
+                      ? '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}
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/site-panel/index.tsx b/packages/editor/src/components/ui/sidebar/panels/site-panel/index.tsx
index 380303b23f..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-600 dark:text-orange-400'
+              ? 'bg-orange-500/20 text-orange-700 dark:text-orange-400'
               : 'text-muted-foreground hover:bg-accent',
           )}
           onClick={handleToggleEdit}
diff --git a/packages/nodes/src/block/panel.tsx b/packages/nodes/src/block/panel.tsx
index 9c6d760604..1f5f593fdc 100644
--- a/packages/nodes/src/block/panel.tsx
+++ b/packages/nodes/src/block/panel.tsx
@@ -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-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`}
+                    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)}
diff --git a/packages/nodes/src/cabinet/panel.tsx b/packages/nodes/src/cabinet/panel.tsx
index b18d5c9998..7032682642 100644
--- a/packages/nodes/src/cabinet/panel.tsx
+++ b/packages/nodes/src/cabinet/panel.tsx
@@ -896,7 +896,7 @@ export default function CabinetPanel() {
         {reflowNotice ? (
           <p
             aria-live="polite"
-            className="px-1 pb-2 text-xs leading-5 text-amber-600 dark: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/elevator/panel.tsx b/packages/nodes/src/elevator/panel.tsx
index 7a343301f2..44235be543 100644
--- a/packages/nodes/src/elevator/panel.tsx
+++ b/packages/nodes/src/elevator/panel.tsx
@@ -790,7 +790,7 @@ 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-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}
@@ -802,7 +802,7 @@ 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-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)}
@@ -830,7 +830,7 @@ export default function ElevatorPanel() {
                   isDisabled
                     ? '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-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}
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/item/panel.tsx b/packages/nodes/src/item/panel.tsx
index 0bb2e5fefd..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-600 dark: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 && (
diff --git a/packages/nodes/src/solar-panel/panel.tsx b/packages/nodes/src/solar-panel/panel.tsx
index 307762fe53..cae977bb83 100644
--- a/packages/nodes/src/solar-panel/panel.tsx
+++ b/packages/nodes/src/solar-panel/panel.tsx
@@ -273,7 +273,7 @@ export default function SolarPanelPanel() {
           <ActionButton disabled={!segment} label="Auto-fit to roof" onClick={handleAutoFit} />
         </ActionGroup>
         {autoFitMessage ? (
-          <p className="px-1 text-amber-600 dark:text-amber-400 text-xs">{autoFitMessage}</p>
+          <p className="px-1 text-amber-700 dark:text-amber-400 text-xs">{autoFitMessage}</p>
         ) : null}
       </PanelSection>
 
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/wiki/architecture/materials-and-themes.md b/wiki/architecture/materials-and-themes.md
index 9ecbd45831..512693cbed 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 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. Presentation HUDs (Preview, walkthrough, the viewer's controls and their menus) and self-contained chips (cursor badges, room labels, the snapshot viewfinder) stay dark in either theme. A host that owns the theme setting passes `InterfaceThemeRow` (System / Light / Dark) to `SettingsPanel` through `preferences`.
+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 chips (cursor badges, room labels, the snapshot viewfinder) stay dark in either theme. A host that owns the theme setting passes `InterfaceThemeRow` (System / Light / Dark) to `SettingsPanel` through `preferences`.
 
 ## Adding a theme
 

From c30b74bb97209986055d1a06e3042fdb3f2676a7 Mon Sep 17 00:00:00 2001
From: Aymeric Rabot <aymeric.rabot@gmail.com>
Date: Tue, 13 Oct 2026 00:40:03 -0400
Subject: [PATCH 5/8] fix(editor): the snapshot viewfinder and the viewer's
 tooltips stay dark

The snapshot overlay carries its own `dark` scope, so its level picker
matches the viewfinder in either theme (the picker's light variant goes).
The viewer controls pass `dark` to their tooltips, which portal to <body>.
The viewer's Display submenu reads "Scene theme", apart from the
interface theme.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/editor/components/viewer-toolbar.tsx              |  2 +-
 .../src/components/editor/capture-level-picker.tsx     |  4 ++--
 .../src/components/editor/snapshot-capture-overlay.tsx |  2 +-
 .../src/components/ui/action-menu/action-button.tsx    |  5 ++++-
 .../src/components/viewer/viewer-controls-bar.tsx      | 10 +++++++++-
 5 files changed, 17 insertions(+), 6 deletions(-)

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/capture-level-picker.tsx b/packages/editor/src/components/editor/capture-level-picker.tsx
index 630d8a2f07..9a54de3e2e 100644
--- a/packages/editor/src/components/editor/capture-level-picker.tsx
+++ b/packages/editor/src/components/editor/capture-level-picker.tsx
@@ -10,8 +10,8 @@ const rowClass = (selected: boolean) =>
   cn(
     'flex w-full min-w-0 items-center rounded-lg px-2.5 py-1.5 text-left font-medium text-xs transition-colors',
     selected
-      ? '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',
+      ? 'bg-white/10 text-foreground'
+      : 'text-muted-foreground/70 hover:bg-white/5 hover:text-muted-foreground',
   )
 
 /**
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/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/viewer/viewer-controls-bar.tsx b/packages/editor/src/components/viewer/viewer-controls-bar.tsx
index fff4a12fcb..4792ee2d41 100644
--- a/packages/editor/src/components/viewer/viewer-controls-bar.tsx
+++ b/packages/editor/src/components/viewer/viewer-controls-bar.tsx
@@ -104,6 +104,7 @@ function VisibilityMenu({
           className="hover:bg-white/5 hover:text-foreground"
           label="Visibility"
           size="icon"
+          tooltipClassName="dark"
           tooltipSide="top"
           variant="ghost"
         >
@@ -161,6 +162,7 @@ function DisplayMenu() {
           className="hover:bg-white/5 hover:text-foreground"
           label="Display settings"
           size="icon"
+          tooltipClassName="dark"
           tooltipSide="top"
           variant="ghost"
         >
@@ -233,7 +235,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>
@@ -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"
           >
@@ -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"
           >

From 8afb4a911bc4cc3519d24b9b75db0fd6dde016d8 Mon Sep 17 00:00:00 2001
From: Aymeric Rabot <aymeric.rabot@gmail.com>
Date: Tue, 13 Oct 2026 00:40:03 -0400
Subject: [PATCH 6/8] test(editor): the SFX player test drives the real audio
 store

It mocked `../store/use-audio` for the whole process, so a later file that
rendered the settings panel got the fake store. The test now sets the real
store's state instead.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 packages/editor/src/lib/sfx-player.test.ts | 20 +++++---------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/packages/editor/src/lib/sfx-player.test.ts b/packages/editor/src/lib/sfx-player.test.ts
index 5b53c3c794..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,16 +92,6 @@ const fakeHowler = {
 }
 
 mock.module('howler', () => ({ Howl: FakeHowl, Howler: fakeHowler }))
-// A hook like the real store's: bun keeps a module mock for the rest of the
-// process, so components rendered by later test files call it.
-const audioState = () => ({ masterVolume: 100, muted, sfxVolume: 100 })
-mock.module('../store/use-audio', () => ({
-  default: Object.assign(
-    <T>(selector?: (state: ReturnType<typeof audioState>) => T) =>
-      selector ? selector(audioState()) : audioState(),
-    { getState: audioState, subscribe: () => () => {} },
-  ),
-}))
 
 const { disposeSFX, playSFX, preloadSFX, startLoopSFX, stopLoopSFX, updateSFXVolumes } =
   await import('./sfx-player')
@@ -111,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
 })
@@ -145,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)
@@ -283,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])

From 36972dabd1a15312bce5d9309790d266f05dbce7 Mon Sep 17 00:00:00 2001
From: Aymeric Rabot <aymeric.rabot@gmail.com>
Date: Tue, 13 Oct 2026 01:01:52 -0400
Subject: [PATCH 7/8] fix(editor): the open-source editor page is dark from its
 first paint

`dark` on <body> comes from an effect, after the first paint, so the editor
flashed light. The page root now carries it too; <body> keeps it for the
menus and dialogs portalled there.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/editor/components/scene-loader.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/editor/components/scene-loader.tsx b/apps/editor/components/scene-loader.tsx
index d20e38e90b..251c1bb030 100644
--- a/apps/editor/components/scene-loader.tsx
+++ b/apps/editor/components/scene-loader.tsx
@@ -155,7 +155,8 @@ 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. On <body>, so the menus and dialogs it portals there are dark too.
+  // 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')
@@ -337,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>

From beef29fb265d1ad3737ce01c537051f8ad9df722 Mon Sep 17 00:00:00 2001
From: Aymeric Rabot <aymeric.rabot@gmail.com>
Date: Tue, 13 Oct 2026 11:24:16 -0400
Subject: [PATCH 8/8] fix(editor): Point and ask, Follow Pascal and the corner
 buttons read in light

Bundle 2's new dock controls were drawn for dark chrome only. Point and ask's
lavender ink, Follow Pascal's violet-300 ink and white hover, the "Resume
following" pill's violet-200 text, and the window inspector's Wrap / Unwrap
corner hovers now have light values, with the old ones kept under dark:.
The active toggles reset their dark hover text, as Select and Delete do, so
dark renders as before.

Follow Pascal also sits in the Preview controls bar, which stays dark, so it
takes a tooltipClassName and the bar passes `dark` like its other buttons.
The Point and ask layer is a self-contained overlay and stays dark in both
themes; the wiki lists it with the other overlays.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../ui/action-menu/follow-pascal-pill.tsx           |  2 +-
 .../ui/action-menu/follow-pascal-toggle.tsx         | 13 +++++++++++--
 .../components/ui/action-menu/point-ask-button.tsx  |  4 +++-
 .../src/components/viewer/viewer-controls-bar.tsx   |  2 +-
 packages/nodes/src/window/panel.tsx                 |  4 ++--
 wiki/architecture/materials-and-themes.md           |  2 +-
 6 files changed, 19 insertions(+), 8 deletions(-)

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/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/viewer/viewer-controls-bar.tsx b/packages/editor/src/components/viewer/viewer-controls-bar.tsx
index 4792ee2d41..9a0f24682c 100644
--- a/packages/editor/src/components/viewer/viewer-controls-bar.tsx
+++ b/packages/editor/src/components/viewer/viewer-controls-bar.tsx
@@ -421,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
diff --git a/packages/nodes/src/window/panel.tsx b/packages/nodes/src/window/panel.tsx
index 86ec5f3117..c0b67cfbf6 100644
--- a/packages/nodes/src/window/panel.tsx
+++ b/packages/nodes/src/window/panel.tsx
@@ -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"
               >
diff --git a/wiki/architecture/materials-and-themes.md b/wiki/architecture/materials-and-themes.md
index 512693cbed..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 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 chips (cursor badges, room labels, the snapshot viewfinder) stay dark in either theme. A host that owns the theme setting passes `InterfaceThemeRow` (System / Light / Dark) to `SettingsPanel` through `preferences`.
+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