Gatsby and Theme-UI ColorModeProvider

Question

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

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

请告诉我这里缺少什么

• Demo(代码块颜色不应该更改，因为它们由另一个提供程序处理(
• 实际PR

主题提供商：

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

颜色模式按钮：

/** @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中删除。