mirror of
https://github.com/bluewave-labs/Checkmate.git
synced 2026-05-03 06:59:32 -05:00
Added User theme preference detection
-> Used window.matchMedia API to get the user's theme preference.
This commit is contained in:
@@ -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 () => {
|
||||
|
||||
Reference in New Issue
Block a user