diff --git a/src/components/ToggleModeButton.svelte b/src/components/ToggleModeButton.svelte
index 575102bfc..6855ddd4c 100644
--- a/src/components/ToggleModeButton.svelte
+++ b/src/components/ToggleModeButton.svelte
@@ -4,8 +4,11 @@
 
   let dark = false
   function toggleDarkMode() {
-    let mode = localStorage.theme || 'light'
-    if (mode === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    const prefersColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'light'
+    const mode = localStorage.theme || prefersColorScheme
+    if (mode === 'dark') {
       dark = false
       document.documentElement.classList.remove('dark')
       localStorage.theme = 'light'
@@ -17,8 +20,11 @@
   }
 
   onMount(() => {
-    let mode = localStorage.theme || 'light'
-    if (mode === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    const prefersColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'light'
+    const mode = localStorage.theme || prefersColorScheme
+    if (mode === 'dark') {
       dark = true
     } else {
       dark = false
diff --git a/src/pages/+layout.svelte b/src/pages/+layout.svelte
index 645cf33f1..96ff24b2e 100644
--- a/src/pages/+layout.svelte
+++ b/src/pages/+layout.svelte
@@ -5,13 +5,14 @@
 <svelte:head>
   <script>
     if (document) {
-      let mode = localStorage.theme || 'light'
-      if (mode === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      const prefersColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light'
+      const mode = localStorage.theme || prefersColorScheme
+      if (mode === 'dark') {
         document.documentElement.classList.add('dark')
-        localStorage.theme = 'dark'
       } else {
         document.documentElement.classList.remove('dark')
-        localStorage.theme = 'light'
       }
     }
   </script>