custom dark mode

gatsby-config.js

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

gatsby-ssr.js

@@ -1 +1,40 @@
+import React from 'react';
 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,14 +9071,6 @@
         "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,7 +21,6 @@
     "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,7 +2,6 @@ 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'
@@ -15,12 +14,14 @@ 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(false)
   const { pathname } = useLocation()
 
   React.useEffect(() =>  {
+    setIsDark(window.__isDarkTheme)
     isMobileOpen ? document.body.style.overflowY = 'hidden' : document.body.style.overflowY = ''
     document.body.onscroll = () => window.pageYOffset >= 100 ? setIsScrolled(true) : setIsScrolled(false)
-  })
+  }, [setIsDark, isMobileOpen])
 
   const mobileHandler = () => {
     setIsMobileOpen(!isMobileOpen)
@@ -56,9 +57,13 @@ const Header = () => {
             </nav>
           </div>
           <div className="header-nav__theme">
-            <ThemeToggler>
-              {({ theme, toggleTheme }) => theme === 'dark' ? <SunIcon onClick={() => toggleTheme('light')} /> : <MoonIcon onClick={() => toggleTheme('dark')} />}
-            </ThemeToggler> 
+            {isDark ? <SunIcon onClick={() => {
+              window.__setTheme('light')
+              setIsDark(!isDark)
+            }} /> : <MoonIcon onClick={() => {
+              window.__setTheme('dark')
+              setIsDark(!isDark)
+            }} />}
           </div>
         </div>
         <div className={isMobileOpen ? 'header-content__nav mobile mobileOpen' : 'header-content__nav mobile'}>