带有Chakra UI ColorMode的Gatsby无法正常工作

问题描述

我正在使用带有Chakra UI的Gatsby，并且在本地存储或如何访问ColorMode时遇到问题。

这是我的回购：https://github.com/RyanPinPB/pdm-gatsby

实时网站：https://pearsondigitalmarketing.com

ColorMode和组件在localhost上的样式正确，但是在生产环境中，当本地存储保存darkMode = true后，网站呈现标题时会出现问题。

您可以通过转至现场站点，切换暗模式并刷新来重现此问题。或者，如果您的浏览器具有主题设置，或者取决于您的操作系统（或一天中的时间），它将在晚上显示问题，或者您的浏览器/操作系统更喜欢暗模式。

奇怪的是，某些组件收到正确的darkMode样式（颜色和背景），但是我的徽标，菜单和标题背景不正确。甚至所有这三个都使用colorMode样式条件，如下所示：

const bgColor = {
light: "rgba(255,255,.6)",dark: "rgba(26,32,44,}
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 }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）