Add IIFE for dark mode in document load and preserve in localStorage

harish-sethuraman · gaearon · commit 8d192b72667d · 2021-11-04T16:31:13.000Z
diff --git a/beta/src/components/Layout/Nav/Nav.tsx b/beta/src/components/Layout/Nav/Nav.tsx
@@ -102,13 +102,10 @@ export default function Nav() {
   });
 
   React.useEffect(() => {
-    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      document.documentElement.classList.add('dark');
-      setIsDark(true);
-    } else {
-      setIsDark(false);
-    }
-  },[]);
+    window.__onThemeChange = () => {
+      setIsDark(window.__theme === 'dark' ? true : false);
+    };
+  }, []);
 
   const section = inferSection(pathname);
 
@@ -151,13 +148,9 @@ export default function Nav() {
           type="button"
           aria-label={isDark ? 'Use Light Mode' : 'Use Dark Mode'}
           onClick={() => {
-            if (isDark) {
-              document.documentElement.classList.remove('dark');
-              setIsDark(false);
-            } else {
-              document.documentElement.classList.add('dark');
-              setIsDark(true);
-            }
+            window.__setPreferredTheme(
+              window.__theme === 'light' ? 'dark' : 'light'
+            );
           }}
           className="hidden lg:flex items-center h-full pr-2">
           {isDark ? lightIcon : darkIcon}
@@ -186,13 +179,9 @@ export default function Nav() {
           type="button"
           aria-label={isDark ? 'Use Light Mode' : 'Use Dark Mode'}
           onClick={() => {
-            if (isDark) {
-              document.documentElement.classList.remove('dark');
-              setIsDark(false);
-            } else {
-              document.documentElement.classList.add('dark');
-              setIsDark(true);
-            }
+            window.__setPreferredTheme(
+              window.__theme === 'light' ? 'dark' : 'light'
+            );
           }}
           className="flex lg:hidden items-center p-1 h-full ml-4 lg:ml-6">
           {isDark ? lightIcon : darkIcon}
diff --git a/beta/src/pages/_document.tsx b/beta/src/pages/_document.tsx
@@ -12,6 +12,45 @@ class MyDocument extends Document {
       <Html lang="en">
         <Head />
         <body className="font-sans antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `(function () {
+                window.__onThemeChange = function () {};
+                function setTheme(newTheme) {
+                  window.__theme = newTheme;
+                  preferredTheme = newTheme;
+              
+                  document.documentElement.className = newTheme;
+                  window.__onThemeChange(newTheme);
+                }
+              
+                var preferredTheme;
+                try {
+                  preferredTheme = localStorage.getItem("theme");
+                } catch (err) {
+                  console.error("Couldn't fetch theme from local storage")
+
+                }
+              
+                window.__setPreferredTheme = function (newTheme) {
+                  setTheme(newTheme);
+                  try {
+                    localStorage.setItem("theme", newTheme);
+                  } catch (err) {
+                    console.error("Couldn't set theme in local storage")
+                  }
+                };
+              
+                var darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
+                darkQuery.addListener(function (e) {
+                  window.__setPreferredTheme(e.matches ? "dark" : "light");
+                });
+              
+                setTheme(preferredTheme || (darkQuery.matches ? "dark" : "light"));
+              })();
+              `,
+            }}
+          />
           <Main />
           <NextScript />
         </body>
