From 6b267780b58727b50262cabf722b5c4582224dee Mon Sep 17 00:00:00 2001
From: Sagnik Pradhan <markten6321@gmail.com>
Date: Fri, 1 Oct 2021 17:20:49 +0530
Subject: [PATCH 1/6] feat: added prefers-color-scheme support

+ read media query for theme preference
+ improved typing of useLocalStorage hook
---
 src/ThemeProvider.tsx         | 41 ++++++++++++++++++++++++++++++-----
 src/hooks/useLocalStorage.tsx | 10 ++++++---
 2 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/src/ThemeProvider.tsx b/src/ThemeProvider.tsx
index f637c08..fab7627 100644
--- a/src/ThemeProvider.tsx
+++ b/src/ThemeProvider.tsx
@@ -1,12 +1,13 @@
-import React, { createContext, FC, useMemo } from "react"
+import React, { createContext, FC, useEffect, useMemo, useState } from "react"
 import { ThemeProvider as BaseThemeProvider } from "styled-components"
 
 import { darkTheme, lightTheme } from "./design/themes"
 import { useLocalStorage } from "./hooks/useLocalStorage"
 
+type ThemeType = "dark" | "light"
+
 export interface IThemeContext {
-  theme: "dark" | "light"
-  setTheme: () => void
+  theme: ThemeType
   toggleTheme: () => void
 }
 
@@ -17,19 +18,47 @@ interface IScopedDownChildren {
 export const ThemeContext = createContext<IThemeContext | null>(null)
 
 const ThemeProvider: FC<IScopedDownChildren> = ({ children }) => {
-  const [theme, setTheme] = useLocalStorage("theme", "dark")
+  // User's explicitly set theme
+  const [localTheme, setLocalTheme] = useLocalStorage<ThemeType | "unset">(
+    "theme",
+    "unset"
+  )
+
+  // App's current theme
+  const [theme, setTheme] = useState<ThemeType>(
+    localTheme === "unset" ? "dark" : localTheme
+  )
 
   const themeObject = useMemo(
     () => (theme === "dark" ? darkTheme : lightTheme),
     [theme]
   )
 
+  useEffect(() => {
+    if (localTheme === "unset") {
+      const prefersLightTheme = window.matchMedia(
+        "(prefers-color-scheme: light)"
+      )
+
+      setTheme(prefersLightTheme.matches ? "light" : "dark")
+
+      prefersLightTheme.onchange = ({ matches }) =>
+        setTheme(matches ? "light" : "dark")
+
+      return () => {
+        prefersLightTheme.onchange = null
+      }
+    }
+  }, [])
+
   const contextValue = useMemo(
     () => ({
       theme,
-      setTheme,
+
       toggleTheme: () => {
-        setTheme(theme === "light" ? "dark" : "light")
+        const newTheme = theme === "light" ? "dark" : "light"
+        setTheme(newTheme)
+        setLocalTheme(newTheme)
       },
     }),
     [theme, setTheme]
diff --git a/src/hooks/useLocalStorage.tsx b/src/hooks/useLocalStorage.tsx
index 8cea92a..849eb33 100644
--- a/src/hooks/useLocalStorage.tsx
+++ b/src/hooks/useLocalStorage.tsx
@@ -1,9 +1,13 @@
 /* globals window */
 import { useEffect, useState } from "react"
 
-export const useLocalStorage = (name: string, initialValue: string) => {
+export const useLocalStorage = <Value extends unknown = unknown>(
+  name: string,
+  initialValue: Value
+) => {
   const windowGlobal = typeof window !== "undefined" && window
-  const [value, setValue] = useState(() => {
+
+  const [value, setValue] = useState<Value>(() => {
     if (windowGlobal) {
       const currentValue = windowGlobal.localStorage.getItem(name)
       return currentValue ? JSON.parse(currentValue) : initialValue
@@ -17,5 +21,5 @@ export const useLocalStorage = (name: string, initialValue: string) => {
     }
   }, [name, value, windowGlobal])
 
-  return [value, setValue]
+  return [value, setValue] as const
 }

From b6b295fced8e48530fbdaa83c26799fd831db7a3 Mon Sep 17 00:00:00 2001
From: Sagnik Pradhan <markten6321@gmail.com>
Date: Fri, 1 Oct 2021 18:33:17 +0530
Subject: [PATCH 2/6] fix: hopefully fix for #334

---
 gatsby-ssr.js         | 34 ++++++++++++++++++++++++++++------
 src/ThemeProvider.tsx |  6 +++---
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/gatsby-ssr.js b/gatsby-ssr.js
index b17b8fc..0a97870 100644
--- a/gatsby-ssr.js
+++ b/gatsby-ssr.js
@@ -1,7 +1,29 @@
-/**
- * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/ssr-apis/
- */
+import React from "react"
 
-// You can delete this file if you're not using it
+const ThemeScript = () => {
+  const themeScript = `
+(function() {
+  function getInitialTheme() {
+    const userSetTheme = window.localStorage.getItem("theme")
+    const prefersLightTheme = window.matchMedia(
+      "(prefers-color-scheme: light)"
+    )
+
+    if (userSetTheme && userSetTheme !== '"unset"') return userSetTheme
+    else if (prefersLightTheme.matches === true) return "light"
+    else return "dark"
+  }
+
+  document.documentElement.style.setProperty(
+    "--initial-theme",
+    getInitialTheme()
+  )
+})()
+  `
+
+  return <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+}
+
+export const onRenderBody = ({ setPreBodyComponents }) => {
+  setPreBodyComponents(<ThemeScript></ThemeScript>)
+}
diff --git a/src/ThemeProvider.tsx b/src/ThemeProvider.tsx
index fab7627..407b70c 100644
--- a/src/ThemeProvider.tsx
+++ b/src/ThemeProvider.tsx
@@ -26,7 +26,9 @@ const ThemeProvider: FC<IScopedDownChildren> = ({ children }) => {
 
   // App's current theme
   const [theme, setTheme] = useState<ThemeType>(
-    localTheme === "unset" ? "dark" : localTheme
+    document.documentElement.style.getPropertyValue(
+      "--initial-theme"
+    ) as ThemeType
   )
 
   const themeObject = useMemo(
@@ -40,8 +42,6 @@ const ThemeProvider: FC<IScopedDownChildren> = ({ children }) => {
         "(prefers-color-scheme: light)"
       )
 
-      setTheme(prefersLightTheme.matches ? "light" : "dark")
-
       prefersLightTheme.onchange = ({ matches }) =>
         setTheme(matches ? "light" : "dark")
 

From c81d9246c4b2f5bc59aef0d7408aef2602bd6fbe Mon Sep 17 00:00:00 2001
From: Sagnik Pradhan <markten6321@gmail.com>
Date: Fri, 1 Oct 2021 18:45:03 +0530
Subject: [PATCH 3/6] fix: undefined document in ssr

---
 gatsby-ssr.js         | 2 ++
 src/ThemeProvider.tsx | 8 +++++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/gatsby-ssr.js b/gatsby-ssr.js
index 0a97870..33c7ee9 100644
--- a/gatsby-ssr.js
+++ b/gatsby-ssr.js
@@ -14,6 +14,8 @@ const ThemeScript = () => {
     else return "dark"
   }
 
+  if (typeof document === "undefined") return;
+
   document.documentElement.style.setProperty(
     "--initial-theme",
     getInitialTheme()
diff --git a/src/ThemeProvider.tsx b/src/ThemeProvider.tsx
index 407b70c..372038d 100644
--- a/src/ThemeProvider.tsx
+++ b/src/ThemeProvider.tsx
@@ -26,9 +26,11 @@ const ThemeProvider: FC<IScopedDownChildren> = ({ children }) => {
 
   // App's current theme
   const [theme, setTheme] = useState<ThemeType>(
-    document.documentElement.style.getPropertyValue(
-      "--initial-theme"
-    ) as ThemeType
+    typeof document !== "undefined"
+      ? (document.documentElement.style.getPropertyValue(
+          "--initial-theme"
+        ) as ThemeType)
+      : "dark"
   )
 
   const themeObject = useMemo(

From 975ccaa7b6a93fb26075120be32c18509c38c6c3 Mon Sep 17 00:00:00 2001
From: Sagnik Pradhan <markten6321@gmail.com>
Date: Fri, 1 Oct 2021 19:02:55 +0530
Subject: [PATCH 4/6] fix: lint issues

---
 src/ThemeProvider.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ThemeProvider.tsx b/src/ThemeProvider.tsx
index 372038d..57d69b9 100644
--- a/src/ThemeProvider.tsx
+++ b/src/ThemeProvider.tsx
@@ -51,7 +51,7 @@ const ThemeProvider: FC<IScopedDownChildren> = ({ children }) => {
         prefersLightTheme.onchange = null
       }
     }
-  }, [])
+  }, [localTheme])
 
   const contextValue = useMemo(
     () => ({
@@ -63,7 +63,7 @@ const ThemeProvider: FC<IScopedDownChildren> = ({ children }) => {
         setLocalTheme(newTheme)
       },
     }),
-    [theme, setTheme]
+    [theme, setTheme, setLocalTheme]
   )
 
   return (

From 9b357a98fb5e06fdd6e2dc42cf80881cf1242fc3 Mon Sep 17 00:00:00 2001
From: Sagnik Pradhan <markten6321@gmail.com>
Date: Sun, 3 Oct 2021 09:38:24 +0530
Subject: [PATCH 5/6] refact: rework theme code

fix: lint errors

fix: lint error

fix: lint error
---
 gatsby-ssr.js              | 36 ++++------------------
 src/ThemeProvider.tsx      | 63 ++++++++++++++++++--------------------
 src/hooks/useIsBrowser.tsx | 11 +++++++
 src/hooks/useMedia.tsx     | 35 +++++++++++++++++++++
 4 files changed, 81 insertions(+), 64 deletions(-)
 create mode 100644 src/hooks/useIsBrowser.tsx
 create mode 100644 src/hooks/useMedia.tsx

diff --git a/gatsby-ssr.js b/gatsby-ssr.js
index 33c7ee9..b17b8fc 100644
--- a/gatsby-ssr.js
+++ b/gatsby-ssr.js
@@ -1,31 +1,7 @@
-import React from "react"
+/**
+ * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
+ *
+ * See: https://www.gatsbyjs.org/docs/ssr-apis/
+ */
 
-const ThemeScript = () => {
-  const themeScript = `
-(function() {
-  function getInitialTheme() {
-    const userSetTheme = window.localStorage.getItem("theme")
-    const prefersLightTheme = window.matchMedia(
-      "(prefers-color-scheme: light)"
-    )
-
-    if (userSetTheme && userSetTheme !== '"unset"') return userSetTheme
-    else if (prefersLightTheme.matches === true) return "light"
-    else return "dark"
-  }
-
-  if (typeof document === "undefined") return;
-
-  document.documentElement.style.setProperty(
-    "--initial-theme",
-    getInitialTheme()
-  )
-})()
-  `
-
-  return <script dangerouslySetInnerHTML={{ __html: themeScript }} />
-}
-
-export const onRenderBody = ({ setPreBodyComponents }) => {
-  setPreBodyComponents(<ThemeScript></ThemeScript>)
-}
+// You can delete this file if you're not using it
diff --git a/src/ThemeProvider.tsx b/src/ThemeProvider.tsx
index 57d69b9..8747f85 100644
--- a/src/ThemeProvider.tsx
+++ b/src/ThemeProvider.tsx
@@ -1,8 +1,10 @@
-import React, { createContext, FC, useEffect, useMemo, useState } from "react"
+import React, { createContext, FC, useMemo } from "react"
 import { ThemeProvider as BaseThemeProvider } from "styled-components"
 
 import { darkTheme, lightTheme } from "./design/themes"
+import { useIsBrowser } from "./hooks/useIsBrowser"
 import { useLocalStorage } from "./hooks/useLocalStorage"
+import { useMedia } from "./hooks/useMedia"
 
 type ThemeType = "dark" | "light"
 
@@ -17,20 +19,20 @@ interface IScopedDownChildren {
 
 export const ThemeContext = createContext<IThemeContext | null>(null)
 
-const ThemeProvider: FC<IScopedDownChildren> = ({ children }) => {
-  // User's explicitly set theme
-  const [localTheme, setLocalTheme] = useLocalStorage<ThemeType | "unset">(
-    "theme",
-    "unset"
+function useTheme() {
+  const preferredTheme = useMedia<ThemeType>(
+    ["(prefers-color-scheme: light)", "(prefers-color-scheme: dark)"],
+    ["light", "dark"],
+    "dark"
   )
 
-  // App's current theme
-  const [theme, setTheme] = useState<ThemeType>(
-    typeof document !== "undefined"
-      ? (document.documentElement.style.getPropertyValue(
-          "--initial-theme"
-        ) as ThemeType)
-      : "dark"
+  const [userSelectedTheme, setUserSelectedTheme] = useLocalStorage<
+    ThemeType | "unset"
+  >("user-selected-theme", "unset")
+
+  const theme = useMemo(
+    () => (userSelectedTheme !== "unset" ? userSelectedTheme : preferredTheme),
+    [preferredTheme, userSelectedTheme]
   )
 
   const themeObject = useMemo(
@@ -38,37 +40,30 @@ const ThemeProvider: FC<IScopedDownChildren> = ({ children }) => {
     [theme]
   )
 
-  useEffect(() => {
-    if (localTheme === "unset") {
-      const prefersLightTheme = window.matchMedia(
-        "(prefers-color-scheme: light)"
-      )
+  return {
+    theme,
+    themeObject,
+    setTheme: setUserSelectedTheme,
+  }
+}
 
-      prefersLightTheme.onchange = ({ matches }) =>
-        setTheme(matches ? "light" : "dark")
-
-      return () => {
-        prefersLightTheme.onchange = null
-      }
-    }
-  }, [localTheme])
+const ThemeProvider: FC<IScopedDownChildren> = ({ children }) => {
+  const isBrowser = useIsBrowser()
+  const { theme, themeObject, setTheme } = useTheme()
 
   const contextValue = useMemo(
     () => ({
       theme,
-
-      toggleTheme: () => {
-        const newTheme = theme === "light" ? "dark" : "light"
-        setTheme(newTheme)
-        setLocalTheme(newTheme)
-      },
+      toggleTheme: () => setTheme(theme === "light" ? "dark" : "light"),
     }),
-    [theme, setTheme, setLocalTheme]
+    [theme, setTheme]
   )
 
   return (
     <ThemeContext.Provider value={contextValue}>
-      <BaseThemeProvider theme={themeObject}>{children}</BaseThemeProvider>
+      <BaseThemeProvider theme={themeObject}>
+        {isBrowser ? children : undefined}
+      </BaseThemeProvider>
     </ThemeContext.Provider>
   )
 }
diff --git a/src/hooks/useIsBrowser.tsx b/src/hooks/useIsBrowser.tsx
new file mode 100644
index 0000000..cd598b6
--- /dev/null
+++ b/src/hooks/useIsBrowser.tsx
@@ -0,0 +1,11 @@
+import { useEffect, useState } from "react"
+
+export function useIsBrowser() {
+  const isBrowserCheck = () => typeof window !== "undefined"
+
+  const [isBrowser, setIsBrowser] = useState(isBrowserCheck)
+
+  useEffect(() => setIsBrowser(isBrowserCheck), [])
+
+  return isBrowser
+}
diff --git a/src/hooks/useMedia.tsx b/src/hooks/useMedia.tsx
new file mode 100644
index 0000000..6442aa5
--- /dev/null
+++ b/src/hooks/useMedia.tsx
@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react"
+
+export function useMedia<Value extends unknown>(
+  queries: string[],
+  values: Value[],
+  defaultValue: Value
+) {
+  const [currentValue, setCurrentValue] = useState(defaultValue)
+
+  useEffect(() => {
+    const windowGlobal = typeof window !== "undefined" && window
+
+    if (!windowGlobal) return
+
+    const mediaQueries = queries.map((query) => windowGlobal.matchMedia(query))
+
+    const getCurrentValue = () => {
+      const index = mediaQueries.findIndex((value) => value.matches)
+      return values[index] || defaultValue
+    }
+
+    setCurrentValue(getCurrentValue)
+
+    const handler = () => setCurrentValue(getCurrentValue)
+
+    mediaQueries.forEach((query) => query.addEventListener("change", handler))
+
+    return () =>
+      mediaQueries.forEach((query) =>
+        query.removeEventListener("change", handler)
+      )
+  }, [queries, values, defaultValue])
+
+  return currentValue
+}

From e87dd88335c5fc27d5ffca7cbcc7c64a33fc9037 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Tue, 19 Oct 2021 14:39:56 -0400
Subject: [PATCH 6/6] style: fix lint issue

---
 src/hooks/useMedia.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/hooks/useMedia.tsx b/src/hooks/useMedia.tsx
index 6442aa5..d683d1e 100644
--- a/src/hooks/useMedia.tsx
+++ b/src/hooks/useMedia.tsx
@@ -1,3 +1,4 @@
+/* globals window */
 import { useEffect, useState } from "react"
 
 export function useMedia<Value extends unknown>(