盖茨比和主题-UI ColorModeProvider

Question

我用Gatsby尝试了各种字体加载策略，并最终处理了gatsby插件-主题-ui的源代码，这样我就可以在客户端加载所有字体后更新theme.fonts值(默认情况下，theme.fonts设置为系统字体)。

在完成所有这些工作之后，我安装了ColorModeProvider并将其添加到ThemeProvider内部的wrap-root-element.js中，但它并不完全工作。只有text & background颜色正在更新，但是primary、secondary和muted颜色没有变化(使用默认颜色)。我可以确认，每次更改主题时，CSS变量都会更新。

请让我知道我在这里错过了什么？

• 演示 (代码块颜色不应该更改，因为它们是由另一个提供程序处理的)
• 实际公关

ThemeProvider：

/** @jsx jsx */
import { jsx, ThemeProvider } from 'theme-ui'
import { useState, useEffect, useCallback, Fragment } from 'react'
import theme from '../gatsby-plugin-theme-ui'
import components from '../gatsby-plugin-theme-ui/components'
import useEventListener from '../hooks/use-event-listener'

const themeUI = { ...theme }
const { fonts: { safe: safeFonts } } = { ...theme }
const safeFontsTheme = {
  ...Object.assign(
    {},
    theme,
    { fonts: safeFonts }
  )
}

const ThemeUIProvider = ({ element }) => {
  const [theme, setTheme] = useState(safeFontsTheme)

  const updateTheme = useCallback(
    () => {
      setTheme(themeUI)
      document.documentElement.classList.remove(
        `font-loading-stage-1`,
        `font-loading-stage-2`
      )
    },
    [setTheme],
  )

  useEventListener(
    typeof window !== 'undefined' && window,
    'FONTS_ARE_LOADED',
    updateTheme
  )

  useEffect(() => {
    updateTheme()
    sessionStorage.getItem('areFontsLoaded')
  }, [updateTheme])

  return (
    <Fragment>
      {jsx(ThemeProvider, {
        theme,
        components,
      },
        element
      )}
    </Fragment>
  )
}

export default ThemeUIProvider

包-根元素.：

/** @jsx jsx */
import { jsx } from 'theme-ui'
import { ColorModeProvider } from '@theme-ui/color-modes'
import PrismThemeProvider from './code-block/prism-theme-provider'
import ThemeUIProvider from './theme-ui-provider'

export const wrapRootElement = ({ element }) => {
  return (
    <PrismThemeProvider>
      <ThemeUIProvider element={element}>
        <ColorModeProvider>
          {element}
        </ColorModeProvider>
      </ThemeUIProvider>
    </PrismThemeProvider>
  )
}

ColorModeButton：

/** @jsx jsx */
import { jsx, IconButton, useColorMode } from 'theme-ui'

const ColorModeButton = props => {
  const colorModes = [`default`, `dark`, `deep`, `swiss`]
  const [colorMode, setColorMode] = useColorMode()

  return (
    <IconButton
      {...props}
      aria-label='Toggle website theme'
      onClick={() => {
        const index = colorModes.indexOf(colorMode)
        const next = colorModes[(index + 1) % colorModes.length]
        setColorMode(next)
      }}
      sx={{
        cursor: 'pointer',
        padding: 0,
        width: 40,
        height: 40,
        marginX: 1,
      }}
    >
      <svg
        width='24'
        height='24'
        viewBox='0 0 32 32'
        fill='currentcolor'
        sx={{
          display: 'flex',
          margin: '0 auto',
          transition: 'transform 400ms ease',
        }}
      >
        <circle
          cx='16'
          cy='16'
          r='14'
          fill='none'
          stroke='currentcolor'
          strokeWidth='4'
        ></circle>
        <path d='M 16 0 A 16 16 0 0 0 16 32 z'></path>
      </svg>
    </IconButton>
  )
}

export default ColorModeButton

我还在波谱和Github问题上提出了这个问题，以防其他人对检查这些线程感兴趣。

Answer 1

这里的问题是，最初的gatsby-theme-ui-plugin并没有从package.json和gatsby-config.js中删除。