Revert "Inline color mode switcher code to reduce flashing (#88)" (#90)

* Revert "Inline color mode switcher code to reduce flashing (#88)"

This reverts commit 81c8774.

* Specify type=None for a non-module JS file

static/manifest.json

@@ -116,6 +116,11 @@
       "assets/js/index.js"
     ]
   },
+  "assets/js/color_mode_switcher.js": {
+    "file": "assets/color_mode_switcher.52334129.js",
+    "src": "assets/js/color_mode_switcher.js",
+    "isEntry": true
+  },
   "_echarts.128204f2.js": {
     "file": "assets/echarts.128204f2.js"
   },

templates/base.html

@@ -6,43 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="shortcut icon" href="{{ Configs.ctf_small_icon }}" type="image/x-icon">
 
-  <script>
-    // This script is inlined to reduce color flashing issues
-    function getPreferredTheme() {
-      const storedTheme = localStorage.getItem("theme");
-      if (storedTheme) {
-        return storedTheme;
-      }
-      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-    }
-    function showActiveTheme(theme) {
-      const activeThemeIcon = document.querySelector(".theme-switch i.fas");
-      activeThemeIcon.classList.toggle("fa-moon", theme === "dark");
-      activeThemeIcon.classList.toggle("fa-sun", theme !== "dark");
-    }
-    // Change body theme early to prevent flash
-    let currentTheme = getPreferredTheme();
-    document.documentElement.setAttribute("data-bs-theme", currentTheme);
-    // On browser color-scheme change, update
-    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
-      currentTheme = getPreferredTheme();
-      document.documentElement.setAttribute("data-bs-theme", currentTheme);
-      showActiveTheme(currentTheme);
-    });
-    window.addEventListener("load", () => {
-      showActiveTheme(currentTheme);
-      document.querySelectorAll(".theme-switch").forEach(e => {
-        e.addEventListener("click", ev => {
-          currentTheme = currentTheme === "light" ? "dark" : "light";
-          document.documentElement.setAttribute("data-bs-theme", currentTheme);
-          localStorage.setItem("theme", currentTheme);
-          showActiveTheme(currentTheme);
-          ev.preventDefault();
-        });
-      });
-    });
-  </script>
-
   {{ meta | safe }}
 
   {% block stylesheets %}
@@ -51,6 +14,8 @@
 
   {{ Plugins.styles }}
 
+  {{ Assets.js("assets/js/color_mode_switcher.js", type=None) }}
+
   <script type="text/javascript">
       window.init = {
           'urlRoot': "{{ request.script_root }}",

vite.config.js

@@ -63,6 +63,7 @@ export default defineConfig({
         users_private: resolve(__dirname, "assets/js/users/private.js"),
         users_list: resolve(__dirname, "assets/js/users/list.js"),
         main: resolve(__dirname, "assets/scss/main.scss"),
+        color_mode_switcher: resolve(__dirname, "assets/js/color_mode_switcher.js"),
       },
     },
   },