Inline color mode switcher code to reduce flashing

static/manifest.json

@@ -116,11 +116,6 @@
       "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,6 +6,59 @@
   <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>
+    "use strict";
+
+    /**
+     * Get user preferred theme from their past choice or browser
+     * @returns {String} User preferred theme
+     */
+    function getPreferredTheme() {
+      const storedTheme = localStorage.getItem("theme");
+      if (storedTheme) {
+        return storedTheme;
+      }
+      // Firefox with 'resistFingerprint' activated always returns light
+      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+
+    /**
+     * Update navbar icon to match given theme.
+     * @param {String} theme - 'dark' or '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);
+
+      // On button click, switch
+      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 %}
@@ -14,8 +67,6 @@
 
   {{ Plugins.styles }}
 
-  {{ Assets.js("assets/js/color_mode_switcher.js", defer=False) }}
-
   <script type="text/javascript">
       window.init = {
           'urlRoot': "{{ request.script_root }}",

vite.config.js

@@ -63,7 +63,6 @@ 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"),
       },
     },
   },