diff --git a/src/App.svelte b/src/App.svelte
index 4281ba61d..50f1e54df 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -24,6 +24,13 @@
 
   const activeRouteStore = router.activeRouteStore;
 
+  window
+    .matchMedia("(prefers-color-scheme: dark)")
+    .addEventListener("change", ({ matches }) => {
+      theme.set(matches ? "dark" : "light");
+      followSystemTheme.set(true);
+    });
+
   void router.loadFromLocation();
 
   $: document.documentElement.setAttribute("data-codefont", $codeFont);