diff --git a/src_assets/common/assets/web/login.html b/src_assets/common/assets/web/login.html
index b72f86f3..342a6598 100644
--- a/src_assets/common/assets/web/login.html
+++ b/src_assets/common/assets/web/login.html
@@ -44,11 +44,14 @@
 </body>
 
 <script type="module">
-  import { createApp, ref } from "vue"
+  import { createApp, ref, onMounted } from "vue"
+  import { loadAutoTheme } from './theme'
   import { initApp } from './init'
 
   let app = createApp({
     setup() {
+      loadAutoTheme()
+
       const error = ref('');
       const success = ref(false);
       const loading = ref(false);
diff --git a/src_assets/common/assets/web/theme.js b/src_assets/common/assets/web/theme.js
index a1f49780..248c4d2e 100644
--- a/src_assets/common/assets/web/theme.js
+++ b/src_assets/common/assets/web/theme.js
@@ -65,20 +65,16 @@ export function setupThemeToggleListener() {
 }
 
 export function loadAutoTheme() {
-    (() => {
-        'use strict'
+    setTheme(getPreferredTheme())
 
-        setTheme(getPreferredTheme())
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        const storedTheme = getStoredTheme()
+        if (storedTheme !== 'light' && storedTheme !== 'dark') {
+            setTheme(getPreferredTheme())
+        }
+    })
 
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-            const storedTheme = getStoredTheme()
-            if (storedTheme !== 'light' && storedTheme !== 'dark') {
-                setTheme(getPreferredTheme())
-            }
-        })
-
-        window.addEventListener('DOMContentLoaded', () => {
-            showActiveTheme(getPreferredTheme())
-        })
-    })()
+    window.addEventListener('DOMContentLoaded', () => {
+        showActiveTheme(getPreferredTheme())
+    })
 }