mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-30 14:38:12 +00:00
ui
This commit is contained in:
@@ -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]);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user