When using gatsby's Head API, the Chakra UI theme is applied as the default theme

[Ryong-E]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Before using gatsby's Head API, the theme you defined was applied as normal, but after applying the Head API, it is applied as the default theme

this i defined theme

i used chakra UI plugin

This is the Provider component with the theme I defined for the chakraProvider

I'm applying the above provider as a wrapPageElement to gatsby-ssr, gatsby-browser

I'm creating a template and generating pages through gatsby-node.
When I don't apply the head API to the template, the theme I defined is applied as normal.
However, when I apply the head API and run a test, the default theme is applied

If we say that the top page does not use the head API and the bottom page applies the head API, then the

This is what it looks like inside the head tag on the top page

The following picture shows the head tag when we jump from the top page to the page where we applied the head API.
You can see that an additional style tag has been created, unlike before

The solution I found was to use the
is to set it to body via cssVarsRoot, a property of the ChakraProvider.

I wonder if I'm doing something wrong, or if this is the intended behaviour of the Head API?

Reproduction Link

Cannot be created with the latest version of Gatsby

Steps to Reproduce

I can't use codesendbox because I'm using the latest version of gatsby

Let's keep it simple

For custom theme, please change the colour to gray.800

Gatsby-ssr, Gatsby-browser with a custom themed ChakraProvider using the
wrapPageElement to a ChakraProvider with a custom theme.

Expected Result

The SEO you set will be applied and the
the theme you defined should also be applied

Actual Result

The SEO you set will be applied
When I applied the Head API, I got the colour grey.800 and the
You can see that the colour of gray.800 is different when the API is not applied

Environment

System OS: Mac OS
gatsby: 5.7.0
chakraUI/: 2.5.1
chakra-ui/gatsby-plugin": "^3.1.1",
emotion: 11.10.6
react: 18.2.0
react-dom: 18.2.0

Config Flags

Not used

[LekoArts]

Hi!

This is specific to your usage of Chakra UI, not Gatsby it seems. I already answered you in chakra-ui/chakra-ui#7589 what you need to do.

As you also can't reproduce this I'm closing this in favor of chakra-ui/chakra-ui#7589