diff --git a/tests/playgrounds/advanced_playground.html b/tests/playgrounds/advanced_playground.html
index d322bc0e00f..1fddea4a5f9 100644
--- a/tests/playgrounds/advanced_playground.html
+++ b/tests/playgrounds/advanced_playground.html
@@ -3,29 +3,14 @@
 <head>
 <meta charset="utf-8">
 <title>Advanced Blockly Playground</title>
-<script src="../../blockly_uncompressed.js"></script>
-<script src="../../msg/messages.js"></script>
-<script src="../themes/test_themes.js"></script>
+<script src="prepare.js"></script>
 <script src="./screenshot.js"></script>
+<script src="../themes/test_themes.js"></script>
 <script src="../../node_modules/@blockly/dev-tools/dist/index.js"></script>
 <script src="../../node_modules/@blockly/theme-modern/dist/index.js"></script>
 
-<script>
-// Custom requires for the playground.
-// Rendering.
-goog.require('Blockly.minimalist.Renderer');
-goog.require('Blockly.Themes.Zelos');
-
-// Other.
-goog.require('Blockly.WorkspaceCommentSvg');
-goog.require('Blockly.libraryBlocks');
-goog.require('Blockly.Dart.all');
-goog.require('Blockly.JavaScript.all');
-goog.require('Blockly.Lua.all');
-goog.require('Blockly.PHP.all');
-goog.require('Blockly.Python.all');
-</script>
-<script>
+<script type="module">
+import Blockly from './blockly.mjs';
 'use strict';
 
 function start() {
@@ -144,7 +129,7 @@
   // Adds a default-sized workspace comment to the workspace.
   menuOptions.push(Blockly.ContextMenu.workspaceCommentOption(workspace, e));
 }
-
+start();
 </script>
 
 <style>
@@ -169,7 +154,7 @@
   }
 </style>
 </head>
-<body onload="start()">
+<body>
   <div id="root"></div>
 </body>
 </html>
diff --git a/tests/playgrounds/prepare.js b/tests/playgrounds/prepare.js
index 8b9d534cb8c..d428b952410 100644
--- a/tests/playgrounds/prepare.js
+++ b/tests/playgrounds/prepare.js
@@ -70,16 +70,30 @@
           });
         </script>`);
   } else {
+    // The below code is necessary for a few reasons:
+    // - We need an absolute path instead of relative path because the
+    //   advanced_playground the and regular playground are in different folders.
+    // - We need to get the root directory for blockly because it is
+    //   different for github.io, appspot and local.
+    const files = [
+      'blockly_compressed.js',
+      'msg/messages.js',
+      'blocks_compressed.js',
+      'dart_compressed.js',
+      'javascript_compressed.js',
+      'lua_compressed.js',
+      'php_compressed.js',
+      'python_compressed.js',
+    ];
+
     // We need to load Blockly in compiled mode.
+    const hostName = window.location.host.replaceAll('.', '\\.');
+    const matches = new RegExp(hostName + '\\/(.*)tests').exec(window.location.href);
+    const root = matches && matches[1] ? matches[1] : '';
 
     // Load blockly_compressed.js et al. using <script> tags.
-    document.write('<script src="../../blockly_compressed.js"></script>');
-    document.write('<script src="../../msg/messages.js"></script>');
-    document.write('<script src="../../blocks_compressed.js"></script>');
-    document.write('<script src="../../dart_compressed.js"></script>');
-    document.write('<script src="../../javascript_compressed.js"></script>');
-    document.write('<script src="../../lua_compressed.js"></script>');
-    document.write('<script src="../../php_compressed.js"></script>');
-    document.write('<script src="../../python_compressed.js"></script>');
+    for (let i = 0; i < files.length; i++) {
+      document.write('<script src="/' + root + files[i] + '"></script>');
+    }
   }
 })();
diff --git a/tests/themes/test_themes.js b/tests/themes/test_themes.js
index 30792ae9e4c..ad42d50af99 100644
--- a/tests/themes/test_themes.js
+++ b/tests/themes/test_themes.js
@@ -5,24 +5,22 @@
  */
 'use strict';
 
-goog.provide('Blockly.TestThemes');
-
 
 /**
  * A theme with classic colours but enables start hats.
  */
-Blockly.Themes.TestHats = Blockly.Theme.defineTheme('testhats', {
+const TestHatsTheme = Blockly.Theme.defineTheme('testhats', {
   'base': Blockly.Themes.Classic
 });
-Blockly.Themes.TestHats.setStartHats(true);
+TestHatsTheme.setStartHats(true);
 
 /**
  * A theme with classic colours but a different font.
  */
-Blockly.Themes.TestFont = Blockly.Theme.defineTheme('testfont', {
+const TestFontTheme = Blockly.Theme.defineTheme('testfont', {
   'base': Blockly.Themes.Classic
 });
-Blockly.Themes.TestFont.setFontStyle({
+TestFontTheme.setFontStyle({
   'family': '"Times New Roman", Times, serif',
   'weight': null, // Use default font-weight
   'size': 16
@@ -33,9 +31,9 @@ Blockly.Themes.TestFont.setFontStyle({
  * @type {!Object<string, Blockly.Theme>}
  * @private
  */
-Blockly.Themes.testThemes_ = {
-  'Test Hats': Blockly.Themes.TestHats,
-  'Test Font': Blockly.Themes.TestFont
+const testThemes_ = {
+  'Test Hats': TestHatsTheme,
+  'Test Font': TestFontTheme
 };
 
 /**
@@ -45,7 +43,7 @@ Blockly.Themes.testThemes_ = {
  * @package
  */
 function getTestTheme(value) {
-  return Blockly.Themes.testThemes_[value];
+  return testThemes_[value];
 }
 
 /**
@@ -54,7 +52,7 @@ function getTestTheme(value) {
  */
 function populateTestThemes() {
   var themeChanger = document.getElementById('themeChanger');
-  var keys = Object.keys(Blockly.Themes.testThemes_);
+  var keys = Object.keys(testThemes_);
   for (var i = 0, key; (key = keys[i]); i++) {
     var option = document.createElement('option');
     option.setAttribute('value', key);
