From f01562e7ee5a35d110d3917049ebdae7e45498ba Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Mon, 20 Jul 2020 17:36:48 +0300
Subject: [PATCH] dark mode plugin

---
 gatsby-browser.js               |  7 ------
 gatsby-config.js                |  1 +
 gatsby-ssr.js                   | 41 --------------------------------
 package-lock.json               |  8 +++++++
 package.json                    |  1 +
 src/components/Header/Header.js | 16 +++++--------
 src/context/ThemeContext.js     | 42 ---------------------------------
 7 files changed, 16 insertions(+), 100 deletions(-)
 delete mode 100644 src/context/ThemeContext.js

diff --git a/gatsby-browser.js b/gatsby-browser.js
index d60b3ec..dd24a3c 100644
--- a/gatsby-browser.js
+++ b/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 }
 }) => {
diff --git a/gatsby-config.js b/gatsby-config.js
index 1822095..4b47e2c 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -40,6 +40,7 @@ module.exports = {
     }
   },
   plugins: [
+    'gatsby-plugin-dark-mode',
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-sass',
     {
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
index 111592f..749365e 100644
--- a/gatsby-ssr.js
+++ b/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' />)
-}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index b7e63e3..4aee2dc 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 4d90536..78f2727 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index b91da03..2213998 100644
--- a/src/components/Header/Header.js
+++ b/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)
@@ -33,7 +33,7 @@ const Header = () => {
       </ul>
     )
   }
- 
+  
   return (
     <header className={isScrolled ? 'headerScrolled' : null}>
       <div className="header-content">
@@ -56,13 +56,9 @@ const Header = () => {
             </nav>
           </div>
           <div className="header-nav__theme">
-            {isDark ? <SunIcon onClick={() => {
-              window.__setTheme('light')
-              setIsDark(!isDark)
-            }} /> : <MoonIcon onClick={() => {
-              window.__setTheme('dark')
-              setIsDark(!isDark)
-            }} />}
+            <ThemeToggler>
+              {({ theme, toggleTheme }) => theme !== 'dark' ? <MoonIcon onClick={() => toggleTheme('dark')} /> : <SunIcon onClick={() => toggleTheme('light')} />}
+            </ThemeToggler> 
           </div>
         </div>
         <div className={isMobileOpen ? 'header-content__nav mobile mobileOpen' : 'header-content__nav mobile'}>
diff --git a/src/context/ThemeContext.js b/src/context/ThemeContext.js
deleted file mode 100644
index 1eec297..0000000
--- a/src/context/ThemeContext.js
+++ /dev/null
@@ -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 }
\ No newline at end of file