From 9ae85068eb2e75e7df7f6f750d807bc63af12665 Mon Sep 17 00:00:00 2001
From: Alexander Brown <drjkl@comfy.org>
Date: Thu, 5 Mar 2026 18:06:53 -0800
Subject: [PATCH] feat: Transparent background for the Image and Video Previews
 (#9455)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Less jarring appearance, especially with different aspect ratios or
Alpha channels.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9455-feat-Transparent-background-for-the-Image-and-Video-Previews-31b6d73d3650819eaa82def10e66da21)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
---
 src/renderer/extensions/vueNodes/VideoPreview.vue            | 4 ++--
 src/renderer/extensions/vueNodes/components/ImagePreview.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/VideoPreview.vue b/src/renderer/extensions/vueNodes/VideoPreview.vue
index d870ec597a..0e4d04a9ab 100644
--- a/src/renderer/extensions/vueNodes/VideoPreview.vue
+++ b/src/renderer/extensions/vueNodes/VideoPreview.vue
@@ -7,7 +7,7 @@
     <!-- Video Wrapper -->
     <div
       ref="videoWrapperEl"
-      class="relative flex flex-1 overflow-hidden rounded-[5px] bg-node-component-surface"
+      class="relative flex flex-1 overflow-hidden rounded-[5px] bg-transparent"
       tabindex="0"
       role="region"
       :aria-label="$t('g.videoPreview')"
@@ -247,7 +247,7 @@ const handleFocusOut = (event: FocusEvent) => {
 
 const getNavigationDotClass = (index: number) =>
   cn(
-    'w-2 h-2 rounded-full transition-all duration-200 border-0 cursor-pointer',
+    'size-2 cursor-pointer rounded-full border-0 transition-all duration-200',
     index === currentIndex.value
       ? 'bg-base-foreground'
       : 'bg-base-foreground/50 hover:bg-base-foreground/80'
diff --git a/src/renderer/extensions/vueNodes/components/ImagePreview.vue b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
index 1056714c5e..f8b8fb5ed2 100644
--- a/src/renderer/extensions/vueNodes/components/ImagePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
@@ -7,7 +7,7 @@
     <!-- Image Wrapper -->
     <div
       ref="imageWrapperEl"
-      class="relative flex min-h-0 w-full flex-1 overflow-hidden rounded-[5px] bg-muted-background"
+      class="relative flex min-h-0 w-full flex-1 overflow-hidden rounded-[5px] bg-transparent"
       tabindex="0"
       role="img"
       :aria-label="$t('g.imagePreview')"
@@ -21,7 +21,7 @@
       <div
         v-if="imageError"
         role="alert"
-        class="flex size-full flex-1 flex-col items-center justify-around self-center bg-muted-background py-8 text-center text-base-foreground"
+        class="flex size-full flex-1 flex-col items-center justify-around self-center py-8 text-center text-base-foreground"
       >
         <i class="mb-2 icon-[lucide--image-off] size-12 text-base-foreground" />
         <p class="text-sm text-base-foreground">