Create centralized theme management with useTheme composable

- Extract theme initialization logic from main.ts into useTheme composable
- Add setTheme() and initTheme() functions for consistent theme handling
- Update ThemePreferences to use useTheme instead of duplicate logic
- Remove unused DarkmodeToggle component
- Clean up main.ts from ~49 to 28 lines (theme logic now in composable)
- Establish single source of truth for theme management
- Follow Vue 3 composables pattern for better organization and testability

src/main.ts

@@ -2,42 +2,14 @@ import { createApp } from "vue";
 import router from "./routes";
 import store from "./store";
 import Toast from "./plugins/Toast";
+import { useTheme } from "./composables/useTheme";
 
 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
+const { initTheme } = useTheme();
 initTheme();
 
-store.dispatch("darkmodeModule/findAndSetDarkmodeSupported");
 store.dispatch("user/initUserFromCookie");
 
 const app = createApp(App);