diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a72ef41..2550412 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -6,11 +6,14 @@
   import TaskSidebar from "$lib/components/TaskSidebar.svelte";
   import Titlebar from "$lib/components/Titlebar.svelte";
   import { page, settings, saveSettings } from "$lib/stores/page.svelte.js";
+  import { getPreferences, updatePreferences } from "$lib/stores/preferences.svelte.js";
 
   import { page as sveltePage } from "$app/stores";
 
   let { children } = $props();
 
+  const prefs = getPreferences();
+
   // Detect secondary windows (float, viewer) — they use +layout@.svelte
   // but as a fallback, hide chrome if the URL matches
   let isSecondaryWindow = $derived(
@@ -27,23 +30,15 @@
     mouseY = e.clientY;
   }
 
-  // Theme application
+  // Theme — migrate from old class-based to new data-attribute system
+  // The preferences store handles DOM application via data-theme attribute
   $effect(() => {
-    const theme = settings.theme;
-    if (theme === "Light") {
-      document.documentElement.classList.add("light");
-      return;
+    // Sync legacy settings.theme → preferences store
+    const legacyTheme = settings.theme;
+    const mapped = legacyTheme === "Light" ? "light" : legacyTheme === "Dark" ? "dark" : "system";
+    if (prefs.theme !== mapped) {
+      updatePreferences({ theme: mapped });
     }
-    if (theme === "Dark") {
-      document.documentElement.classList.remove("light");
-      return;
-    }
-    // System mode
-    const mq = window.matchMedia("(prefers-color-scheme: light)");
-    const apply = () => document.documentElement.classList.toggle("light", mq.matches);
-    apply();
-    mq.addEventListener("change", apply);
-    return () => mq.removeEventListener("change", apply);
   });
 
   // Global hotkey registration
@@ -71,7 +66,7 @@
     registerGlobalHotkey(settings.globalHotkey);
   });
 
-  // Apply font size setting as CSS variable
+  // Apply font size setting as CSS variable (legacy — kept for backwards compat)
   $effect(() => {
     document.documentElement.style.setProperty("--font-size-transcript", `${settings.fontSize}px`);
   });