Added User theme preference detection

-> Used window.matchMedia API to get the user's theme preference.
This commit is contained in:
aarya-16
2024-10-25 14:30:49 +05:30
parent 268f302eb7
commit 77e9457614
+13
View File
@@ -39,6 +39,14 @@ import { useDispatch } from "react-redux";
import { getAppSettings, updateAppSettings } from "./Features/Settings/settingsSlice";
import { logger } from "./Utils/Logger"; // Import the logger
import { networkService } from "./main";
import { setMode } from "./Features/UI/uiSlice";
const getPreferredTheme = () => {
if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark';
}
return 'light';
}
function App() {
const AdminCheckedRegister = withAdminCheck(Register);
const MonitorsWithAdminProp = withAdminProp(Monitors);
@@ -58,6 +66,11 @@ function App() {
}
}, [dispatch, authToken]);
useEffect(() => {
const theme = getPreferredTheme();
dispatch(setMode(theme));
},[dispatch]);
// Cleanup
useEffect(() => {
return () => {