dark mode plugin

gatsby-browser.js

@@ -1,5 +1,4 @@
 import 'firebase/database';
-import React from "react"
 import './src/styles/global.scss'
 import './src/components/Header/Header.scss'
 import './src/components/About/About.scss'
@@ -18,12 +17,6 @@ import './src/components/Footer/Footer.scss'
 import 'prismjs/themes/prism-tomorrow.css'
 import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
 
-import { ThemeProvider } from "./src/context/ThemeContext"
-
-export const wrapRootElement = ({ element }) => (
-  <ThemeProvider>{element}</ThemeProvider>
-)
-
 export const shouldUpdateScroll = ({
   routerProps: { location }
 }) => {

gatsby-config.js

@@ -40,6 +40,7 @@ module.exports = {
     }
   },
   plugins: [
+    'gatsby-plugin-dark-mode',
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-sass',
     {

gatsby-ssr.js

@@ -1,42 +1 @@
-import React from 'react';
-import ThemeContext from './src/context/ThemeContext'
 import 'firebase/database';
-
-const OnDark = () => {
-  return (
-    <script
-      dangerouslySetInnerHTML={{ __html: `
-        (() => {
-          window.__isDarkTheme = false
-          
-          window.__setTheme = function(theme) {
-            onChangeTheme(theme)
-          }
-
-          // onRefreshPage
-          if (localStorage.getItem('dark') || (new Date().getHours() >= 22 || new Date().getHours() <= 6)) {
-            window.__isDarkTheme = true
-            document.body.classList.add('dark')
-            window.localStorage.setItem('dark', 'true')
-          }
-
-          function onChangeTheme(theme) {
-            if (theme === 'dark') {
-              window.__isDarkTheme = true
-              localStorage.setItem('dark', 'true')
-              document.body.classList.add('dark')
-            } else if (theme === 'light') {
-              window.__isDarkTheme = false
-              localStorage.removeItem('dark')
-              document.body.classList.remove('dark')
-            }
-          }          
-        })()
-      ` }}
-    />
-  )
-}
-
-export const onRenderBody = ({ setPreBodyComponents }) => {
-  setPreBodyComponents(<OnDark key='isDarkTheme' />)
-}

package-lock.json

@@ -9071,6 +9071,14 @@
         "micromatch": "^3.1.10"
       }
     },
+    "gatsby-plugin-dark-mode": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-dark-mode/-/gatsby-plugin-dark-mode-1.1.2.tgz",
+      "integrity": "sha512-kq/7/KSIgyYxolSqLxXfmcC/iBU98XpRGcIOaa3bjjl8Tb0WDYwfa45zABx1XNjB0YecWdgniss+kqmeAu04GA==",
+      "requires": {
+        "prop-types": "^15.5.7"
+      }
+    },
     "gatsby-plugin-firebase": {
       "version": "0.2.0-beta.4",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-firebase/-/gatsby-plugin-firebase-0.2.0-beta.4.tgz",

package.json

@@ -21,6 +21,7 @@
     "firebase": "^7.16.0",
     "gatsby": "^2.23.12",
     "gatsby-image": "^2.4.12",
+    "gatsby-plugin-dark-mode": "^1.1.2",
     "gatsby-plugin-firebase": "^0.2.0-beta.4",
     "gatsby-plugin-manifest": "^2.4.17",
     "gatsby-plugin-netlify-cms": "^4.3.9",

src/components/Header/Header.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { useLocation } from '@reach/router'
 import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
+import { ThemeToggler } from 'gatsby-plugin-dark-mode'
 import useSiteMetadataQuery from '../../hooks/useSiteMetadataQuery'
 
 import LogoIcon from '../../images/logo-icon.svg'
@@ -14,13 +15,12 @@ const Header = () => {
   const { siteMetadata: { title, menuLinks, social: { twitter, telegram } } } = useSiteMetadataQuery()
   const [isScrolled, setIsScrolled] = React.useState(false)
   const [isMobileOpen, setIsMobileOpen] = React.useState(false)
-  const [isDark, setIsDark] = React.useState(localStorage.getItem('dark') ? true : false)
   const { pathname } = useLocation()
 
   React.useEffect(() =>  {
     isMobileOpen ? document.body.style.overflowY = 'hidden' : document.body.style.overflowY = ''
     document.body.onscroll = () => window.pageYOffset >= 100 ? setIsScrolled(true) : setIsScrolled(false)
-  }, [isMobileOpen])
+  })
 
   const mobileHandler = () => {
     setIsMobileOpen(!isMobileOpen)
@@ -56,13 +56,9 @@ const Header = () => {
             </nav>
           </div>
           <div className="header-nav__theme">
-            {isDark ? <SunIcon onClick={() => {
+            <ThemeToggler>
-              window.__setTheme('light')
+              {({ theme, toggleTheme }) => theme !== 'dark' ? <MoonIcon onClick={() => toggleTheme('dark')} /> : <SunIcon onClick={() => toggleTheme('light')} />}
-              setIsDark(!isDark)
+            </ThemeToggler> 
-            }} /> : <MoonIcon onClick={() => {
-              window.__setTheme('dark')
-              setIsDark(!isDark)
-            }} />}
           </div>
         </div>
         <div className={isMobileOpen ? 'header-content__nav mobile mobileOpen' : 'header-content__nav mobile'}>

src/context/ThemeContext.js

@@ -1,42 +0,0 @@
-import React from "react"
-
-const ThemeContext = React.createContext({ isDark: false })
-
-const ThemeProvider = ({ children }) => {
-  const [isDark, setIsDark] = React.useState(true)
-
-  const toggleDarkTheme = () => {
-    setIsDark(true)
-    document.body.classList.add('dark')
-    window.localStorage.setItem('dark', 'true')
-  }
-
-  const toggleLightTheme = () => {
-    setIsDark(false)
-    document.body.classList.remove('dark')
-    window.localStorage.removeItem('dark')
-  }
-
-  // React.useEffect(() => {
-  //   if (localStorage.getItem('dark')) {
-  //     setIsDark(true)
-  //   }
-  // }, [setIsDark])
-
-  return (
-    <ThemeContext.Provider
-      value={{
-        isDark,
-        setIsDark,
-        toggleDarkTheme,
-        toggleLightTheme
-      }}
-    >
-      {children}
-    </ThemeContext.Provider>
-  )
-}
-
-export default ThemeContext
-
-export { ThemeProvider }