diff --git a/src/app.html b/src/app.html
index 8950633bb9..47c5251370 100644
--- a/src/app.html
+++ b/src/app.html
@@ -19,22 +19,25 @@
 
     <body class="theme-dark" data-sveltekit-preload-data="hover">
         <script>
-            const isDocs = window.location.pathname.startsWith('/docs');
-            if (isDocs) {
+            const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+                ? 'dark'
+                : 'light';
+
+            function setInitialTheme() {
+                const isDocs = window.location.pathname.startsWith('/docs');
+                if (!isDocs) return;
+
                 const theme = localStorage.getItem('theme');
-                if (theme) {
-                    document.body.classList.remove('theme-dark', 'theme-light');
-                    if (theme === 'system') {
-                        const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
-                            .matches
-                            ? 'dark'
-                            : 'light';
-                        document.body.classList.add(`theme-${systemTheme}`);
-                    } else {
-                        document.body.classList.add(`theme-${theme}`);
-                    }
+                document.body.classList.remove('theme-dark', 'theme-light');
+
+                if (!theme || theme === 'system') {
+                    document.body.classList.add(`theme-${systemTheme}`);
+                } else {
+                    document.body.classList.add(`theme-${theme}`);
                 }
             }
+
+            setInitialTheme();
         </script>
         <div style="display: contents">%sveltekit.body%</div>
     </body>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 80489e1589..5b56321b38 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -27,13 +27,13 @@
 
     function getPreferredTheme() {
         if (!browser) {
-            return 'dark';
+            return 'system';
         }
 
         const theme = localStorage.getItem('theme');
 
         if (!isTheme(theme)) {
-            return 'dark';
+            return 'system';
         }
 
         return theme;
