From dcee1d75e089fad5fcd756d3aecaa81616c6c670 Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Tue, 31 Mar 2026 22:59:39 +0200
Subject: [PATCH] Update background color handling in App.tsx

---
 src/app/App.tsx | 66 +++++++++++++++++++++++++------------------------
 1 file changed, 34 insertions(+), 32 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 7c911bf1..7b7550bb 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -3131,44 +3131,46 @@ export function App({ store, initialStatusMessage }: AppProps) {
               </div>
             </div>
 
-            <div className="form-section">
-              <div className="label">Background Colors</div>
-              {editorState.document.world.background.mode === "solid" ? (
-                <label className="form-field">
-                  <span className="label">Color</span>
-                  <input
-                    data-testid="world-background-solid-color"
-                    className="color-input"
-                    type="color"
-                    value={editorState.document.world.background.colorHex}
-                    onChange={(event) => applyWorldBackgroundColor(event.currentTarget.value)}
-                  />
-                </label>
-              ) : (
-                <div className="vector-inputs vector-inputs--two">
+            {editorState.document.world.background.mode !== "image" && (
+              <div className="form-section">
+                <div className="label">Background Colors</div>
+                {editorState.document.world.background.mode === "solid" ? (
                   <label className="form-field">
-                    <span className="label">Top</span>
+                    <span className="label">Color</span>
                     <input
-                      data-testid="world-background-top-color"
+                      data-testid="world-background-solid-color"
                       className="color-input"
                       type="color"
-                      value={editorState.document.world.background.topColorHex}
-                      onChange={(event) => applyWorldGradientColor("top", event.currentTarget.value)}
+                      value={editorState.document.world.background.colorHex}
+                      onChange={(event) => applyWorldBackgroundColor(event.currentTarget.value)}
                     />
                   </label>
-                  <label className="form-field">
-                    <span className="label">Bottom</span>
-                    <input
-                      data-testid="world-background-bottom-color"
-                      className="color-input"
-                      type="color"
-                      value={editorState.document.world.background.bottomColorHex}
-                      onChange={(event) => applyWorldGradientColor("bottom", event.currentTarget.value)}
-                    />
-                  </label>
-                </div>
-              )}
-            </div>
+                ) : (
+                  <div className="vector-inputs vector-inputs--two">
+                    <label className="form-field">
+                      <span className="label">Top</span>
+                      <input
+                        data-testid="world-background-top-color"
+                        className="color-input"
+                        type="color"
+                        value={editorState.document.world.background.topColorHex}
+                        onChange={(event) => applyWorldGradientColor("top", event.currentTarget.value)}
+                      />
+                    </label>
+                    <label className="form-field">
+                      <span className="label">Bottom</span>
+                      <input
+                        data-testid="world-background-bottom-color"
+                        className="color-input"
+                        type="color"
+                        value={editorState.document.world.background.bottomColorHex}
+                        onChange={(event) => applyWorldGradientColor("bottom", event.currentTarget.value)}
+                      />
+                    </label>
+                  </div>
+                )}
+              </div>
+            )}
 
             <div className="form-section">
               <div className="label">Ambient Light</div>