From bf4a2cc46b9bf3d77e96072f99a1aac19450ec51 Mon Sep 17 00:00:00 2001
From: Joe Politz <joe.politz@gmail.com>
Date: Fri, 9 Jan 2026 15:17:01 -0800
Subject: [PATCH] Reactor backgrounds

- Make reactor backgrounds respect the theme
- Change the reactor infrastructure to overwrite the canvas with 255,255,255,0
  (transparent), rather than 255,255,255,1 (WHITE), pixels, to make reactor
  images and values look the same as they would at the REPL
---
 src/web/css/editor.css    | 4 ++++
 src/web/js/repl-ui.js     | 2 +-
 src/web/js/trove/world.js | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/web/css/editor.css b/src/web/css/editor.css
index e7e85bf6..6cea932b 100644
--- a/src/web/css/editor.css
+++ b/src/web/css/editor.css
@@ -480,6 +480,10 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket-region {
   cursor: pointer;
 }
 
+div.repl-animation {
+  background-color: var(--background) !important;
+}
+
 div.trace {
   overflow-x: auto;
   padding-top: 1px;
diff --git a/src/web/js/repl-ui.js b/src/web/js/repl-ui.js
index ddcb7b55..9fdfc9b1 100644
--- a/src/web/js/repl-ui.js
+++ b/src/web/js/repl-ui.js
@@ -342,7 +342,7 @@
         });
       var currentZIndex = 15000;
       runtime.setParam("current-animation-port", function(dom, title, closeCallback) {
-          var animationDiv = $("<div>").css({"z-index": currentZIndex + 1});
+          var animationDiv = $("<div class='repl-animation'>").css({"z-index": currentZIndex + 1});
           animationDivs.push(animationDiv);
           output.append(animationDiv);
           function onClose() {
diff --git a/src/web/js/trove/world.js b/src/web/js/trove/world.js
index 3909b94a..7eded91a 100644
--- a/src/web/js/trove/world.js
+++ b/src/web/js/trove/world.js
@@ -532,7 +532,7 @@
               }
               var ctx = reusableCanvas.getContext("2d");
               ctx.save();
-              ctx.fillStyle = "rgba(255,255,255,1)";
+              ctx.fillStyle = "rgba(255,255,255,0)";
               ctx.fillRect(0, 0, width, height);
               ctx.restore();
               theImage.render(ctx, 0, 0);