Skip to content

Commit

Permalink
Added User theme preference detection
Browse files Browse the repository at this point in the history
-> Used window.matchMedia API to get the user's theme preference.
  • Loading branch information
aarya-16 committed Oct 25, 2024
1 parent 268f302 commit 77e9457
Showing 1 changed file with 13 additions and 0 deletions.
13 changes: 13 additions & 0 deletions Client/src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -58,6 +66,11 @@ function App() {
}
}, [dispatch, authToken]);

useEffect(() => {
const theme = getPreferredTheme();
dispatch(setMode(theme));
},[dispatch]);

// Cleanup
useEffect(() => {
return () => {
Expand Down

0 comments on commit 77e9457

Please sign in to comment.