Merge pull request #7 from netlify-templates/cg/refactorTheme

charliegerard · web-flow · commit 8f8466b1edb3 · 2022-01-27T18:22:44.000+01:00
Refactor code around dark/light theme
diff --git a/components/Footer.js b/components/Footer.js
@@ -54,7 +54,8 @@ const ThemeSwitcher = () => {
         type="button"
         aria-label="Use Dark Mode"
         onClick={() => {
-          window.__setPreferredTheme("dark");
+          document.documentElement.classList.add("dark");
+          localStorage.setItem("theme", "dark");
         }}
         className="flex items-center h-full pr-2 dark:bg-primary rounded-3xl flex justify-center align-center p-2 w-24 h-10 transition"
       >
@@ -65,7 +66,8 @@ const ThemeSwitcher = () => {
         type="button"
         aria-label="Use Light Mode"
         onClick={() => {
-          window.__setPreferredTheme("light");
+          document.documentElement.classList.remove("dark");
+          localStorage.setItem("theme", "light");
         }}
         className="flex items-center h-full pr-2 bg-primary dark:bg-transparent rounded-3xl flex justify-center align-center p-2 w-24 h-10 transition"
       >
diff --git a/components/Layout.js b/components/Layout.js
@@ -1,4 +1,5 @@
 import classNames from "classnames";
+import { useEffect } from "react";
 import styles from "./Layout.module.css";
 
 export function GradientBackground({ variant, className }) {
@@ -14,6 +15,40 @@ export function GradientBackground({ variant, className }) {
 }
 
 export default function Layout({ children }) {
+  const setAppTheme = () => {
+    const darkMode = localStorage.getItem("theme") === "dark";
+    const lightMode = localStorage.getItem("theme") === "light";
+
+    if (darkMode) {
+      document.documentElement.classList.add("dark");
+    } else if (lightMode) {
+      document.documentElement.classList.remove("dark");
+    }
+    return;
+  };
+
+  const handleSystemThemeChange = () => {
+    var darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+    darkQuery.onchange = (e) => {
+      if (e.matches) {
+        document.documentElement.classList.add("dark");
+        localStorage.setItem("theme", "dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+        localStorage.setItem("theme", "light");
+      }
+    };
+  };
+
+  useEffect(() => {
+    setAppTheme();
+  }, []);
+
+  useEffect(() => {
+    handleSystemThemeChange();
+  }, []);
+
   return (
     <div className="relative pb-24">
       <div className="flex flex-col items-center max-w-2xl w-full mx-auto">
diff --git a/pages/_document.js b/pages/_document.js
@@ -9,44 +9,6 @@ class MyDocument extends Document {
         <body
           className={`antialiased text-lg bg-white dark:bg-gray-900 dark:text-white leading-base`}
         >
-          <script
-            dangerouslySetInnerHTML={{
-              __html: `
-                (function () {
-                  function setTheme(newTheme) {
-                    window.__theme = newTheme;
-                    if (newTheme === 'dark') {
-                      document.documentElement.classList.add('dark');
-                    } else if (newTheme === 'light') {
-                      document.documentElement.classList.remove('dark');
-                    }
-                  }
-                  var preferredTheme;
-                  try {
-                    preferredTheme = localStorage.getItem('theme');
-                  } catch (err) { }
-                  window.__setPreferredTheme = function(newTheme) {
-                    preferredTheme = newTheme;
-                    setTheme(newTheme);
-                    try {
-                      localStorage.setItem('theme', newTheme);
-                    } catch (err) { }
-                  };
-                  var initialTheme = preferredTheme;
-                  var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
-                  if (!initialTheme) {
-                    initialTheme = darkQuery.matches ? 'dark' : 'light';
-                  }
-                  setTheme(initialTheme);
-                  darkQuery.addListener(function (e) {
-                    if (!preferredTheme) {
-                      setTheme(e.matches ? 'dark' : 'light');
-                    }
-                  });
-                })();
-              `,
-            }}
-          />
           <Main />
           <NextScript />
         </body>
