Initialize Vue 3 portfolio site with Vite, Tailwind CSS, and GSAP. Add Docker support and GitHub Actions for deployment. Include essential project files, configurations, and a Product Requirements Document (PRD).

src/composables/useTheme.ts

@@ -0,0 +1,48 @@
+import { ref } from "vue";
+
+const STORAGE_KEY = "bio-theme";
+const isDark = ref(false);
+
+function applyDarkClass(value: boolean) {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  if (value) root.classList.add("dark");
+  else root.classList.remove("dark");
+}
+
+function readInitial(): boolean {
+  if (typeof window === "undefined") return false;
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === "dark") return true;
+    if (stored === "light") return false;
+  } catch {
+    /* ignore */
+  }
+  return window.matchMedia?.("(prefers-color-scheme: dark)")?.matches ?? false;
+}
+
+/** Call once before mounting the app to avoid a flash of wrong theme. */
+export function initTheme() {
+  const dark = readInitial();
+  isDark.value = dark;
+  applyDarkClass(dark);
+}
+
+export function useTheme() {
+  function setTheme(dark: boolean) {
+    isDark.value = dark;
+    applyDarkClass(dark);
+    try {
+      localStorage.setItem(STORAGE_KEY, dark ? "dark" : "light");
+    } catch {
+      /* ignore */
+    }
+  }
+
+  function toggleTheme() {
+    setTheme(!isDark.value);
+  }
+
+  return { isDark, setTheme, toggleTheme };
+}