From 0e55453ca0115d7b48ab01f790ca811e46159577 Mon Sep 17 00:00:00 2001
From: Thomas Sparks <69657545+thsparks@users.noreply.github.com>
Date: Fri, 7 Mar 2025 11:23:53 -0800
Subject: [PATCH] Load Theme in Version History Preview (#10413)

Fixes microsoft/pxt-arcade#6303 by sending a set-theme message when initializing version history.
---
 webapp/src/timeMachine.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/webapp/src/timeMachine.tsx b/webapp/src/timeMachine.tsx
index 0d2e88d9d9dc..5144880baa54 100644
--- a/webapp/src/timeMachine.tsx
+++ b/webapp/src/timeMachine.tsx
@@ -7,6 +7,7 @@ import { hideDialog, warningNotification } from "./core";
 import { FocusTrap } from "../../react-common/components/controls/FocusTrap";
 import { classList } from "../../react-common/components/util";
 import { HistoryFile, applySnapshot, patchConfigEditorVersion } from "../../pxteditor/history";
+import { ThemeManager } from "../../react-common/components/theming/themeManager";
 
 import ScriptText = pxt.workspace.ScriptText;
 
@@ -151,6 +152,18 @@ export const TimeMachine = (props: TimeMachineProps) => {
 
         importProject.current = loadProject;
 
+        // Sync iframe theme with main theme.
+        const themeManager = ThemeManager.getInstance(document);
+        const currentTheme = themeManager.getCurrentColorTheme();
+        if (currentTheme) {
+            sendMessageAsync({
+                type: "pxteditor",
+                action: "setcolorthemebyid",
+                colorThemeId: currentTheme.id,
+                savePreference: false
+            } as pxt.editor.EditorMessageSetColorThemeRequest);
+        }
+
         window.addEventListener("message", onMessageReceived);
         return () => {
             window.removeEventListener("message", onMessageReceived);
@@ -528,4 +541,4 @@ function getTimelineEntries(history: HistoryFile): TimelineEntry[] {
             entries: buckets[key]
         } as TimelineEntry
     ))
-}
\ No newline at end of file
+}