Update initial theme application

allamed · May 7, 2022 · 3c27f48 · 3c27f48
1 parent 940f49a
commit 3c27f48
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/src/components/ThemeProvider/ThemeProvider.js b/src/components/ThemeProvider/ThemeProvider.js
@@ -4,6 +4,7 @@ import GothamBookItalic from 'assets/fonts/gotham-book-italic.woff2';
 import GothamBook from 'assets/fonts/gotham-book.woff2';
 import GothamMediumItalic from 'assets/fonts/gotham-medium-italic.woff2';
 import GothamMedium from 'assets/fonts/gotham-medium.woff2';
+import { useHasMounted } from 'hooks';
 import Head from 'next/head';
 import { createContext, useEffect } from 'react';
 import { classes, media } from 'utils/style';
@@ -23,14 +24,15 @@ export const ThemeProvider = ({
   const currentTheme = { ...theme[themeId], ...themeOverrides };
   const parentTheme = useTheme();
   const isRootProvider = !parentTheme.themeId;
+  const hasMounted = useHasMounted();
 
   // Save root theme id to localstorage and apply class to body
   useEffect(() => {
-    if (isRootProvider) {
+    if (isRootProvider && hasMounted) {
       window.localStorage.setItem('theme', JSON.stringify(themeId));
       document.body.dataset.theme = themeId;
     }
-  }, [themeId, isRootProvider]);
+  }, [themeId, isRootProvider, hasMounted]);
 
   return (
     <ThemeContext.Provider value={currentTheme}>

diff --git a/src/layouts/App/reducer.js b/src/layouts/App/reducer.js
@@ -1,6 +1,5 @@
 export const initialState = {
   menuOpen: false,
-  theme: 'dark',
 };
 
 export function reducer(state, action) {

diff --git a/src/pages/_document.page.js b/src/pages/_document.page.js
@@ -23,7 +23,10 @@ export default function Document() {
       <body data-theme="dark" tabIndex={-1}>
         <script
           dangerouslySetInnerHTML={{
-            __html: `document.body.dataset.theme = JSON.parse(localStorage.getItem('theme')) || 'dark';`,
+            __html: `
+              const initialTheme = JSON.parse(localStorage.getItem('theme'));
+              document.body.dataset.theme = initialTheme || 'dark';
+            `,
           }}
         />
         <Main />