init

frontend/composables/useTheme.ts

@@ -0,0 +1,66 @@
+type ThemeMode = "light" | "dark";
+
+const STORAGE_KEY = "signals-theme";
+
+const themes: Record<ThemeMode, { background: string; surface: string }> = {
+  light: {
+    background: "#f3f6fb",
+    surface: "#ffffff"
+  },
+  dark: {
+    background: "#0f172a",
+    surface: "#162033"
+  }
+};
+
+export const useTheme = () => {
+  const theme = useState<ThemeMode>("theme-mode", () => "light");
+  const initialized = useState("theme-initialized", () => false);
+
+  const applyTheme = (nextTheme: ThemeMode) => {
+    if (!process.client) {
+      return;
+    }
+
+    theme.value = nextTheme;
+
+    const root = document.documentElement;
+    root.dataset.theme = nextTheme;
+    root.style.colorScheme = nextTheme;
+    root.classList.toggle("app-dark", nextTheme === "dark");
+
+    localStorage.setItem(STORAGE_KEY, nextTheme);
+
+    const themeMeta = document.querySelector('meta[name="theme-color"]');
+    const themeColor = themes[nextTheme].surface;
+
+    if (themeMeta) {
+      themeMeta.setAttribute("content", themeColor);
+    }
+
+    document.body.style.backgroundColor = themes[nextTheme].background;
+  };
+
+  const initializeTheme = () => {
+    if (!process.client || initialized.value) {
+      return;
+    }
+
+    const storedTheme = localStorage.getItem(STORAGE_KEY);
+    const nextTheme = storedTheme === "light" || storedTheme === "dark" ? storedTheme : "light";
+
+    applyTheme(nextTheme);
+    initialized.value = true;
+  };
+
+  const toggleTheme = () => {
+    applyTheme(theme.value === "dark" ? "light" : "dark");
+  };
+
+  return {
+    theme: readonly(theme),
+    initializeTheme,
+    applyTheme,
+    toggleTheme
+  };
+};