diff --git a/_includes/scripts/back_to_top.liquid b/_includes/scripts/back_to_top.liquid
index c52765d..0b74448 100644
--- a/_includes/scripts/back_to_top.liquid
+++ b/_includes/scripts/back_to_top.liquid
@@ -1,6 +1,6 @@
-<script src="{{ '/assets/js/vanilla-back-to-top.min.js' | relative_url | bust_file_cache }}"></script>
-<script>
-  {% if site.back_to_top %}
+{% if site.back_to_top %}
+  <script src="{{ '/assets/js/vanilla-back-to-top.min.js' | relative_url | bust_file_cache }}"></script>
+  <script>
     addBackToTop();
-  {% endif %}
-</script>
+  </script>
+{% endif %}
diff --git a/_includes/scripts/diff2html.liquid b/_includes/scripts/diff2html.liquid
index 8b5211d..0c9f0e0 100644
--- a/_includes/scripts/diff2html.liquid
+++ b/_includes/scripts/diff2html.liquid
@@ -6,11 +6,11 @@
     crossorigin="anonymous"
   ></script>
   <script>
-    let theme = determineComputedTheme();
+    let diff2HtmlTheme = determineComputedTheme();
 
     /* Create diff2html as another node and hide the code block, appending the diff2html node after it
        this is done to enable retrieving the code again when changing theme between light/dark */
-    document.onreadystatechange = () => {
+    document.addEventListener('readystatechange', () => {
       if (document.readyState === 'complete') {
         document.querySelectorAll('pre>code.language-diff2html').forEach((elem) => {
           const textData = elem.textContent;
@@ -20,11 +20,11 @@
           let diffElement = document.createElement('div');
           diffElement.classList.add('diff2html');
           backup.after(diffElement);
-          const configuration = { colorScheme: theme, drawFileList: true, highlight: true, matching: 'lines' };
+          const configuration = { colorScheme: diff2HtmlTheme, drawFileList: true, highlight: true, matching: 'lines' };
           const diff2htmlUi = new Diff2HtmlUI(diffElement, textData, configuration);
           diff2htmlUi.draw();
         });
       }
-    };
+    });
   </script>
 {% endif %}
diff --git a/_includes/scripts/echarts.liquid b/_includes/scripts/echarts.liquid
index 7030d68..fce103d 100644
--- a/_includes/scripts/echarts.liquid
+++ b/_includes/scripts/echarts.liquid
@@ -12,11 +12,11 @@
     ></script>
   {% endif %}
   <script>
-    let theme = determineComputedTheme();
+    let echartsTheme = determineComputedTheme();
 
     /* Create echarts chart as another node and hide the code block, appending the echarts node after it
        this is done to enable retrieving the code again when changing theme between light/dark */
-    document.onreadystatechange = () => {
+    document.addEventListener('readystatechange', () => {
       if (document.readyState === 'complete') {
         document.querySelectorAll('pre>code.language-echarts').forEach((elem) => {
           const jsonData = elem.textContent;
@@ -28,7 +28,7 @@
           backup.after(chartElement);
 
           /* create echarts */
-          if (theme === 'dark') {
+          if (echartsTheme === 'dark') {
             var chart = echarts.init(chartElement, 'dark-fresh-cut');
           } else {
             var chart = echarts.init(chartElement);
@@ -40,6 +40,6 @@
           });
         });
       }
-    };
+    });
   </script>
 {% endif %}
diff --git a/_includes/scripts/leaflet.liquid b/_includes/scripts/leaflet.liquid
index 1318118..393fdf4 100644
--- a/_includes/scripts/leaflet.liquid
+++ b/_includes/scripts/leaflet.liquid
@@ -6,7 +6,7 @@
   ></script>
   <script>
     /* Create leaflet map as another node and hide the code block, appending the leaflet node after it */
-    document.onreadystatechange = () => {
+    document.addEventListener('readystatechange', () => {
       if (document.readyState === 'complete') {
         document.querySelectorAll('pre>code.language-geojson').forEach((elem) => {
           const jsonData = elem.textContent;
@@ -26,6 +26,6 @@
           map.fitBounds(geoJSON.getBounds());
         });
       }
-    };
+    });
   </script>
 {% endif %}
diff --git a/_includes/scripts/mermaid.liquid b/_includes/scripts/mermaid.liquid
index 4a22fa5..8edab72 100644
--- a/_includes/scripts/mermaid.liquid
+++ b/_includes/scripts/mermaid.liquid
@@ -14,11 +14,11 @@
     ></script>
   {% endif %}
   <script>
-    let theme = determineComputedTheme();
+    let mermaidTheme = determineComputedTheme();
 
     /* Create mermaid diagram as another node and hide the code block, appending the mermaid node after it
        this is done to enable retrieving the code again when changing theme between light/dark */
-    document.onreadystatechange = () => {
+    document.addEventListener('readystatechange', () => {
       if (document.readyState === 'complete') {
         document.querySelectorAll('pre>code.language-mermaid').forEach((elem) => {
           const svgCode = elem.textContent;
@@ -32,7 +32,7 @@
           backup.after(mermaid);
         });
 
-        mermaid.initialize({ theme: theme });
+        mermaid.initialize({ theme: mermaidTheme });
 
         /* Zoomable mermaid diagrams */
         if (typeof d3 !== 'undefined') {
@@ -50,6 +50,6 @@
           });
         }
       }
-    };
+    });
   </script>
 {% endif %}
diff --git a/_includes/scripts/pseudocode.liquid b/_includes/scripts/pseudocode.liquid
index 5e9458b..be942ed 100644
--- a/_includes/scripts/pseudocode.liquid
+++ b/_includes/scripts/pseudocode.liquid
@@ -30,7 +30,7 @@
     crossorigin="anonymous"
   ></script>
   <script>
-    document.onreadystatechange = () => {
+    document.addEventListener('readystatechange', () => {
       if (document.readyState === 'complete') {
         document.querySelectorAll('pre>code.language-pseudocode').forEach((elem) => {
           const texData = elem.textContent;
@@ -47,6 +47,6 @@
           pseudocode.renderElement(pseudoCodeElement);
         });
       }
-    };
+    });
   </script>
 {% endif %}
diff --git a/_includes/scripts/search.liquid b/_includes/scripts/search.liquid
index 7fb3039..b1540a9 100644
--- a/_includes/scripts/search.liquid
+++ b/_includes/scripts/search.liquid
@@ -2,10 +2,10 @@
   <script type="module" src="{{ '/assets/js/search/ninja-keys.min.js' | relative_url | bust_file_cache }}"></script>
   <ninja-keys hideBreadcrumbs noAutoLoadMdIcons placeholder="Type to start searching"></ninja-keys>
   <script>
-    let theme = determineComputedTheme();
+    let searchTheme = determineComputedTheme();
     const ninjaKeys = document.querySelector('ninja-keys');
 
-    if (theme === 'dark') {
+    if (searchTheme === 'dark') {
       ninjaKeys.classList.add('dark');
     } else {
       ninjaKeys.classList.remove('dark');
diff --git a/_includes/scripts/typograms.liquid b/_includes/scripts/typograms.liquid
index 73336ec..0983b2c 100644
--- a/_includes/scripts/typograms.liquid
+++ b/_includes/scripts/typograms.liquid
@@ -4,7 +4,7 @@
   <script>
     /* Create typogram as another node and hide the code block, appending the typogram node after it
        this is done to enable retrieving the code again when changing theme between light/dark */
-    document.onreadystatechange = () => {
+    document.addEventListener('readystatechange', () => {
       if (document.readyState === 'complete') {
         document.querySelectorAll('pre>code.language-typograms').forEach((elem) => {
           const texData = elem.textContent;
@@ -18,6 +18,6 @@
           parent.removeChild(elem.parentElement);
         });
       }
-    };
+    });
   </script>
 {% endif %}
diff --git a/_includes/scripts/vega.liquid b/_includes/scripts/vega.liquid
index dadd4c1..49f1236 100644
--- a/_includes/scripts/vega.liquid
+++ b/_includes/scripts/vega.liquid
@@ -19,11 +19,11 @@
   ></script>
 
   <script>
-    let pageTheme = determineComputedTheme();
+    let vegaTheme = determineComputedTheme();
 
     /* Create vega lite chart as another node and hide the code block, appending the vega lite node after it
        this is done to enable retrieving the code again when changing theme between light/dark */
-    document.onreadystatechange = () => {
+    document.addEventListener('readystatechange', () => {
       if (document.readyState === 'complete') {
         document.querySelectorAll('pre>code.language-vega_lite').forEach((elem) => {
           const jsonData = elem.textContent;
@@ -35,13 +35,13 @@
           backup.after(chartElement);
 
           /* Embed the visualization in the container */
-          if (pageTheme === 'dark') {
+          if (vegaTheme === 'dark') {
             vegaEmbed(chartElement, JSON.parse(jsonData), { theme: 'dark' });
           } else {
             vegaEmbed(chartElement, JSON.parse(jsonData));
           }
         });
       }
-    };
+    });
   </script>
 {% endif %}
diff --git a/assets/js/common.js b/assets/js/common.js
index bc9d136..4134ddb 100644
--- a/assets/js/common.js
+++ b/assets/js/common.js
@@ -37,12 +37,12 @@ $(document).ready(function () {
   cssLink.rel = "stylesheet";
   cssLink.type = "text/css";
 
-  let theme = determineComputedTheme();
+  let jupyterTheme = determineComputedTheme();
 
   $(".jupyter-notebook-iframe-container iframe").each(function () {
     $(this).contents().find("head").append(cssLink);
 
-    if (theme == "dark") {
+    if (jupyterTheme == "dark") {
       $(this).bind("load", function () {
         $(this).contents().find("body").attr({
           "data-jp-theme-light": "false",
diff --git a/assets/js/shortcut-key.js b/assets/js/shortcut-key.js
index f8de525..a872bd2 100644
--- a/assets/js/shortcut-key.js
+++ b/assets/js/shortcut-key.js
@@ -1,5 +1,5 @@
 // Check if the user is on a Mac and update the shortcut key for search accordingly
-document.onreadystatechange = () => {
+document.addEventListener("readystatechange", () => {
   if (document.readyState === "interactive") {
     let isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
     let shortcutKeyElement = document.querySelector("#search-toggle .nav-link");
@@ -8,4 +8,4 @@ document.onreadystatechange = () => {
       shortcutKeyElement.innerHTML = '&#x2318; k <i class="ti ti-search"></i>';
     }
   }
-};
+});