This commit is contained in:
natib21
2026-07-14 07:20:01 +00:00
parent 5117cdd357
commit 1d18248795
5 changed files with 43 additions and 8 deletions

View File

@@ -1,11 +1,15 @@
import { useEffect, useState } from "react";
// Same storage key/values as main.tsx and FreightDashboardLayout so the
// vendored IAM UI toggle and the host dashboard toggle stay in sync.
const THEME_STORAGE_KEY = "edr-theme";
export const useDarkMode = () => {
const [isDarkMode, setIsDarkMode] = useState(() => {
// Initialize from localStorage or system preference
const savedTheme = localStorage.getItem("darkMode");
if (savedTheme) {
return savedTheme === "true";
const savedTheme = localStorage.getItem(THEME_STORAGE_KEY);
if (savedTheme === "dark" || savedTheme === "light") {
return savedTheme === "dark";
}
return window.matchMedia("(prefers-color-scheme: dark)").matches;
});
@@ -14,10 +18,10 @@ export const useDarkMode = () => {
// Apply dark mode class on mount and when isDarkMode changes
if (isDarkMode) {
document.documentElement.classList.add("dark");
localStorage.setItem("darkMode", "true");
localStorage.setItem(THEME_STORAGE_KEY, "dark");
} else {
document.documentElement.classList.remove("dark");
localStorage.setItem("darkMode", "false");
localStorage.setItem(THEME_STORAGE_KEY, "light");
}
}, [isDarkMode]);