fix: hopefully fix for #334

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>)
+}

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")