fix

gatsby-browser.js

@@ -1,6 +1,6 @@
 import "firebase/database"
-import React from 'react';
+import React from "react"
-import Layout from './src/components/Layout/Layout'
+import Layout from "./src/components/Layout/Layout"
 
 import "gatsby-remark-vscode/styles.css"
 
@@ -29,5 +29,5 @@ export const shouldUpdateScroll = ({ routerProps: { location } }) => {
 }
 
 export const wrapPageElement = ({ element, props }) => {
-  return <Layout {...props}>{element}</Layout>;
+  return <Layout {...props}>{element}</Layout>
-};
+}

gatsby-ssr.js

@@ -1,6 +1,6 @@
 import "firebase/database"
 import React from "react"
-import Layout from './src/components/Layout/Layout'
+import Layout from "./src/components/Layout/Layout"
 
 const OnDark = () => {
   return (
@@ -44,5 +44,5 @@ export const onRenderBody = ({ setPreBodyComponents }) => {
 }
 
 export const wrapPageElement = ({ element, props }) => {
-  return <Layout {...props}>{element}</Layout>;
+  return <Layout {...props}>{element}</Layout>
-};
+}

src/components/Header/Header.js

@@ -3,7 +3,7 @@ import { useLocation } from "@reach/router"
 import PropTypes from "prop-types"
 import { Link } from "gatsby"
 import useSiteMetadataQuery from "../../hooks/useSiteMetadataQuery"
-import ThemeSwitcher from './ThemeSwitcher/ThemeSwitcher'
+import ThemeSwitcher from "./ThemeSwitcher/ThemeSwitcher"
 
 import LogoIcon from "../../images/logo-icon.svg"
 import TelegramIcon from "../../images/telegram-icon.svg"
@@ -21,19 +21,13 @@ const Header = () => {
   const [isMobileOpen, setIsMobileOpen] = React.useState(false)
   const { pathname } = useLocation()
 
-  const [ready, setReady] = React.useState(false)
-  const [isDark, setIsDark] = React.useState(false)
-  
-
   React.useEffect(() => {
-    setIsDark(window.__isDarkTheme)
-    setReady(true)
     isMobileOpen
       ? (document.body.style.overflowY = "hidden")
       : (document.body.style.overflowY = "")
     document.body.onscroll = () =>
       window.pageYOffset >= 100 ? setIsScrolled(true) : setIsScrolled(false)
-  }, [isMobileOpen, setIsDark, setReady])
+  }, [isMobileOpen])
 
   const mobileHandler = () => {
     setIsMobileOpen(!isMobileOpen)
@@ -77,7 +71,7 @@ const Header = () => {
           <div className="header-nav__links">
             <nav>{renderLinks()}</nav>
           </div>
-          <ThemeSwitcher ready={ready} isDark={isDark} setIsDark={setIsDark} />
+          <ThemeSwitcher />
         </div>
         <div
           className={

src/components/Header/ThemeSwitcher/ThemeSwitcher.js

@@ -1,19 +1,19 @@
-import React from 'react';
+import React from "react"
 
 import MoonIcon from "../../../images/moon-icon.svg"
 import SunIcon from "../../../images/sun-icon.svg"
 
-const ThemeSwitcher = ({ ready, isDark, setIsDark }) => {
+const ThemeSwitcher = () => {
-  // const [ready, setReady] = React.useState(false)
+  const [ready, setReady] = React.useState(false)
-  // const [isDark, setIsDark] = React.useState(false)
+  const [isDark, setIsDark] = React.useState(false)
-  
+
-  // React.useEffect(() => {
+  React.useEffect(() => {
-  //   setIsDark(window.__isDarkTheme)
+    setIsDark(window.__isDarkTheme)
-  //   setReady(true)
+    setReady(true)
-  // }, [setIsDark, setReady])
+  }, [setIsDark, setReady])
 
   return (
-    <div className={ready ? 'header-nav__theme ready' : 'header-nav__theme'}>
+    <div className={ready ? "header-nav__theme ready" : "header-nav__theme"}>
       {isDark ? (
         <SunIcon
           onClick={() => {
@@ -33,4 +33,4 @@ const ThemeSwitcher = ({ ready, isDark, setIsDark }) => {
   )
 }
 
-export default ThemeSwitcher
+export default ThemeSwitcher