1

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

这是我的仓库：https ://github.com/RyanPinPB/pdm-gatsby

现场直播：https ://pearsondigitalmarketing.com

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

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

奇怪的是，某些组件接收到正确的 darkMode 样式（颜色和背景），但我的徽标、菜单和标题背景不正确。即使所有这 3 个都使用 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 }
4

0 回答 0