Reactjs 盖茨比和主题UI ColorModeProvider

我曾与盖茨比一起尝试各种字体加载策略，最终解决了源问题，以便在客户端加载所有字体后更新

主题。字体
值（默认情况下
主题。字体
设置为系统字体）

完成所有这些之后，我安装了
ColorModeProvider
，并将其添加到
ThemeProvider
内部的
wrap root元素.js
，但它没有完全工作。只有
文本
和
背景
颜色正在更新，但
主
、
次
和
静音
颜色不会更改（使用默认颜色）。我可以确认CSS变量在每次更改主题时都会得到更新

请让我知道我错过了什么


（不应更改代码块颜色，因为它们由另一个提供程序处理）


主题提供者：

/**@jsx-jsx*/
从“主题ui”导入{jsx，ThemeProvider}
从“react”导入{useState、useEffect、useCallback、Fragment}
从“../gatsby插件主题ui”导入主题
从“../gatsby插件主题ui/组件”导入组件
从“../hooks/use event listener”导入useEventListener
常量主题={…主题}
常量{字体：{safe:safeFonts}}={…主题}
const safefontsheme={
…Object.assign(
{},
主题
{字体：安全字体}
)
}
常量ThemeUI提供程序=（{element}）=>{
const[theme，setTheme]=useState（SafeFontsTime）
const updateTheme=useCallback(
() => {
设置主题（themeUI）
document.documentElement.classList.remove(
`font-loading-stage-1`，
`字体加载阶段2`
)
},
[setTheme]，
)
useEventListener(
窗口类型！='undefined'&&window，
“字体已加载”，
更新我
)
useffect（（）=>{
更新名称（）
sessionStorage.getItem（'areFontsLoaded'）
}，[UpdateTime]）
返回(
{jsx（ThemeProvider{
主题
组件，
},
要素
)}
)
}
导出默认ThemeUI提供程序

wrap-root-element.js：

/**@jsx-jsx*/
从“主题ui”导入{jsx}
从“@theme ui/color modes”导入{ColorModeProvider}
从“./code block/prism主题提供程序”导入PrismThemeProvider
从“/主题ui提供程序”导入主题ui提供程序
导出常量wraproteElement=（{element}）=>{
返回(
{element}
)
}

颜色模式按钮：

/**@jsx-jsx*/
从“主题ui”导入{jsx，IconButton，useColorMode}
const ColorModeButton=props=>{
const colorModes=[`default`、`dark`、`deep`、`swiss`]
const[colorMode，setColorMode]=useColorMode（）
返回(
{
const index=colorModes.indexOf（colorMode）
const next=colorModes[（索引+1）%colorModes.length]
设置颜色模式（下一个）
}}
sx={{
光标：“指针”，
填充：0，
宽度：40，
身高：40，
玛金克斯：1，
}}
>
)
}
导出默认颜色模式按钮

我也问过这个问题，以防其他人对检查这些线程感兴趣。
这里的问题是，原始的
gatsby主题ui插件
没有从
package.json
和
gatsby config.js
中删除。我遇到了与您的回答相同的问题，但我认为其他人可能会遇到找到一些有用的附加上下文。
gatsby主题ui
已被重命名为
gatsby插件主题ui
原始版本仍然存在，因此如果您安装了该版本，则您的主题将无法使用。