Added useColorScheme hook

Author: austincondiff

components/common/ColorSchemeToggle.jsx

@@ -51,7 +51,7 @@ function ColorSchemeToggle() {
   const { setColorScheme } = useSite();
 
   useEffect(() => {
-    const theme = window.localStorage.getItem('themeColor');
+    const theme = window.localStorage.getItem('colorScheme');
 
     if (theme) setToggleValue(theme)
   }, []);

components/common/Site.jsx

@@ -1,81 +1,23 @@
 import React, { useEffect, useContext } from "react";
 import theme from "@/styles/theme";
 import { ThemeProvider } from "styled-components";
+import useColorScheme from "@/hooks/useColorScheme";
 
 export const SiteContext = React.createContext({});
 
 const SiteContextProvider = SiteContext.Provider;
 
 export const useSite = () => useContext(SiteContext);
 
-function detectColorScheme() {
-  var theme = 'light';
-
-  if (
-    typeof window.matchMedia !== 'undefined' &&
-    window.matchMedia('(prefers-color-scheme: dark)').matches
-  ) {
-    theme = 'dark';
-  }
-
-  document.querySelector(
-    'input[type=radio][name=colorToggle][value=auto]'
-  ).checked = true;
-
-  if (window.localStorage.getItem('themeColor') !== 'undefined') {
-    if (['dark', 'light'].includes(window.localStorage.getItem('themeColor'))) {
-      theme = window.localStorage.getItem('themeColor');
-      var themeToggle = document.querySelector(
-        'input[type=radio][name=colorToggle][value=' + theme + ']'
-      );
-      themeToggle.checked = true;
-    }
-  }
-
-  setColorScheme(theme, true);
-}
-
-function setColorScheme(theme, auto) {
-  if (auto !== true) {
-    window.localStorage.setItem('themeColor', theme);
-  }
-
-  if (theme === 'auto') {
-    window.localStorage.removeItem('themeColor');
-    detectColorScheme();
-  } else {
-    document.children[0].setAttribute('data-color-scheme', theme);
-  }
-
-  if (auto !== true) {
-    document
-      .querySelectorAll('input[type=radio][name=colorToggle]')
-      .forEach(function (element) {
-        if (theme !== element.value) {
-          element.checked = false;
-        }
-      });
-  }
-}
-
-function setupActions() {
-  window
-    .matchMedia('(prefers-color-scheme: dark)')
-    .addEventListener('change', function (e) {
-      detectColorScheme();
-    });
-}
-
 
 
 const Site = ({ children }) => {
-  useEffect(() => {
-    detectColorScheme();
-    setupActions();
-  }, []);
+  const { colorScheme, setColorScheme } = useColorScheme();
+
+  console.log({ colorScheme })
 
   return (
-    <SiteContextProvider value={{ setColorScheme }}>
+    <SiteContextProvider value={{ colorScheme, setColorScheme }}>
       <ThemeProvider theme={theme}>
         {children}
       </ThemeProvider>

hooks/useColorScheme.js

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+
+const useColorScheme = () => {
+  const [colorScheme, setColorSchemeState] = useState();
+
+  const getColorScheme = () => {
+    const storedColorScheme = window.localStorage.getItem('colorScheme');
+    let colorScheme = !storedColorScheme ? 'auto' : 'light';
+
+    if (
+      storedColorScheme !== 'undefined' &&
+      ['dark', 'light'].includes(storedColorScheme)
+    ) {
+      colorScheme = storedColorScheme;
+    }
+
+    return colorScheme;
+  };
+
+  const setColorScheme = (colorScheme) => {
+    if (['light', 'dark'].includes(colorScheme)) {
+      window.localStorage.setItem('colorScheme', colorScheme);
+      document.children[0].setAttribute('data-color-scheme', colorScheme);
+    } else {
+      const systemColorScheme =
+        typeof window.matchMedia !== 'undefined' &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches
+          ? 'dark'
+          : 'light';
+      window.localStorage.removeItem('colorScheme');
+      document.children[0].setAttribute('data-color-scheme', systemColorScheme);
+    }
+  };
+
+  useEffect(() => {
+    const initialColorScheme = getColorScheme();
+
+    window
+      .matchMedia('(prefers-color-scheme: dark)')
+      .addEventListener('change', () => setColorScheme(getColorScheme()));
+
+    setColorScheme(initialColorScheme);
+    setColorSchemeState(initialColorScheme);
+  }, []);
+
+  return { getColorScheme, setColorScheme, colorScheme };
+};
+
+export default useColorScheme;