fix: use text state

src/routes/+layout.svelte

@@ -1,11 +1,18 @@
 <script lang="ts">
   import AppHeader from "$components/layout/AppHeader.svelte";
+  import { themeState } from "$states/theme.svelte";
   import type { Snippet } from "svelte";
 
   interface Props {
     children: Snippet;
   }
 
+  $effect(() => {
+    const newTheme = themeState.theme;
+    document.documentElement.setAttribute("data-theme", newTheme);
+    localStorage.setItem("theme", newTheme);
+  });
+
   let { children }: Props = $props();
 </script>