Fix: Background Image fix for dark theme loading change. (#8292)

## 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

@@ -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>

manifest.json

@@ -11,5 +11,6 @@
     }
   ],
   "display": "standalone",
-  "theme_color": "#000000"
+  "background_color": "#172dd7",
+  "theme_color": "#f0ff41"
 }

src/services/colorPaletteService.ts

@@ -222,10 +222,7 @@ export const useColorPaletteService = () => {
 
     const backgroundImage = settingStore.get('Comfy.Canvas.BackgroundImage')
     if (backgroundImage) {
-      rootStyle.setProperty(
+      rootStyle.setProperty('--bg-img', `url('${backgroundImage}')`)
-        '--bg-img',
-        `url('${backgroundImage}') no-repeat center /cover`
-      )
     } else {
       rootStyle.removeProperty('--bg-img')
     }