Гэтсби и Theme-UI ColorModeProvider

Question

Я экспериментировал с различными стратегиями загрузки шрифтов с помощью Gatsby, и в итоге мне пришлось справиться с источником gatsby-plugin-theme-ui, чтобы я мог обновитьtheme.fonts значения после загрузки всех шрифтов клиентом (по умолчанию theme.fonts установлены системные шрифты).

После всего этого я установил ColorModeProvider и добавил его в wrap-root-element.js внутри ThemeProvider, но он не работает полностью. Толькоtext & background цвета обновляются, но primary, secondary а также mutedцвета не меняются (используются цвета по умолчанию). Я могу подтвердить, что переменные CSS обновляются каждый раз, когда я меняю тему.

Пожалуйста, дайте мне знать, что мне здесь не хватает?

• Демо (цвета блока кода не должны изменяться, потому что они обрабатываются другим провайдером)
• Актуальный PR

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

wrap-root-element.js:

/** @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

Я также задал этот вопрос по проблемам Spectrum и Github на случай, если кто-то еще заинтересован в проверке этих тем.

Answer 1

Проблема здесь в том, что оригинал gatsby-theme-ui-plugin не был удален из package.json а также gatsby-config.js.