From 133427b08e5781d2d1545ce236d6657c2dd7ebac Mon Sep 17 00:00:00 2001
From: Alexander Brown <drjkl@comfy.org>
Date: Sat, 24 Jan 2026 15:03:51 -0800
Subject: [PATCH] Fix: Background Image fix for dark theme loading change.
 (#8292)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

The variable whose name implied it was just an image URL bundled other
background pieces.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8292-Fix-Background-Image-fix-for-dark-theme-loading-change-2f26d73d36508177ae7bc24ae3cb027b)
by [Unito](https://www.unito.io)
---
 index.html                          | 10 +++++++++-
 manifest.json                       |  3 ++-
 src/services/colorPaletteService.ts |  5 +----
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index df41b803a..9ff6edb07 100644
--- a/index.html
+++ b/index.html
@@ -13,9 +13,17 @@
     <style>
       @media (prefers-color-scheme: dark) {
         body {
-          background-color: #202020;
+          /* Setting it early for background during load */
+          --bg-color: #202020;
         }
       }
+      body {
+        background-color: var(--bg-color);
+        background-image: var(--bg-img);
+        background-position: center;
+        background-size: cover;
+        background-repeat: no-repeat;
+      }
     </style>    
     <link rel="manifest" href="manifest.json">
   </head>
diff --git a/manifest.json b/manifest.json
index bd57dd388..8d22f6423 100644
--- a/manifest.json
+++ b/manifest.json
@@ -11,5 +11,6 @@
     }
   ],
   "display": "standalone",
-  "theme_color": "#000000"
+  "background_color": "#172dd7",
+  "theme_color": "#f0ff41"
 }
diff --git a/src/services/colorPaletteService.ts b/src/services/colorPaletteService.ts
index 8a9fa52c6..25f87195f 100644
--- a/src/services/colorPaletteService.ts
+++ b/src/services/colorPaletteService.ts
@@ -222,10 +222,7 @@ export const useColorPaletteService = () => {
 
     const backgroundImage = settingStore.get('Comfy.Canvas.BackgroundImage')
     if (backgroundImage) {
-      rootStyle.setProperty(
-        '--bg-img',
-        `url('${backgroundImage}') no-repeat center /cover`
-      )
+      rootStyle.setProperty('--bg-img', `url('${backgroundImage}')`)
     } else {
       rootStyle.removeProperty('--bg-img')
     }