Add theme initialization on app startup

- Load saved theme preference from localStorage
- Support for 'auto' theme that follows system preference
- Listen for system theme changes and update accordingly
- Apply theme before app mounts to prevent flash

src/main.ts

@@ -5,6 +5,38 @@ import Toast from "./plugins/Toast";
 
 import App from "./App.vue";
 
+// Initialize theme from localStorage
+function initTheme() {
+  const savedTheme = localStorage.getItem("theme-preference") || "auto";
+
+  function systemDarkModeEnabled() {
+    const computedStyle = window.getComputedStyle(document.body);
+    if (computedStyle?.colorScheme != null) {
+      return computedStyle.colorScheme.includes("dark");
+    }
+    return false;
+  }
+
+  if (savedTheme === "auto") {
+    const systemDark = systemDarkModeEnabled();
+    document.body.className = systemDark ? "dark" : "light";
+
+    // Listen for system theme changes
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    mediaQuery.addEventListener("change", e => {
+      const currentTheme = localStorage.getItem("theme-preference");
+      if (currentTheme === "auto") {
+        document.body.className = e.matches ? "dark" : "light";
+      }
+    });
+  } else {
+    document.body.className = savedTheme;
+  }
+}
+
+// Initialize theme before mounting
+initTheme();
+
 store.dispatch("darkmodeModule/findAndSetDarkmodeSupported");
 store.dispatch("user/initUserFromCookie");