diff --git a/src/components/NavBar.svelte b/src/components/NavBar.svelte
index c2e3f9a4e..0f9efe46e 100644
--- a/src/components/NavBar.svelte
+++ b/src/components/NavBar.svelte
@@ -1,6 +1,5 @@
 <script>
   import { query, hasQuery, search } from '~/store'
-  import { onMount } from 'svelte'
   import SearchFieldMini from './SearchFieldMini.svelte'
   import Divider from './Divider.svelte'
   import CreatePlaylistButton from './CreatePlaylistButton.svelte'
@@ -17,15 +16,6 @@
     hasQuery.set(false)
     search('')
   }
-
-  onMount(() => {
-    let mode = localStorage.theme || 'light'
-    if (mode === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      dark = true
-    } else {
-      dark = false
-    }
-  })
 </script>
 
 <nav
diff --git a/src/components/ToggleModeButton.svelte b/src/components/ToggleModeButton.svelte
index b4b102b2f..575102bfc 100644
--- a/src/components/ToggleModeButton.svelte
+++ b/src/components/ToggleModeButton.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { onMount } from 'svelte'
   import SquareButton from './SquareButton.svelte'
 
   let dark = false
@@ -14,6 +15,15 @@
       localStorage.theme = 'dark'
     }
   }
+
+  onMount(() => {
+    let mode = localStorage.theme || 'light'
+    if (mode === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      dark = true
+    } else {
+      dark = false
+    }
+  })
 </script>
 
 <SquareButton on:click={toggleDarkMode} aria-label="Toggle Dark Mode">