test

frontend/src/stores/theme.ts

@@ -0,0 +1,51 @@
+import { defineStore } from "pinia";
+
+export type ThemePreference = "system" | "light" | "dark";
+export type ThemeValue = "light" | "dark";
+
+const STORAGE_KEY = "scholarr-theme-preference";
+
+function systemTheme(): ThemeValue {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+function applyTheme(theme: ThemeValue, preference: ThemePreference): void {
+  const root = document.documentElement;
+  root.classList.toggle("dark", theme === "dark");
+  root.setAttribute("data-theme-preference", preference);
+}
+
+export const useThemeStore = defineStore("theme", {
+  state: () => ({
+    preference: "system" as ThemePreference,
+    active: "light" as ThemeValue,
+  }),
+  actions: {
+    initialize(): void {
+      let stored: string | null = null;
+      try {
+        stored = localStorage.getItem(STORAGE_KEY);
+      } catch (_err) {
+        stored = null;
+      }
+
+      if (stored === "light" || stored === "dark" || stored === "system") {
+        this.preference = stored;
+      }
+
+      this.active = this.preference === "system" ? systemTheme() : this.preference;
+      applyTheme(this.active, this.preference);
+    },
+    setPreference(preference: ThemePreference): void {
+      this.preference = preference;
+      this.active = preference === "system" ? systemTheme() : preference;
+      applyTheme(this.active, this.preference);
+
+      try {
+        localStorage.setItem(STORAGE_KEY, preference);
+      } catch (_err) {
+        // Ignore storage failures in private contexts.
+      }
+    },
+  },
+});