Load Default Target Theme in Teacher Tool (#10407)

Not adding support for changing themes yet, but we can at least load the default one.
microsoft · Mar 6, 2025 · d8425ad · d8425ad
1 parent c26c045
commit d8425ad
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/teachertool/public/index.html b/teachertool/public/index.html
@@ -22,7 +22,7 @@
       var pxtConfig = null;
     </script>
   </head>
-  <body>
+  <body class="pxt-theme-root">
     <noscript>You need to enable JavaScript to run this app.</noscript>
 
     <!-- @include tracking.html -->
@@ -32,6 +32,7 @@
     <script type="text/javascript" src="/blb/target.js"></script>
     <script type="text/javascript" src="/blb/pxtlib.js"></script>
     <script type="text/javascript" src="/blb/pxtsim.js"></script>
+    <script type="text/javascript" src="/blb/pxtrcdeps.js"></script>
 
     <div id="root"></div>
   </body>

diff --git a/teachertool/src/App.tsx b/teachertool/src/App.tsx
@@ -21,6 +21,7 @@ import { ErrorCode } from "./types/errorCode";
 import { loadProjectMetadataAsync } from "./transforms/loadProjectMetadataAsync";
 import { Constants, Ticks } from "./constants";
 import { UnsupportedExperienceModal } from "react-common/components/experiences/UnsupportedExperienceModal";
+import { ThemeManager } from "react-common/components/theming/themeManager";
 
 export const App = () => {
     const { state, dispatch } = useContext(AppStateContext);
@@ -36,6 +37,7 @@ export const App = () => {
                 const cfg = await downloadTargetConfigAsync();
                 dispatch(Actions.setTargetConfig(cfg || {}));
                 pxt.BrowserUtils.initTheme();
+                await initColorThemeAsync();
 
                 // Load catalog and validator plans into state.
                 await loadCatalogAsync();
@@ -80,6 +82,18 @@ export const App = () => {
         setIsSupported(pxt.U.isExperienceSupported(Constants.ExperienceId));
     }, []);
 
+    async function initColorThemeAsync() {
+        // We don't currently support switching themes in code eval, so just load the default.
+        const themeId = pxt.appTarget?.appTheme?.defaultColorTheme;
+
+        if (themeId) {
+            const themeManager = ThemeManager.getInstance(document);
+            if (themeId !== themeManager.getCurrentColorTheme()?.id) {
+                themeManager.switchColorTheme(themeId);
+            }
+        }
+    }
+
     return !inited || !authCheckComplete ? (
         <div className="ui active dimmer">
             <div className="ui large main loader msft"></div>