From 77e9457614a3e2d3c94a56adaab79526d2105e57 Mon Sep 17 00:00:00 2001 From: aarya-16 Date: Fri, 25 Oct 2024 14:30:49 +0530 Subject: [PATCH 1/4] Added User theme preference detection -> Used window.matchMedia API to get the user's theme preference. --- Client/src/App.jsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/Client/src/App.jsx b/Client/src/App.jsx index ed97b67f9..c8fb60d54 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -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 () => { From 8c2151dcf325ceb0381593a8e7f5c8d7f84a7567 Mon Sep 17 00:00:00 2001 From: aarya-16 Date: Fri, 25 Oct 2024 14:46:57 +0530 Subject: [PATCH 2/4] Added event listener and older browser support --- Client/src/App.jsx | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/Client/src/App.jsx b/Client/src/App.jsx index c8fb60d54..cccd4c6a7 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -42,11 +42,14 @@ import { networkService } from "./main"; import { setMode } from "./Features/UI/uiSlice"; const getPreferredTheme = () => { - if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { - return 'dark'; + try { + return window?.matchMedia?.('(prefers-color-scheme: dark)')?.matches? 'dark': 'light'; + } + catch { + return 'light'; } - return 'light'; } + function App() { const AdminCheckedRegister = withAdminCheck(Register); const MonitorsWithAdminProp = withAdminProp(Monitors); @@ -69,6 +72,17 @@ function App() { useEffect(() => { const theme = getPreferredTheme(); dispatch(setMode(theme)); + + const mediaQuery = window?.matchMedia?.('(prefers-color-scheme: dark)'); + const handleThemeChange = (e) => { + dispatch(setMode(e.matches ? 'dark' : 'light')); + }; + + mediaQuery?.addEventListener?.('change', handleThemeChange); + + return () => { + mediaQuery?.removeEventListener?.('change', handleThemeChange); + }; },[dispatch]); // Cleanup From 0c3d8245e9ce4f162b8297bab51173f55275475b Mon Sep 17 00:00:00 2001 From: aarya-16 Date: Sun, 27 Oct 2024 20:33:33 +0530 Subject: [PATCH 3/4] Theme preference logic moved to UISlice --- Client/src/App.jsx | 27 --------------------------- Client/src/Features/UI/uiSlice.js | 2 +- 2 files changed, 1 insertion(+), 28 deletions(-) diff --git a/Client/src/App.jsx b/Client/src/App.jsx index cccd4c6a7..ed97b67f9 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -39,17 +39,6 @@ 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 = () => { - try { - return window?.matchMedia?.('(prefers-color-scheme: dark)')?.matches? 'dark': 'light'; - } - catch { - return 'light'; - } -} - function App() { const AdminCheckedRegister = withAdminCheck(Register); const MonitorsWithAdminProp = withAdminProp(Monitors); @@ -69,22 +58,6 @@ function App() { } }, [dispatch, authToken]); - useEffect(() => { - const theme = getPreferredTheme(); - dispatch(setMode(theme)); - - const mediaQuery = window?.matchMedia?.('(prefers-color-scheme: dark)'); - const handleThemeChange = (e) => { - dispatch(setMode(e.matches ? 'dark' : 'light')); - }; - - mediaQuery?.addEventListener?.('change', handleThemeChange); - - return () => { - mediaQuery?.removeEventListener?.('change', handleThemeChange); - }; - },[dispatch]); - // Cleanup useEffect(() => { return () => { diff --git a/Client/src/Features/UI/uiSlice.js b/Client/src/Features/UI/uiSlice.js index 0a938391a..d77e3d2c6 100644 --- a/Client/src/Features/UI/uiSlice.js +++ b/Client/src/Features/UI/uiSlice.js @@ -15,7 +15,7 @@ const initialState = { sidebar: { collapsed: false, }, - mode: "light", + mode: window?.matchMedia?.('(prefers-color-scheme: dark)')?.matches? "dark": "light", greeting: { index: 0, lastUpdate: null }, timezone: "America/Toronto", }; From 7a559977ca696d7b50a907f9445f57560e152a8c Mon Sep 17 00:00:00 2001 From: aarya-16 Date: Mon, 28 Oct 2024 17:03:52 +0530 Subject: [PATCH 4/4] Shifted mode ternary to a variable --- Client/src/Features/UI/uiSlice.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/Client/src/Features/UI/uiSlice.js b/Client/src/Features/UI/uiSlice.js index d77e3d2c6..872691bbf 100644 --- a/Client/src/Features/UI/uiSlice.js +++ b/Client/src/Features/UI/uiSlice.js @@ -1,5 +1,7 @@ import { createSlice } from "@reduxjs/toolkit"; +const initialMode = window?.matchMedia?.('(prefers-color-scheme: dark)')?.matches ? "dark" : "light"; + // Initial state for UI settings. // Add more settings as needed (e.g., theme preferences, user settings) const initialState = { @@ -15,7 +17,7 @@ const initialState = { sidebar: { collapsed: false, }, - mode: window?.matchMedia?.('(prefers-color-scheme: dark)')?.matches? "dark": "light", + mode: initialMode, greeting: { index: 0, lastUpdate: null }, timezone: "America/Toronto", };