From c47d455a77848af9db91fc93018bff7d59878f14 Mon Sep 17 00:00:00 2001
From: Johnpaul <polymenjohn1@gmail.com>
Date: Thu, 8 Jan 2026 22:12:26 +0100
Subject: [PATCH 1/2] fix: replace text-white with theme-aware color tokens

Replace hardcoded `text-white` class with theme-aware alternatives
to fix invisible text on light themes.

Changes:
- UI components: use `text-base-foreground` for text on primary backgrounds
- Load3D controls: use `text-base-foreground` for icons and labels
- VideoPreview: use `text-base-foreground` and `text-muted-foreground`
- Dropdown menus: use `bg-interface-menu-surface` for backgrounds
- Control panels: use `bg-backdrop/30` for semi-transparent backgrounds
- Selected states: use `bg-button-active-surface` for active items
- Loading overlays: use `bg-backdrop/50` for overlay backgrounds
---
 src/components/TopMenuSection.vue               |  2 +-
 src/components/input/MultiSelect.vue            |  2 +-
 src/components/load3d/Load3DControls.vue        | 12 ++++++------
 src/components/load3d/LoadingOverlay.vue        |  4 ++--
 .../load3d/controls/AnimationControls.vue       |  4 ++--
 .../load3d/controls/CameraControls.vue          |  2 +-
 .../load3d/controls/ExportControls.vue          |  6 +++---
 .../load3d/controls/LightControls.vue           |  2 +-
 .../load3d/controls/ModelControls.vue           | 17 ++++++++++-------
 src/components/load3d/controls/PopupSlider.vue  |  4 ++--
 .../load3d/controls/RecordingControls.vue       | 10 +++++-----
 .../load3d/controls/SceneControls.vue           | 10 +++++-----
 .../load3d/controls/ViewerControls.vue          |  4 ++--
 .../extensions/vueNodes/VideoPreview.vue        | 12 ++++++++----
 14 files changed, 49 insertions(+), 42 deletions(-)

diff --git a/src/components/TopMenuSection.vue b/src/components/TopMenuSection.vue
index 4273600aab8..7cdd5418a89 100644
--- a/src/components/TopMenuSection.vue
+++ b/src/components/TopMenuSection.vue
@@ -54,7 +54,7 @@
             <i class="icon-[lucide--history] size-4" />
             <span
               v-if="queuedCount > 0"
-              class="absolute -top-1 -right-1 min-w-[16px] rounded-full bg-primary-background py-0.25 text-[10px] font-medium leading-[14px] text-white"
+              class="absolute -top-1 -right-1 min-w-[16px] rounded-full bg-primary-background py-0.25 text-[10px] font-medium leading-[14px] text-base-foreground"
             >
               {{ queuedCount }}
             </span>
diff --git a/src/components/input/MultiSelect.vue b/src/components/input/MultiSelect.vue
index aaa372d73d2..21ba0d6a2e0 100644
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -160,7 +160,7 @@
         >
           <i
             v-if="slotProps.selected"
-            class="text-bold icon-[lucide--check] text-xs text-white"
+            class="text-bold icon-[lucide--check] text-xs text-base-foreground"
           />
         </div>
         <span>
diff --git a/src/components/load3d/Load3DControls.vue b/src/components/load3d/Load3DControls.vue
index 1609f39eab1..68251c74122 100644
--- a/src/components/load3d/Load3DControls.vue
+++ b/src/components/load3d/Load3DControls.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="pointer-events-auto absolute top-12 left-2 z-20 flex flex-col rounded-lg bg-smoke-700/30"
+    class="pointer-events-auto absolute top-12 left-2 z-20 flex flex-col rounded-lg bg-backdrop/30"
     @pointerdown.stop
     @pointermove.stop
     @pointerup.stop
@@ -14,12 +14,12 @@
         class="rounded-full"
         @click="toggleMenu"
       >
-        <i class="pi pi-bars text-lg text-white" />
+        <i class="pi pi-bars text-lg text-base-foreground" />
       </Button>
 
       <div
         v-show="isMenuOpen"
-        class="absolute top-0 left-12 rounded-lg bg-black/50 shadow-lg"
+        class="absolute top-0 left-12 rounded-lg bg-interface-menu-surface shadow-lg"
       >
         <div class="flex flex-col">
           <Button
@@ -29,13 +29,13 @@
             :class="
               cn(
                 'flex w-full items-center justify-start',
-                activeCategory === category && 'bg-smoke-600'
+                activeCategory === category && 'bg-button-active-surface'
               )
             "
             @click="selectCategory(category)"
           >
             <i :class="getCategoryIcon(category)" />
-            <span class="whitespace-nowrap text-white">{{
+            <span class="whitespace-nowrap text-base-foreground">{{
               $t(categoryLabels[category])
             }}</span>
           </Button>
@@ -169,7 +169,7 @@ const getCategoryIcon = (category: string) => {
     export: 'pi pi-download'
   }
   // @ts-expect-error fixme ts strict error
-  return `${icons[category]} text-white text-lg`
+  return `${icons[category]} text-base-foreground text-lg`
 }
 
 const emit = defineEmits<{
diff --git a/src/components/load3d/LoadingOverlay.vue b/src/components/load3d/LoadingOverlay.vue
index d5094f9b0e7..e538b3f91f8 100644
--- a/src/components/load3d/LoadingOverlay.vue
+++ b/src/components/load3d/LoadingOverlay.vue
@@ -2,11 +2,11 @@
   <Transition name="fade">
     <div
       v-if="loading"
-      class="bg-opacity-50 absolute inset-0 z-50 flex items-center justify-center bg-black"
+      class="absolute inset-0 z-50 flex items-center justify-center bg-backdrop/50"
     >
       <div class="flex flex-col items-center">
         <div class="spinner" />
-        <div class="mt-4 text-lg text-white">
+        <div class="mt-4 text-lg text-base-foreground">
           {{ loadingMessage }}
         </div>
       </div>
diff --git a/src/components/load3d/controls/AnimationControls.vue b/src/components/load3d/controls/AnimationControls.vue
index 16df631e5c5..5cdfb7b3452 100644
--- a/src/components/load3d/controls/AnimationControls.vue
+++ b/src/components/load3d/controls/AnimationControls.vue
@@ -15,7 +15,7 @@
           :class="[
             'pi',
             playing ? 'pi-pause' : 'pi-play',
-            'text-lg text-white'
+            'text-lg text-base-foreground'
           ]"
         />
       </Button>
@@ -46,7 +46,7 @@
         class="flex-1"
         @update:model-value="handleSliderChange"
       />
-      <span class="min-w-16 text-xs text-white">
+      <span class="min-w-16 text-xs text-base-foreground">
         {{ formatTime(currentTime) }} / {{ formatTime(animationDuration) }}
       </span>
     </div>
diff --git a/src/components/load3d/controls/CameraControls.vue b/src/components/load3d/controls/CameraControls.vue
index 85ab914d815..7922e6f1ea6 100644
--- a/src/components/load3d/controls/CameraControls.vue
+++ b/src/components/load3d/controls/CameraControls.vue
@@ -11,7 +11,7 @@
       :aria-label="$t('load3d.switchCamera')"
       @click="switchCamera"
     >
-      <i :class="['pi', 'pi-camera', 'text-lg text-white']" />
+      <i :class="['pi', 'pi-camera', 'text-lg text-base-foreground']" />
     </Button>
     <PopupSlider
       v-if="showFOVButton"
diff --git a/src/components/load3d/controls/ExportControls.vue b/src/components/load3d/controls/ExportControls.vue
index 7f554069482..3957cd12b88 100644
--- a/src/components/load3d/controls/ExportControls.vue
+++ b/src/components/load3d/controls/ExportControls.vue
@@ -12,18 +12,18 @@
         :aria-label="$t('load3d.exportModel')"
         @click="toggleExportFormats"
       >
-        <i class="pi pi-download text-lg text-white" />
+        <i class="pi pi-download text-lg text-base-foreground" />
       </Button>
       <div
         v-show="showExportFormats"
-        class="absolute top-0 left-12 rounded-lg bg-black/50 shadow-lg"
+        class="absolute top-0 left-12 rounded-lg bg-interface-menu-surface shadow-lg"
       >
         <div class="flex flex-col">
           <Button
             v-for="format in exportFormats"
             :key="format.value"
             variant="textonly"
-            class="text-white"
+            class="text-base-foreground"
             @click="exportModel(format.value)"
           >
             {{ format.label }}
diff --git a/src/components/load3d/controls/LightControls.vue b/src/components/load3d/controls/LightControls.vue
index 82cbe8ebc7f..ebf693913d4 100644
--- a/src/components/load3d/controls/LightControls.vue
+++ b/src/components/load3d/controls/LightControls.vue
@@ -12,7 +12,7 @@
         :aria-label="$t('load3d.lightIntensity')"
         @click="toggleLightIntensity"
       >
-        <i class="pi pi-sun text-lg text-white" />
+        <i class="pi pi-sun text-lg text-base-foreground" />
       </Button>
       <div
         v-show="showLightIntensity"
diff --git a/src/components/load3d/controls/ModelControls.vue b/src/components/load3d/controls/ModelControls.vue
index bb075805543..1cd4b775e6c 100644
--- a/src/components/load3d/controls/ModelControls.vue
+++ b/src/components/load3d/controls/ModelControls.vue
@@ -12,11 +12,11 @@
         :aria-label="t('load3d.upDirection')"
         @click="toggleUpDirection"
       >
-        <i class="pi pi-arrow-up text-lg text-white" />
+        <i class="pi pi-arrow-up text-lg text-base-foreground" />
       </Button>
       <div
         v-show="showUpDirection"
-        class="absolute top-0 left-12 rounded-lg bg-black/50 shadow-lg"
+        class="absolute top-0 left-12 rounded-lg bg-interface-menu-surface shadow-lg"
       >
         <div class="flex flex-col">
           <Button
@@ -24,7 +24,10 @@
             :key="direction"
             variant="textonly"
             :class="
-              cn('text-white', upDirection === direction && 'bg-blue-500')
+              cn(
+                'text-base-foreground',
+                upDirection === direction && 'bg-blue-500'
+              )
             "
             @click="selectUpDirection(direction)"
           >
@@ -46,11 +49,11 @@
         :aria-label="t('load3d.materialMode')"
         @click="toggleMaterialMode"
       >
-        <i class="pi pi-box text-lg text-white" />
+        <i class="pi pi-box text-lg text-base-foreground" />
       </Button>
       <div
         v-show="showMaterialMode"
-        class="absolute top-0 left-12 rounded-lg bg-black/50 shadow-lg"
+        class="absolute top-0 left-12 rounded-lg bg-interface-menu-surface shadow-lg"
       >
         <div class="flex flex-col">
           <Button
@@ -59,7 +62,7 @@
             variant="textonly"
             :class="
               cn(
-                'whitespace-nowrap text-white',
+                'whitespace-nowrap text-base-foreground',
                 materialMode === mode && 'bg-blue-500'
               )
             "
@@ -83,7 +86,7 @@
         :aria-label="t('load3d.showSkeleton')"
         @click="showSkeleton = !showSkeleton"
       >
-        <i class="pi pi-sitemap text-lg text-white" />
+        <i class="pi pi-sitemap text-lg text-base-foreground" />
       </Button>
     </div>
   </div>
diff --git a/src/components/load3d/controls/PopupSlider.vue b/src/components/load3d/controls/PopupSlider.vue
index 5ab1fe3d605..d51a2e5b196 100644
--- a/src/components/load3d/controls/PopupSlider.vue
+++ b/src/components/load3d/controls/PopupSlider.vue
@@ -8,11 +8,11 @@
       :aria-label="tooltipText"
       @click="toggleSlider"
     >
-      <i :class="['pi', icon, 'text-lg text-white']" />
+      <i :class="['pi', icon, 'text-lg text-base-foreground']" />
     </Button>
     <div
       v-show="showSlider"
-      class="absolute top-0 left-12 rounded-lg bg-black/50 p-4 shadow-lg w-[150px]"
+      class="absolute top-0 left-12 rounded-lg bg-interface-menu-surface p-4 shadow-lg w-[150px]"
     >
       <Slider
         v-model="value"
diff --git a/src/components/load3d/controls/RecordingControls.vue b/src/components/load3d/controls/RecordingControls.vue
index 98a6ea09d60..45c7afb2426 100644
--- a/src/components/load3d/controls/RecordingControls.vue
+++ b/src/components/load3d/controls/RecordingControls.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative rounded-lg bg-smoke-700/30">
+  <div class="relative rounded-lg bg-backdrop/30">
     <div class="flex flex-col gap-2">
       <Button
         v-tooltip.right="{
@@ -25,7 +25,7 @@
           :class="[
             'pi',
             isRecording ? 'pi-circle-fill' : 'pi-video',
-            'text-lg text-white'
+            'text-lg text-base-foreground'
           ]"
         />
       </Button>
@@ -42,7 +42,7 @@
         :aria-label="$t('load3d.exportRecording')"
         @click="handleExportRecording"
       >
-        <i class="pi pi-download text-lg text-white" />
+        <i class="pi pi-download text-lg text-base-foreground" />
       </Button>
 
       <Button
@@ -57,12 +57,12 @@
         :aria-label="$t('load3d.clearRecording')"
         @click="handleClearRecording"
       >
-        <i class="pi pi-trash text-lg text-white" />
+        <i class="pi pi-trash text-lg text-base-foreground" />
       </Button>
 
       <div
         v-if="recordingDuration && recordingDuration > 0 && !isRecording"
-        class="mt-1 text-center text-xs text-white"
+        class="mt-1 text-center text-xs text-base-foreground"
       >
         {{ formatDuration(recordingDuration) }}
       </div>
diff --git a/src/components/load3d/controls/SceneControls.vue b/src/components/load3d/controls/SceneControls.vue
index 4521df3db72..9eea9fc27df 100644
--- a/src/components/load3d/controls/SceneControls.vue
+++ b/src/components/load3d/controls/SceneControls.vue
@@ -8,7 +8,7 @@
       :aria-label="$t('load3d.showGrid')"
       @click="toggleGrid"
     >
-      <i class="pi pi-table text-lg text-white" />
+      <i class="pi pi-table text-lg text-base-foreground" />
     </Button>
 
     <div v-if="!hasBackgroundImage">
@@ -23,7 +23,7 @@
         :aria-label="$t('load3d.backgroundColor')"
         @click="openColorPicker"
       >
-        <i class="pi pi-palette text-lg text-white" />
+        <i class="pi pi-palette text-lg text-base-foreground" />
         <input
           ref="colorPickerRef"
           type="color"
@@ -48,7 +48,7 @@
         :aria-label="$t('load3d.uploadBackgroundImage')"
         @click="openImagePicker"
       >
-        <i class="pi pi-image text-lg text-white" />
+        <i class="pi pi-image text-lg text-base-foreground" />
         <input
           ref="imagePickerRef"
           type="file"
@@ -76,7 +76,7 @@
         :aria-label="$t('load3d.panoramaMode')"
         @click="toggleBackgroundRenderMode"
       >
-        <i class="pi pi-globe text-lg text-white" />
+        <i class="pi pi-globe text-lg text-base-foreground" />
       </Button>
     </div>
 
@@ -98,7 +98,7 @@
         :aria-label="$t('load3d.removeBackgroundImage')"
         @click="removeBackgroundImage"
       >
-        <i class="pi pi-times text-lg text-white" />
+        <i class="pi pi-times text-lg text-base-foreground" />
       </Button>
     </div>
   </div>
diff --git a/src/components/load3d/controls/ViewerControls.vue b/src/components/load3d/controls/ViewerControls.vue
index af751d4f197..7ac99fff813 100644
--- a/src/components/load3d/controls/ViewerControls.vue
+++ b/src/components/load3d/controls/ViewerControls.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative rounded-lg bg-smoke-700/30">
+  <div class="relative rounded-lg bg-backdrop/30">
     <div class="flex flex-col gap-2">
       <Button
         v-tooltip.right="{
@@ -12,7 +12,7 @@
         :aria-label="t('load3d.openIn3DViewer')"
         @click="openIn3DViewer"
       >
-        <i class="pi pi-expand text-lg text-white" />
+        <i class="pi pi-expand text-lg text-base-foreground" />
       </Button>
     </div>
   </div>
diff --git a/src/renderer/extensions/vueNodes/VideoPreview.vue b/src/renderer/extensions/vueNodes/VideoPreview.vue
index 06f72d6bf99..9cea77f2dc9 100644
--- a/src/renderer/extensions/vueNodes/VideoPreview.vue
+++ b/src/renderer/extensions/vueNodes/VideoPreview.vue
@@ -20,11 +20,15 @@
       <!-- Error State -->
       <div
         v-if="videoError"
-        class="flex size-full flex-col items-center justify-center bg-smoke-800/50 text-center text-white py-8"
+        class="flex size-full flex-col items-center justify-center bg-muted-background text-center text-base-foreground py-8"
       >
-        <i class="mb-2 icon-[lucide--video-off] h-12 w-12 text-smoke-400" />
-        <p class="text-sm text-smoke-300">{{ $t('g.videoFailedToLoad') }}</p>
-        <p class="mt-1 text-xs text-smoke-400">
+        <i
+          class="mb-2 icon-[lucide--video-off] h-12 w-12 text-muted-foreground"
+        />
+        <p class="text-sm text-muted-foreground">
+          {{ $t('g.videoFailedToLoad') }}
+        </p>
+        <p class="mt-1 text-xs text-muted-foreground">
           {{ getVideoFilename(currentVideoUrl) }}
         </p>
       </div>

From 86cff5b00deda832c8dc2ac4f3a675b58dfe1160 Mon Sep 17 00:00:00 2001
From: Johnpaul <polymenjohn1@gmail.com>
Date: Thu, 8 Jan 2026 23:01:33 +0100
Subject: [PATCH 2/2] fix: align VideoPreview error state with ImagePreview

- Add role="alert" for accessibility
- Use text-base-foreground consistently for error text
---
 src/renderer/extensions/vueNodes/VideoPreview.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/VideoPreview.vue b/src/renderer/extensions/vueNodes/VideoPreview.vue
index 9cea77f2dc9..cd34ee3086b 100644
--- a/src/renderer/extensions/vueNodes/VideoPreview.vue
+++ b/src/renderer/extensions/vueNodes/VideoPreview.vue
@@ -20,15 +20,16 @@
       <!-- Error State -->
       <div
         v-if="videoError"
+        role="alert"
         class="flex size-full flex-col items-center justify-center bg-muted-background text-center text-base-foreground py-8"
       >
         <i
-          class="mb-2 icon-[lucide--video-off] h-12 w-12 text-muted-foreground"
+          class="mb-2 icon-[lucide--video-off] h-12 w-12 text-base-foreground"
         />
-        <p class="text-sm text-muted-foreground">
+        <p class="text-sm text-base-foreground">
           {{ $t('g.videoFailedToLoad') }}
         </p>
-        <p class="mt-1 text-xs text-muted-foreground">
+        <p class="mt-1 text-xs text-base-foreground">
           {{ getVideoFilename(currentVideoUrl) }}
         </p>
       </div>