Gatsby w/ Chakra UI ColorMode not working

I'm using Gatsby w/ Chakra UI and have an issue with either local storage or how the ColorMode is being accessed.

Here's my repo: https://github.com/RyanPinPB/pdm-gatsby

Live site: https://pearsondigitalmarketing.com

ColorMode and components are styled correctly on localhost, but in production the site has an issue when it renders the header after local storage has saved darkMode=true.

You can reproduce this issue by going to the live site, toggling dark mode, and refreshing. Or, if your browser has theme settings or depending on your OS (or time of day), it will show the issue at night, or if your browser/OS prefers dark mode.

What is weird, is that certain components receive the correct darkMode styling (colorings and background), but my logo, menu, and header background are not correct. Even tho all 3 of these are using colorMode styling conditionals as follows:

const bgColor = {
light: "rgba(255,255,255,.6)",
dark: "rgba(26, 32, 44, .6)",
}
const color = { light: "brand.400", dark: "brand.900" }

bg={bgColor[colorMode]}
color={color[colorMode]}

I added a console log to both index and header files to see if one of them is rendering before the colorMode is triggered/called from local storage, but both console logs print the correct colorMode state. I'm having a hard time figuring out why my header in darkmode has the wrong background color and color styling.

The issue is correct after any click of the "toggle button" in the header. It's just on the initial rendering of the page, if the page thinks it needs to be in DarkMode.

Any help is greatly appreciated.

ThemeContext.js:

import React from "react"
import { ColorModeProvider } from "@chakra-ui/core"

//dont have to use this file if we use Chakra UI

const defaultState = {
  dark: false,
  toggleDark: () => {},
}
const ThemeContext = React.createContext(defaultState)
// Getting dark mode information from OS!
// You need macOS Mojave + Safari Technology Preview Release 68 to test this currently.
const supportsDarkMode = () =>
  window.matchMedia("(prefers-color-scheme: dark)").matches === true

class ThemeProvider extends React.Component {
  state = {
    dark: false,
  }
  toggleDark = () => {
    console.log("ThemeContext.js: toggle dark/light mode")
    let dark = !this.state.dark
    localStorage.setItem("dark", JSON.stringify(dark))
    this.setState({ dark })
  }
  componentDidMount() {
    // Getting dark mode value from localStorage!
    console.log("ThemeContext.js component did mount, dark: " + this.state.dark)
    const lsDark = JSON.parse(localStorage.getItem("dark"))
    if (lsDark) {
      console.log("ThemeContext.js: lsDark: " + lsDark)
      this.setState({ dark: lsDark })
    } else if (supportsDarkMode()) {
      console.log("ThemeContext.js:  supports Dark Mode: true")
      this.setState({ dark: true })
    }
  }
  render() {
    const { children } = this.props
    const { dark } = this.state
    return (
      <ThemeContext.Provider
        value={{
          dark,
          toggleDark: this.toggleDark,
        }}
      >
        <ColorModeProvider>{children}</ColorModeProvider>
      </ThemeContext.Provider>
    )
  }
}
export default ThemeContext
export { ThemeProvider }