diff --git a/ci/release/changelogs/next.md b/ci/release/changelogs/next.md
index f4616390ed..21eef7af11 100644
--- a/ci/release/changelogs/next.md
+++ b/ci/release/changelogs/next.md
@@ -13,6 +13,8 @@
   - `animate-interval` is no longer required, defaults to 1000ms for gifs [#2663](https://github.com/terrastruct/d2/pull/2663)
 - renders:
   - remote images are fetched more reliably [#2659](https://github.com/terrastruct/d2/pull/2659)
+- d2cli:
+  - Update the body background that match the SVG background [#2745](https://github.com/terrastruct/d2/pull/2745)
 
 #### Bugfixes ⛑️
 
diff --git a/d2cli/static/watch.js b/d2cli/static/watch.js
index b3596eff2d..08b84509cf 100644
--- a/d2cli/static/watch.js
+++ b/d2cli/static/watch.js
@@ -26,6 +26,14 @@ function init(reconnectDelay) {
       // we can't just set `d2SVG.innerHTML = msg.svg` need to parse this as xml not html
       const parsedXML = new DOMParser().parseFromString(msg.svg, "text/xml");
       d2SVG.replaceChildren(parsedXML.documentElement);
+
+      // Update the body/container background that match the SVG background
+      const bgRect = d2SVG.querySelector("rect");
+      if (bgRect && bgRect.hasAttribute("fill")) {
+        const bgColor = bgRect.getAttribute("fill");
+        document.body.style.backgroundColor = bgColor;
+      }
+
       changeFavicon("/static/favicon.ico");
       const svgEl = d2SVG.querySelector(".d2-svg");
       // just use inner SVG in watch mode