user management ui

apps/edr-freight-web/backoffice/src/shared/hooks/useDarkMode.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+
+export const useDarkMode = () => {
+  const [isDarkMode, setIsDarkMode] = useState(() => {
+    // Initialize from localStorage or system preference
+    const savedTheme = localStorage.getItem("darkMode");
+    if (savedTheme) {
+      return savedTheme === "true";
+    }
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  });
+
+  useEffect(() => {
+    // Apply dark mode class on mount and when isDarkMode changes
+    if (isDarkMode) {
+      document.documentElement.classList.add("dark");
+      localStorage.setItem("darkMode", "true");
+    } else {
+      document.documentElement.classList.remove("dark");
+      localStorage.setItem("darkMode", "false");
+    }
+  }, [isDarkMode]);
+
+  const toggleDarkMode = () => {
+    setIsDarkMode((prev) => !prev);
+  };
+
+  return { isDarkMode, toggleDarkMode };
+};