From 7f089c5c48d099050715da2f2bf89a3b10bbcf5f Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Fri, 27 Feb 2026 17:25:38 +0100
Subject: [PATCH] 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 | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/main.ts b/src/main.ts
index c773a08..406c66d 100644
--- a/src/main.ts
+++ b/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");