Гэтсби с Chakra UI ColorMode не работает

Question

Я использую Gatsby с пользовательским интерфейсом Chakra, и у меня проблема либо с локальным хранилищем, либо с доступом к ColorMode.

Вот мое репо: https://github.com/RyanPinPB/pdm-gatsby

Действующий сайт: https://pearsondigitalmarketing.com

ColorMode и компоненты имеют правильный стиль на локальном хосте, но в производственной среде у сайта возникает проблема, когда он отображает заголовок после того, как локальное хранилище сохранило darkMode=true.

Вы можете воспроизвести эту проблему, перейдя на действующий сайт, переключив темный режим и обновив его. Или, если в вашем браузере есть настройки темы или в зависимости от вашей ОС (или времени дня), он покажет проблему ночью, или если ваш браузер / ОС предпочитает темный режим.

Что странно, так это то, что определенные компоненты получают правильный стиль darkMode (цвета и фон), но мой логотип, меню и фон заголовка неверны. Даже несмотря на то, что все три из них используют следующие условные обозначения стиля colorMode:

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]}

Я добавил журнал консоли как в индексный, так и в заголовочный файлы, чтобы увидеть, выполняется ли рендеринг одного из них до того, как colorMode запускается / вызывается из локального хранилища, но оба журнала консоли выводят правильное состояние colorMode. Мне сложно понять, почему мой заголовок в темном режиме имеет неправильный цвет фона и цветовой стиль.

Проблема устраняется после любого нажатия "кнопки переключения" в заголовке. Это просто при первоначальном рендеринге страницы, если страница считает, что должна быть в DarkMode.

Любая помощь приветствуется.

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 }