Add fetch dark mode system preference #354

ral-facilities · Aug 18, 2020 · 404fab2 · 404fab2
1 parent c784381
commit 404fab2
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 15 deletions.
diff --git a/src/state/actions/scigateway.actions.tsx b/src/state/actions/scigateway.actions.tsx
@@ -135,6 +135,16 @@ export const initialiseAnalytics = (): Action => ({
 
 export const configureSite = (): ThunkResult<Promise<void>> => {
   return async (dispatch, getState) => {
+    // load dark mode preference from local storage into store
+    // otherwise, fetch system preference
+    const darkModeLocalStorage = localStorage.getItem('darkMode');
+    if (darkModeLocalStorage) {
+      const preference = darkModeLocalStorage === 'true' ? true : false;
+      dispatch(loadDarkModePreference(preference));
+    } else {
+      const mq = window.matchMedia('(prefers-color-scheme: dark)');
+      dispatch(loadDarkModePreference(mq.matches));
+    }
     await axios
       .get(`/settings.json`)
       .then((res) => {
@@ -213,14 +223,6 @@ export const configureSite = (): ThunkResult<Promise<void>> => {
         const loadingPlugins = loadMicroFrontends.init(settings.plugins);
         loadingPromises.push(loadingPlugins);
 
-        // load dark mode preference from local storage into store
-        // otherwise, intial state is false
-        const darkModeLocalStorage = localStorage.getItem('darkMode');
-        if (darkModeLocalStorage) {
-          const preference = darkModeLocalStorage === 'true' ? true : false;
-          dispatch(loadDarkModePreference(preference));
-        }
-
         return Promise.all(loadingPromises).then(() => {
           dispatch(siteLoadingUpdate(false));
         });

diff --git a/src/state/middleware/scigateway.middleware.test.tsx b/src/state/middleware/scigateway.middleware.test.tsx
@@ -69,7 +69,7 @@ describe('scigateway middleware', () => {
   const loadDarkModePreferenceAction = {
     type: LoadDarkModePreferenceType,
     payload: {
-      preference: false,
+      darkMode: false,
     },
   };
 

diff --git a/src/state/middleware/scigateway.middleware.tsx b/src/state/middleware/scigateway.middleware.tsx
@@ -47,8 +47,14 @@ export const listenToPlugins = (
   dispatch: Dispatch,
   getState: () => StateType
 ): void => {
+  let darkModePreference;
   const darkModeLocalStorage = localStorage.getItem('darkMode');
-  const darkModePreference = darkModeLocalStorage === 'true' ? true : false;
+  if (darkModeLocalStorage) {
+    darkModePreference = darkModeLocalStorage === 'true' ? true : false;
+  } else {
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+    darkModePreference = mq.matches;
+  }
   const theme = buildTheme(darkModePreference);
 
   document.addEventListener(microFrontendMessageId, (event) => {
@@ -152,11 +158,7 @@ const ScigatewayMiddleware: Middleware = ((
 
   if (action.type === LoadDarkModePreferenceType) {
     next(action);
-
-    const darkModeLocalStorage = localStorage.getItem('darkMode');
-    const darkModePreference = darkModeLocalStorage === 'true' ? true : false;
-    const theme = buildTheme(darkModePreference);
-
+    const theme = buildTheme(action.payload.darkMode);
     store.dispatch(sendThemeOptions(theme));
     return store.dispatch(requestPluginRerender());
   }