diff --git a/src/main.js b/src/main.js
index d4325921..5538c39d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -64,6 +64,7 @@ import "@unocss/reset/tailwind.css";
 import "uno.css";
 
 const timeAgo = new TimeAgo("en-US");
+const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
 
 import("./registerServiceWorker");
 
@@ -240,13 +241,11 @@ const mixin = {
     computed: {
         theme() {
             this.refreshTheme; // forces Vue to recompute the value when the var gets changed
-            if (this.getPreferenceString("theme", "dark") == "auto") {
-                const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
-                // Forces the app to recompute the theme class
-                darkModePreference.addEventListener("change", () => this.refreshTheme++);
+            let themePref = this.getPreferenceString("theme", "dark");
+            if (themePref == "auto") {
                 return darkModePreference.matches ? "dark" : "light";
             }
-            return this.getPreferenceString("theme", "dark");
+            return themePref;
         },
         authenticated(_this) {
             return _this.getAuthToken() !== undefined;
@@ -279,6 +278,10 @@ const mixin = {
             refreshTheme: 0,
         };
     },
+    mounted() {
+        // Forces the app to recompute the theme class
+        darkModePreference.addEventListener("change", () => this.refreshTheme++);
+    },
 };
 
 const i18n = createI18n({