upd theme

gatsby-ssr.js

@@ -1,17 +1,38 @@
 import React from 'react';
+import ThemeContext from './src/context/ThemeContext'
 import 'firebase/database';
 
 const OnDark = () => {
-  const codeToRunOnClient = `
+  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')
           }
-  `;
 
-  return (
-    <script
-      dangerouslySetInnerHTML={{ __html: codeToRunOnClient }}
+          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')
+            }
+          }          
+        })()
+      ` }}
     />
   )
 }

src/components/Header/Header.js

@@ -3,7 +3,6 @@ import { useLocation } from '@reach/router'
 import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
 import useSiteMetadataQuery from '../../hooks/useSiteMetadataQuery'
-import ThemeContext from '../../context/ThemeContext'
 
 import LogoIcon from '../../images/logo-icon.svg'
 import TelegramIcon from '../../images/telegram-icon.svg'
@@ -15,8 +14,8 @@ 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(window.__isDarkTheme)
   const { pathname } = useLocation()
-  const { isDark, toggleLightTheme, toggleDarkTheme } = React.useContext(ThemeContext)
 
   React.useEffect(() =>  {
     isMobileOpen ? document.body.style.overflowY = 'hidden' : document.body.style.overflowY = ''
@@ -57,7 +56,13 @@ const Header = () => {
             </nav>
           </div>
           <div className="header-nav__theme">
-            {isDark ? <SunIcon onClick={toggleLightTheme} /> : <MoonIcon onClick={toggleDarkTheme} />}
+            {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'}>

src/context/ThemeContext.js

@@ -3,7 +3,7 @@ import React from "react"
 const ThemeContext = React.createContext({ isDark: false })
 
 const ThemeProvider = ({ children }) => {
-  const [isDark, setIsDark] = React.useState(false)
+  const [isDark, setIsDark] = React.useState(true)
 
   const toggleDarkTheme = () => {
     setIsDark(true)
@@ -17,16 +17,17 @@ const ThemeProvider = ({ children }) => {
     window.localStorage.removeItem('dark')
   }
 
-  React.useEffect(() => {
-    if (localStorage.getItem('dark')) {
-      setIsDark(true)
-    }
-  }, [setIsDark])
+  // React.useEffect(() => {
+  //   if (localStorage.getItem('dark')) {
+  //     setIsDark(true)
+  //   }
+  // }, [setIsDark])
 
   return (
     <ThemeContext.Provider
       value={{
         isDark,
+        setIsDark,
         toggleDarkTheme,
         toggleLightTheme
       }}