Merge pull request #410 from brianlovin/fix-dark-mode

Fix dark mode

src/components/Providers/DarkMode.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+import useDarkMode from 'use-dark-mode'
+import { ThemeProvider } from 'styled-components';
+import { light, dark } from '~/components/Theme';
+
+export default function DarkMode({ children }) {
+  const darkMode = useDarkMode(false);
+  const [theme, setTheme] = React.useState(light);
+
+  React.useEffect(() => {
+    setTheme(darkMode.value ? dark : light);
+  }, [darkMode, darkMode.value]);
+
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+};

src/components/Providers/index.tsx

@@ -1,41 +1,22 @@
 import * as React from 'react'
-import { ThemeProvider } from 'styled-components';
-import useDarkMode from 'use-dark-mode'
 import GlobalStyles from '~/components/GlobalStyles';
-import { light, dark } from '~/components/Theme';
 import FathomProvider from './Fathom'
 import SEO from './SEO'
+import DarkMode from './DarkMode';
 
 interface Props {
   children?: any;
 }
 
 export default ({ children }: Props) => {
-  const { value } = useDarkMode(false, { storageKey: null, onChange: null })
-  const theme = value ? dark : light
-
-  const [mounted, setMounted] = React.useState(false)
-
-  React.useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  const body =
+  return (
     <FathomProvider>
       <SEO />
 
-      <ThemeProvider theme={theme}>
+      <DarkMode>
         <GlobalStyles.ResetStyles />
         {children}
-      </ThemeProvider>
+      </DarkMode>
     </FathomProvider>
-
-  // prevents ssr flash for mismatched dark mode
-  if (!mounted) {
-    return (
-      <div style={{ visibility: 'hidden' }}>{body}</div>
-    )
-  }
-
-  return body
+  )
 }

src/firebase/functions/index.js

@@ -21,7 +21,7 @@ const getMetadata = async (url) => {
     null
 
   return {
-    url,
+    url: url.toLowerCase(),
     host,
     title: $('title').first().text(),
     description: getMetavalue('description'),