trufflesuite · davidmurdoch · Jul 5, 2023 · Mar 20, 2023 · May 8, 2023 · Jun 21, 2023
@@ -1,6 +1,9 @@
 require.config({
   paths: {
     vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.28.0/min/vs"
+  },
+  onNodeCreated: function (node) {
+    node.setAttribute("crossorigin", "anonymous");
   }
 });
 
@@ -13,7 +16,7 @@ function escapeHtml(unsafe) {
     .replace(/'/g, "&#039;");
 }
 
-function getTheme() {
+function getTheme(userTheme) {
   const styles = getComputedStyle(document.querySelector("#page"));
 
   const format = str => str.trim().substring(1, 9);
@@ -55,7 +58,7 @@ function getTheme() {
     { token: "string", foreground: text4 },
     { token: "keyword", foreground: text6 }
   ];
-  const base = getUserColorTheme() === "light" ? "vs" : "vs-dark";
+  const base = userTheme === "light" ? "vs" : "vs-dark";
   return {
     base,
     colors: {
@@ -75,7 +78,7 @@ function getTheme() {
     const newTheme = e.target.checked === true ? "light" : "dark";
     localStorage.setItem("theme", newTheme);
     document.documentElement.setAttribute("data-theme", newTheme);
-    monaco.editor.defineTheme("ganache", getTheme());
+    monaco.editor.defineTheme("ganache", getTheme(newTheme));
   });
 })();
 
@@ -103,9 +106,9 @@ require(["vs/editor/editor.main"], function () {
   const libUri = "ts:filename/provider.d.ts";
   monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource, libUri);
   monaco.editor.createModel(libSource, "typescript", monaco.Uri.parse(libUri));
-  monaco.editor.defineTheme("ganache", getTheme());
+  monaco.editor.defineTheme("ganache", getTheme(userColorTheme));
 
-  const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor;
+  const AsyncFunction = Object.getPrototypeOf(async function () { }).constructor;
   let ganachePromise = null;
   async function downloadGanacheIfNeeded() {
     if (Ganache) return;

@@ -447,6 +447,13 @@ const preamble =
 
 **Pro Tip**: You can define your own provider by adding \`const provider = ganache.provider({})\` to the start of any example and passing in your [startup options](https://trufflesuite.com/docs/ganache/reference/cli-options/).`);
 
+// this font is loaded when you navigate to ganache. Others are loaded as well, but they are dependent on the
+// User-Agent and thus different browsers get different versions. To verify check what fonts are downloaded, load
+// ganache.dev with devtools open, and check the `Font` tab within the Network tab.
+const fontPreload = `
+<link rel="preload" crossorigin="anonymous" as="font" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.28.0/min/vs/base/browser/ui/codicons/codicon/codicon.ttf">
+`;
+
 const html = `
 <!DOCTYPE html>
 <html lang="en">
@@ -455,17 +462,44 @@ const html = `
     <meta name="description" content="Ganache Ethereum JSON-RPC Documentation" />
     <meta name="author" content="David Murdoch" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="./assets/js/preload.js"></script>
+
     <link rel="shortcut icon" href="./assets/img/favicon.png" />
 
+    ${fontPreload}
+
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300i,300,400|Share+Tech+Mono&display=swap" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/css?family=Grand+Hotel&text=Ganache" rel="stylesheet" />
     <link rel="stylesheet" href="./assets/css/main.css" />
     <link rel="stylesheet" href="./assets/css/highlight-truffle.css" />
+    <link rel="preload" as="script" href="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js" integrity="sha512-c3Nl8+7g4LMSTdrm621y7kf9v3SDPnhxLNhcjFJbKECVnmZHTdo+IRO05sNLTH/D3vA6u1X32ehoLC7WFVdheg==" crossorigin="anonymous" />
+    <link rel="preload" as="script" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.28.0/min/vs/editor/editor.main.js" crossorigin="anonymous" />
+    <link rel="preload" as="script" href="./assets/js/inject-editor.js" />
+
+    <script>
+      function getUserColorTheme() {
+        const localTheme = localStorage.getItem("theme");
+        if (localTheme) {
+          return localTheme;
+        } else if (
+          window.matchMedia &&
+          window.matchMedia("(prefers-color-scheme: light)").matches
+        ) {
+          return "light";
+        } else {
+          return "dark";
+        }
+      }
+
+      const userColorTheme = getUserColorTheme();
+      document.documentElement.setAttribute("data-theme", userColorTheme);
+    </script>
   </head>
   <body>
     <input type="checkbox" id="sidebar-switch" tabindex="1">
     <input type="checkbox" id="theme-switch" tabindex="2">
+    <script>
+      document.querySelector("#theme-switch").checked = userColorTheme === "light";
+    </script>
     <div class="container" id="page">
       <header>
         <svg style="position:absolute;pointer-events:none;opacity:0;" width="10" height="10" viewBox="0 0 10 10">
@@ -516,13 +550,6 @@ const html = `
         </article>
       </main>
     </div>
-    <script> 
-      (function initColorTheme() {
-        const theme = getUserColorTheme();
-        const checked = theme === "light" ? true : false;
-        document.querySelector("#theme-switch").checked = checked;
-      })();
-    </script>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js" integrity="sha512-c3Nl8+7g4LMSTdrm621y7kf9v3SDPnhxLNhcjFJbKECVnmZHTdo+IRO05sNLTH/D3vA6u1X32ehoLC7WFVdheg==" crossorigin="anonymous"></script>
     <script src="./assets/js/inject-editor.js"></script>